PDA

View Full Version : "Floating Menu Script" mod



dj_ray
10-20-2004, 09:11 PM
This is a simple fix for you javascript gurus! (not for me though!)

The script in question is located here: http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

All I want is instead of having the script floating on only the left side, could you modify the script so the menu floats on the right bottom?

Also I would prefer if the location of the menu could be user specified by position, but that is a secondary request!

Thanks in advance!

dj_ray
10-22-2004, 09:59 PM
Just want to know if this is an easy fix...
Please some response would be appreciated!

sibilance
10-23-2004, 12:17 PM
Hi.

Look for this line of code:

var startX = 5,
startY = 180;

---

alter those values a bit for testing and see what you get.

Take care...

dj_ray
10-25-2004, 01:34 PM
yeah but those are absolute values...

cr3ative
10-25-2004, 04:20 PM
I've modified the script for you, but I've only checked it in Firefox (I'm very pushed for time at the moment), so test it and report back to me.



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

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
<a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
<a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
Modified 25th October 2004 by cr3ative @ dynamicdrive.com/forums to stay in right-hand side of window.
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

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

function JSFX_FloatTopDiv()
{
var startX = document.body.clientWidth - 150,
startY = 150;
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.stayTopLeft=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.x = document.body.clientWidth - 150;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>




Code Notes: Wherever you see:

var startX = document.body.clientWidth - 150,
or
ftlObj.x = document.body.clientWidth - 150;

Then 150 needs to be made larger if you have a wider menu.

cr3ative

dj_ray
10-26-2004, 07:07 PM
the code works...

however remove the spaces in the following lines:

var el=d.getElementById?d.getElementById(id):d.all?d.a ll[id]:d.layers[id];
el.sP=function(x,y){this.style.left=x;this.style.t op=y;};

thanks a lot creative!

cr3ative
10-27-2004, 06:02 AM
Well spotted :)

It doesn't want to edit them out using the Edit button, so I guess my old post'll have to live with them :(

cr3ative