Javascript Move based on Scroll

warrenaldo

Hey guys, I have a website that contains a long list of links and a map
ie:
________________
Dublin | |
Cork | MY MAP |
Kerry |________________|
Mayo
Galway
Tyrone
kildare

Ok the problem is when i scroll down past kildare say - i cannot see the map. I would like to implement some javascript to auto move the map based on ym scroll position.

Any help/tips?

Ph3n0m

http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

this might work - or atleast somewhere on the site should be some script that is of use

ron_darrell

Might be (as an alternative to javascript) an idea to look at css backgrounds and see about backgrounds that stay with the page regardless of how much you scroll. A bit of rewriting of the layout and you could have a 2 cell table with the background (which is the map) fixed in position on one side of the table the list of places on the other so as you scroll down through the list the map stays in place. Alternatively place the map in a div, and have an onscroll event on the page fire each time the user moves down adjusting the position of the div.

-RD

daymobrew

http://www.dyn-web.com/dhtml/slide/glide-stat.html

I first saw it used with a menu on http://www.fullahead.org/

Other possible ideas at http://www.dyn-web.com/dhtml/slide/

mewso

Heres some code that will do a nice unobtrusive job for you. Put it in an external .js file and then wrap anything you want to scroll in a div with a class="movewithscroll":-

AddLoadEvent(InitObjectScroller);
function AddLoadEvent(func) {
    var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func();
  }
 }
}
function AddScrollEvent(func)   {
    var oldonscroll = window.onscroll;
 if (typeof window.onscroll != 'function') {
  window.onscroll = func;
 } else {
  window.onscroll = function() {
   oldonscroll();
   func();
  }
 }
}
function InitObjectScroller()   {
    AddScrollEvent(pageScroll);
}
function pageScroll()   {
    var objects = document.getElementsByTagName("div");
    var i = 0;
    for (i=0;i<objects.length;i++)  {
        if (objects[i].className.indexOf("movewithscroll")>-1)  {
            var obj = objects[i];
            var curr_y = parseInt(obj.style.top);
            if (!curr_y) curr_y = 100;
            var scrollY=0;
            if (!document.documentElement.scrollTop)    {
                scrollY = document.body.scrollTop;
            } else  {
                scrollY = document.documentElement.scrollTop;
            }    
            var targety = 100+scrollY;
            if (curr_y!=targety) {
                if (curr_y>targety)  {
                    curr_y-=1;
                } else  {
                    curr_y+=1;            
                }
                obj.style.top=curr_y+'px';    
            }
        }
    }
    setTimeout('pageScroll()', 20); //smooths the movement - set low for instant movement
}

You need to style the div to be positioned absolutely and set an initial position (top and left values in css).

warrenaldo

Thanks for the help guys - i decided to go with the onScroll Page Event - i linked in an onscroll JS function that grabs the scroll position and moves the div accordingly.
Heres the code - nice and easy.
<code>
function onScroll() {
if (document.layers) {
document.getElementById("map").style.top=window.pageYOffset;
}
else if (document.all) {
document.getElementById("map").style.top=document.body.scrollTop;
}
}
</code>
Thanks for the help