Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"Docked" menu

Status
Not open for further replies.
jcale4

jcale4

Programmer
Aug 31, 2004
63
US
Hello! I'm looking for a script that will "dock" a menu in the bottom of the browser window that scrolls with the user. Essentially it should be "attached" to the bottom of the browser window. Is there a way to do this with simple CSS positioning? I know how to position the <div> in the bottom of the screen, but i cant make it stay at the bottom as the user scrolls.

Thanks!
 
Sort by date Sort by votes
Something like this may work for you.
It creates a layer object and floats it x pixels from the bottom. You also have to state how many pixels from the left to place it. If you want to make certain it is always centered then you may have to determine the browser width and adjust the startX value to compensate.

This is not my script originally and has been modified many times over for various uses. I do not know who wrote the original.

<html>
<head>
<title></title>
</head>
<body>
<div align="center">
Test<br>Test<br>Test<br>...<br>Test<br>

<script>
if (!document.layers)
document.write('<div id="floatingLayer" style="position:absolute">')
</script>

<layer id="floatingLayer">
<table border="1" width="100%" height="100" cellspacing="0" cellpadding="0" bgcolor="#7AA1E6">
<tr>
<td width="100%" align="center" valign="middle"><input type="Button" value="Button1">&nbsp;&nbsp;<input type="Button" value="Button2">&nbsp;&nbsp;<input type="Button" value="Button3">&nbsp;&nbsp;</td>
</tr>
</table>
</layer>

<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function floatingmenu()
{
var startX = 20;
startY = 120;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.floatingLayer=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("floatingLayer()", 10);
}
ftlObj = ml("floatingLayer");
floatingLayer();
}
floatingmenu();
</script>
</div>
</body>
</html>

Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
THanks! I ran into that script, and tested it but it wont work for what I need. A little background: this "docked" element contains several input and select boxes that modify cookie values in an ASP site. Basically they are filter values, and they all flex dynamically via javascript arrays. When I tried the above script, if i selected something in any of the boxes, it inverted the entire box and stacked all of the elements on top of each other. All i really need is a way to attach a div to the bottom or top of the screen and allow it to scroll with the browser.
 
Upvote 0 Downvote
I use this to dynamically create 3 different menus within the same menu and have not had a problem. Divs sometimes act funny when they get altered through HTML though, you could try changing the DIV's to span tags for a little cleaner control.

But, you should be able to do the same thing with absolute positioning. Do not make it a layer, just absolute position it. Detect the screen scroll and reposition the DIV dynamically. I do not have a sample of code here for doing it right now but have done it in the past.
You may very well run into the same problem again though.


Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
801
trevil620
trevil620
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
385
gmmastros
gmmastros
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
267
ggriffit
ggriffit
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
725
nanbread
nanbread
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
223
Dara2020
Dara2020

Part and Inventory Search

Sponsor

Back
Top