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>
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.
I cant get it working, what was your other idea ?
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
- click handlers are applied to the links that should maintain the scroll bar position between page loads
- 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
- 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>
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