Floating Menu Script [Archive] - Dynamic Drive Forums

View Full Version : Floating Menu Script

Astartiel

07-12-2006, 06:53 AM

Floating Menu Script
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

I am using a slightly edited version of this script and I want to know if there is a way to put it in a js file, like this:

<script type="text/javascript" language=JavaScript src="script/menu.js"></script>

I have been testing this out on this page:

http://astartiel.cabspace.com/test1.html

Here is the contents of menu.js:

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

<layer id="divStayTopLeft">


<table border="0" width=130 cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<p align="left"><b><font size="4">Site Menu:</font></b></td>
</tr>
<tr>
<td width="100%" visibility:no>
<p align="left">
<a href=main.html>Start Page</a><br>
<a href=apologygw.html>Shrub Apology</a><br>
<a href=bio.html>My Biography</a><br>
<a href=http://astartiel.123guestbook.com/>My Guestbook</a><br>
<a href=income.html>My Income Project</a><br>
<a href=MyResume.html>My Resume</a><br>
<a href=http://astartae_.livejournal.com>My LiveJournal</a><br>
<a href=http://astartae.deviantart.com>My DeviantArt</a><br>
<a href=songs4.html>My Favorite Lyrics</a><br>
<a href=favmovies.html>My Favorite Movies</a><br>
<a href=links3.html>My Favorite Links</a><br>
<a href=quotes3.html>Motivational Quotes</a><br>
<a href=sethlinks2.html>Seth & Jane Roberts</a><br>
<a href=littlebook.html>Tweety's Little Book</a><br>
<a href=search2.html>Search Google</a><br>
<a href=mailto:astartiel@gmail.com>Email Me</a><br>
<a href=http://www.percevalpress.com>Perceval Press</a><br>
</td>
</tr>
</table>

</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
*/

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

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

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

So far I cannot get this to work. Can anyone tell me what I'm doing wrong here?

Astartiel

07-12-2006, 05:43 PM

If anyone could help me with this it would really be helpful. Thanks.

jr_yeo

07-12-2006, 06:33 PM

dunno if this is really helpful, but have u tried removing the external js file and
just place the whole menu as instructed in the DD url :p

Simply insert the below code to the END of your document, right above the </BODY> tag.

Astartiel

07-13-2006, 04:32 AM

Yes, but I don't want to do that. I know it is possible to have all the other pages "call" one file. That way if I need to change something on the menu, I just have to change one file rather than twenty or more. Understand where I'm going here? So, just doing what you suggest (which I am doing atm, but I have it at the top of the page so the menu loads first instead of last, for slow internet users like me) would kind of defeat the point, wouldn't it? Thanks for the suggestion though.

jr_yeo

07-13-2006, 04:43 AM

yeah i understand where you're going here :D

jscheuer1

07-13-2006, 04:45 AM

Well, you cannot put straight HTML in an external .js file. The supporting HTML markup that is used by the script must remain on the page or be included there via other methods. Only the script itself can be made external using this method. Here is my mini-tutorial on how to make a script external:

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

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

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>

</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.

Astartiel

07-13-2006, 05:58 AM

Ok, I'm understanding some of this. Is there a way to make the javascript access a text file or html file with the menu list on it? That would be a solution to the problem I'm having.

jscheuer1

07-13-2006, 07:08 AM

Well, since as it says on the demo page:

1) Support for arbitrary rich HTML, so you can float "anything."

That would mean that you could float something like this:

<iframe width="130" height="600" src="menu.htm"></iframe>

Then on menu.htm you could have your table or whatever. Iframes are a little tricky but usually can be worked out to your satisfaction using their attributes and/or style as well as sometimes style on the external page. For links on a page in an iframe to open in the top page, you need to use something like so:

<a href="some.htm" target="_top">Some Link</a>

There also are server side includes that can be done if your host supports PHP or ASP. I've heard of a 'shared border' in MS FP but don't know much about it or if it would work with this.

Finally, you could write your HTML code to the page using javascript's document.write() method but, this is not such a good idea. It would leave folks without javascript with no menu at all.

Astartiel

07-14-2006, 06:16 PM

Thanks so much. I will try that out and tell you if it worked. I learned basic HTML back around 1995 and the world of the web has changed by leaps and bounds since then. It's all good changes but most of it is beyond my desire to learn. ;-)

Astartiel

07-14-2006, 06:41 PM

Well, I've got it working! Thanks so much for your help!
Go to http://astartiel.cabspace.com to see it in action.