SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Poole, Dorset, United Kingdom
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll Bar Position When Clicking on link to reload page

    Hi All
    I have a date table which you can update time slots with. When you click the href link the page reloads and returns to the page top. I need it to stay at the same scroll bar position as
    the user will probably be updating several time slots at the same time.

    I have had a look online and found one solution but cant get it to work.

    My page pulls a table for a 24 hour clock so there are 24 rows. I have droped the id element tab in the opening part of my <tr> tag

    echo("<td id='tabs' bgcolor='#25B8DA' span class='create_slots_header' align='center'>$columnTime</span></td>");

    Not sure whats wrong or if I am doing it all wrong. Any help would be great!

    <script>
    (function() {
    var sneaky = new ScrollSneak(location.hostname), tabs = document.getElementById('tabs').getElementsByTagName('li'), i = 0, len = tabs.length;
    for (; i < len; i++) {
    tabs[i].onclick = sneaky.sneak;
    }

    document.getElementById('next').onclick = sneaky.sneak;
    })();
    </script>

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You never closed the initial <td> tag, do this:
    echo("<td id='tabs' bgcolor='#25B8DA'><span class='create_slots_header' align='center'>$columnTime</span></td>");

    Also, make sure the source code for ScrollSneak is included. If that doesn't fix the problem I could suggest another solution.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Poole, Dorset, United Kingdom
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant get it working, what was your other idea ?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Poole, Dorset, United Kingdom
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi I have had a good search around and came across this script but dont have a clue how to call it in my page. There is a JS file in the header and javascript at the end of the page.
    It mentions click handlers applied to the links. How would I do this on a href link

    Any help would be great

    1. click handlers are applied to the links that should maintain the scroll bar position between page loads
    2. when one of those links is clicked, the click handler grabs the scroll position from the window or document object and stores it as a string on the window.name object and then allows the new page to load
    3. when a page loads, the window.name object is checked to see if a scroll position has been stored in it, and if it has one, it scrolls to that position


    Main JS File in header
    ********************
    var ScrollSneak = function(prefix, wait) {
    // clean up arguments (allows prefix to be optional - a bit of overkill)
    if (typeof(wait) == 'undefined' && prefix === true) prefix = null, wait = true;
    prefix = (typeof(prefix) == 'string' ? prefix : window.location.host).split('_').join('');
    var pre_name;

    // scroll function, if window.name matches, then scroll to that position and clean up window.name
    this.scroll = function() {
    if (window.name.search('^'+prefix+'_(\\d+)_(\\d+)_') == 0) {
    var name = window.name.split('_');
    window.scrollTo(name[1], name[2]);
    window.name = name.slice(3).join('_');
    }
    }
    // if not wait, scroll immediately
    if (!wait) this.scroll();

    this.sneak = function() {
    // prevent multiple clicks from getting stored on window.name
    if (typeof(pre_name) == 'undefined') pre_name = window.name;

    // get the scroll positions
    var top = 0, left = 0;
    if (typeof(window.pageYOffset) == 'number') { // netscape
    top = window.pageYOffset, left = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { // dom
    top = document.body.scrollTop, left = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { // ie6
    top = document.documentElement.scrollTop, left = document.documentElement.scrollLeft;
    }
    // store the scroll
    if (top || left) window.name = prefix + '_' + left + '_' + top + '_' + pre_name;
    return true;
    }
    }



    javacript at end of page
    *****************
    <script>
    (function() {
    var sneaky = new ScrollSneak(location.hostname), tabs = document.getElementById('tabs').getElementsByTagName('li'), i = 0, len = tabs.length;
    for (; i < len; i++) {
    tabs[i].onclick = sneaky.sneak;
    }

    document.getElementById('next').onclick = sneaky.sneak;
    })();
    </script>

  5. #5
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oops I meant to respond yesterday and something came up...

    That is just plain overkill! You could actually do it without javascript. Here are two ways (with/without javascript):

    * Add a hash to the url prior to reloading the page
    * * Either with javascript: window.location.hash = "#hour15";
    * * Or with straightup html: "<a href="#hour15"></a>
    * Have an anchor at each hour, like this "<a name='hour15'></a>"
    * The page will automatically just scroll there for you
    * You could even remove the hash whenever the page loads if you wanted


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
  •