Control that automatically drags when page is scrolled down
-
Hi, I don't know what it's called. I don't know where to start but i've seen this in some sites. I'd like a control or a panel that's always visible to the user whether I scroll up or down the page. Like I have a really long content and when I scroll down I still want my menu (on the left) to always be visible. Thank you.
Gerri
-
Hi, I don't know what it's called. I don't know where to start but i've seen this in some sites. I'd like a control or a panel that's always visible to the user whether I scroll up or down the page. Like I have a really long content and when I scroll down I still want my menu (on the left) to always be visible. Thank you.
Gerri
Hi Gerri I've used the following in the past: Wrap what you want to remain static in a div:
...Content...
Within your body tag, add onscroll="javascript:repositionPanel()"; Add a style something like the following: #myPanel {background-color:white;text-align:center; z-Index:5;position:absolute; top:320px;left:200px;width:200px;height:410px; } Then in your repositionPanel() javascript function: function repositionPanel(){ var x = (posRight()-230) + 'px'; var y = (posTop()+panelTop) + 'px'; moveObjTo('myPanel',x,y); } function moveObjTo(objectID,x,y) { var objs = xDOM(objectID,1); objs.left = x; objs.top = y; } Any questions, let me know. Cheers Ben -- modified at 4:40 Thursday 18th October, 2007
-
Hi Gerri I've used the following in the past: Wrap what you want to remain static in a div:
...Content...
Within your body tag, add onscroll="javascript:repositionPanel()"; Add a style something like the following: #myPanel {background-color:white;text-align:center; z-Index:5;position:absolute; top:320px;left:200px;width:200px;height:410px; } Then in your repositionPanel() javascript function: function repositionPanel(){ var x = (posRight()-230) + 'px'; var y = (posTop()+panelTop) + 'px'; moveObjTo('myPanel',x,y); } function moveObjTo(objectID,x,y) { var objs = xDOM(objectID,1); objs.left = x; objs.top = y; } Any questions, let me know. Cheers Ben -- modified at 4:40 Thursday 18th October, 2007
I'm sorry I can't get it to work. Is this correct? I found a similar control on mapleglobal.com There are ads on the right side of the page whenever I (browser) scroll down, it scrolls down as well. Thank you. ... ajax:Accordion...</ajax:Accordion> </div> <div class="ForumSig">Gerri</div></x-turndown>
-
I'm sorry I can't get it to work. Is this correct? I found a similar control on mapleglobal.com There are ads on the right side of the page whenever I (browser) scroll down, it scrolls down as well. Thank you. ... ajax:Accordion...</ajax:Accordion> </div> <div class="ForumSig">Gerri</div></x-turndown>
Hi Gerri Apologies, it looks like I may have missed a couple of functions. The following html page will do what you want, although it doesn't run as smoothly as the example you gave: function movePanel(){ var panel = document.getElementById("panel"); var current = panel.style.top.split('px')[0]; var top = posTop(); if(current < top){ while (current < top){ panel.style.top = current + 'px'; current++; } } else if (current > top){ while (current > top){ panel.style.top = current + 'px'; current--; } } } function posTop(){ if(!document.body.scrollTop){ return 0; } else if (document.body && document.body.scrollTop){ return document.body.scrollTop; } else if (document.documentElement && document.documentElement.scrollTop){ return document.documentElement.scrollTop; } }
some text
Cheers Ben
-
Hi Gerri Apologies, it looks like I may have missed a couple of functions. The following html page will do what you want, although it doesn't run as smoothly as the example you gave: function movePanel(){ var panel = document.getElementById("panel"); var current = panel.style.top.split('px')[0]; var top = posTop(); if(current < top){ while (current < top){ panel.style.top = current + 'px'; current++; } } else if (current > top){ while (current > top){ panel.style.top = current + 'px'; current--; } } } function posTop(){ if(!document.body.scrollTop){ return 0; } else if (document.body && document.body.scrollTop){ return document.body.scrollTop; } else if (document.documentElement && document.documentElement.scrollTop){ return document.documentElement.scrollTop; } }
some text
Cheers Ben
WOW! YOU'RE THE BEST! THANK YOU SO MUCH. I do have another question please. Well my div is on the left side, if I resize my browser window and then scroll to the right it moves itself to the right side thereby making it always visible. Can it just stay in its location and just scroll up/down accordingly? Thank you very much.
Gerri
-
WOW! YOU'RE THE BEST! THANK YOU SO MUCH. I do have another question please. Well my div is on the left side, if I resize my browser window and then scroll to the right it moves itself to the right side thereby making it always visible. Can it just stay in its location and just scroll up/down accordingly? Thank you very much.
Gerri
Hi Gerri Not sure why you're getting that behaviour... If you replace the body from the above example with the following:
some text
And then scroll to the right, the panel remains on the left hand side.... Cheers Ben
-
Hi Gerri Not sure why you're getting that behaviour... If you replace the body from the above example with the following:
some text
And then scroll to the right, the panel remains on the left hand side.... Cheers Ben