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/dynamici...tent/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/s...ad.php?t=39375
http://www.dynamicdrive.com/forums/s...ad.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 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.