Ajax Tabs Content Script (v 2.2) - Page Moves to Top of Page When Clicking on Tab

[gkiller]

1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

Really great script and the ability to use nested tabs really came in handy for me.

I was wondering if there is a way to keep the page in place and not scroll to the top when a tab is clicked?

I was told by others that is nature of the browser, however, I have a jQuery tab container that stays in place when each tab is clicked. Unfortunately, it doesn't support nesting and AJAX calls to external files.

If there is a way to modify the source script or default properties, that would be awesome.

Thanks

[ddadmin]

There are a few threads on getting the browser to jump to a certain location on the page when a tab is clicked on, manually overriding the default behavior of the browser. See for example:

http://www.dynamicdrive.com/forums/showthread.php?t=39375
http://www.dynamicdrive.com/forums/showthread.php?t=21878

[gkiller]

Thanks for the response. I tried both suggestions, but no luck. Basically, when I scroll down the page and read content, I want the page to stay in place as I click on a new tab. Here is the code that I am using.


<!-- Tabs. THE PAGE SHOULD REMAIN HERE AFTER EACH TAB CLICK -->
<div id="resourceTabs" class="hDefaultATab" align="center">

<a href="earlyChildhood.cfm" rel="resource"><img src="early.gif" /></a>

<!-- THIS IS A NESTED TAB -->
<a href="elementary.cfm" rel="resource"><img src="elementary.gif" /></a>

<!-- THIS IS A NESTED TAB -->
<a href="middle.cfm" rel="resource"><img src="middle.gif" /></a>

<!-- THIS IS A NESTED TAB -->
<a href="secondary.cfm" rel="resource"><img src="secondary.gif" /></a>

<a href="administrative.cfm" rel="resource"><img src="admin.gif" /></a>

</div>

<!--- Requirements --->
<div class="linkContainer">
<div class="linkContent descriptor">
<div id="resource"></div>
</div>
</div>


Thanks

[ddadmin]

Ok, lets try this approach then. Inside the initialization code for your Ajax Tabs, make use of the onajaxpageload event handler (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm) to scroll into view the tab container the user just clicked on after the content has been fetched. Here's an example:


var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.onajaxpageload=function(pageurl){
var tabcontainer=document.getElementById("flowertabs")
if (tabcontainer.scrollIntoView)
tabcontainer.scrollIntoView()
}
myflowers.init()

Make sure "myflowers" correspond to the variable name of your Ajax Tabs instance, and "flowertabs" the ID of your container containing the tabs for that Tabs Interface.