Results 1 to 4 of 4

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

  1. #1
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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
    DD Admin

  3. #3
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •