Floating Drop Down Menu?

[Zaph]

More of a query this one:
I'm using the Anylink Drop Down Menu http://www.dynamicdrive.com/dynamici...pmenuindex.htm and have now been asked if I could make it float at the top of the screen for when there is a long scrolling page.

I was wondering what the best way to do this would be. I thought of a scrolling Iframe, but then realized that the actual drop downs would go off the bottom of the frame.

Also, I would like to place a box around the outside of the menu so that it has a nice background for when it hovers over anything else on the page. Would this be best written into the document.write file?

Anyone got any ideas?

Thanks in Advance,
Martyn.

[jscheuer1]

Hate to plug the competition but JavaScriptKit has a good tutorial on this:

Using JavaScript to statically display elements

Particularly interesting to me was their remark that css positioning fixed is an alternative:

style="position:fixed;top:0;left:250px;"

as inline style for a containing division.

It will only work in Mozilla but then there are other ways to deal with the situation in IE as explained in the tutorial or using DD's floating Iframe.

[jscheuer1]

I got curious and made up a little demo which I'll attach, it is not well commented so, if you have any questions, let me know.

[Zaph]

That looks great!

But how would I incorporate my style sheet and js files, which are in sepearate files?

At the moment all I need to put in my page is:

<link rel="stylesheet" href="../anylink.css" type="text/css">
<script src="../anylink.js" type="text/javascript"></script>

in the head, and:

<script src="any_menu_index.js" type="text/javascript"></script>

in the place i want the menu.

Thanks.
Martyn.

[jscheuer1]

Hi there,
Thanks for the help with this one.
I'm having a problem incorporating the script for a different use though. I have a very large table, and wanted to use the script to make the column headers float in a sort of excel/freeze panes style.

The problem I have though is it is too high, centred and when I scroll horizontally it moves with the scroll.

Is it going to be easy to fix these issues?

Thanks again.

Well, fix is not exactly the word I would use. The code to float content was taken pretty much from the tutorial I mentioned above. I 'enhanced' it for my demo to center and to include the drop down menus. Here it is unaltered but commented to show where positioning can be done:

<div id="staticbanner" style="position:absolute;">
Advertisement<br>
<a href="http://test.htm"><img
src="test.gif" width="120" height="90" alt="Click here!"
border="0"></a>
</div>

<script>
//define universal reference to "staticbanner"
var crossobj=document.all? document.all.staticbanner : document.getElementById? document.getElementById("staticbanner") : document.staticbanner

function positionit(){
//define universal dsoc left point
var dsocleft=document.all? document.body.scrollLeft : pageXOffset
//define universal dsoc top point
var dsoctop=document.all? document.body.scrollTop : pageYOffset
//define universal browser window width
var window_width=document.all? document.body.clientWidth : window.innerWidth

//if the user is using IE 4+ or NS6+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+
parseInt(window_width)-135 //position left coord for IE4+ & NS6+
crossobj.style.top=dsoctop+5 //position top coord for IE4+ & NS6+
}
//else if the user is using NS 4
else if (document.layers){
crossobj.left=
dsocleft+window_width-140 //position left coord
crossobj.top=dsoctop+15 //position top coord
}
}
setInterval("positionit()",200)
</script>

To get it to not follow the scroll left to right change this:

crossobj.style.left=parseInt(dsocleft)+
parseInt(window_width)-135 //position left coord

to:

crossobj.style.left=135+'px' //position left coord

and this:

crossobj.left=
dsocleft+window_width-140 //position left coord

to:

crossobj.left=135+'px' //position left coord

For a different top coord just change the number added.

[jscheuer1]

But how would I incorporate my style sheet and js files, which are in sepearate files?

You can do it the same way only there is the additional script, add its include where it appears.