General Question

[lrubin28]

Hi,

I used "Switch Menu script" for my website - I am not a developer. It worked great for me and does exactly what I wanted it to do.
However, some of my pages are are fairly long in terms of length, and when you select a menu item that brings you down to the bottom of a page, you can no longer see the menu (which is on the left side of the page). So my question is, is there another script that I can use with this one that will make it so the menu is always visible, regardless of where on the page you are viewing, and that won't interfere with this one, that's not too hard for a non-techie to implement? ...Thanks!

(Oh, if anyone wants to see the website for reference, it is http://www.PolymerClayProjects.com)

Larry
lrubin28@rcn.com

[Minos]

Absolutely. This is the Floating Menu script, simply paste the code at the very bottom of the page (right above the </body> tag). The, put your switch menu inside the layer tags, where I marked. that's it. If it isn't the effect you'd like, or the position, let me know. Also, I noticed that your Home button has a submenu for the link? I can you give the code for it from my site, where I changed it to allow the first level to be a link itself...

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

<layer id="stayTopLeft">

//INSERT SWITCH MENU 'masterdiv' IN HERE

</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();

[lrubin28]

I will try it and thanks for taking the time to respond.

Also I would love to know how to change the code so that I don't have to have sub-menus when there's only one item, like the Home menu item.

Thanks again!

[Minos]

Sure thing:

In your code, find the function SwitchMenu and replace it with this:

function SwitchMenu(obj, addr){
	if(document.getElementById){
	if (obj!=0)var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(obj==0 || el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			if (obj!=0)el.style.display = "block";
		}else{
			if (obj!=0)el.style.display = "none";
		}
	}
        if (addr) parent.location.href=addr
}

Then, for your menu, it should look like this:

<div class="menutitle" onclick="SwitchMenu(0, './test2.html')" onMouseOver="this.className='menutitle2'" onMouseOut="this.className='menutitle'">Home</div>

	<div class="menutitle" onclick="SwitchMenu('sub2')" onMouseOver="this.className='menutitle2'" onMouseOut="this.className='menutitle'">Industrial</div>
	<span class="submenu" id="sub2">
		<a href="http://www.sequal.com/industrialoxygenproducts.htm" target="mainWindow">Oxygen</a><br>
		<a href="http://www.sequal.com/industrialnitrogengproducts.htm" target="mainWindow">Nitrogen</a><br>
		<a href="http://www.sequal.com/industrialairdryingproducts.htm" target="mainWindow">Air Dryer</a><br>
	</span>

For the ones that will not expand, the onClick becomes SwitchMenu(0, 'theurlitislinkedto.html'). That's it! The onMouseover and onMouseOut are just a way to have (obviously) mouseover effects.

[lrubin28]

Here's what I now have in FP...I previewed it, but nothing happens - I haven't published it, but not sure that would make a difference. Here's what I have - what am I screwing up;

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


<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>
</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>
</blink>
</body>
</html>

[Minos]

You put the javascript from the switch menu in there instead of the actual menu.
Replace

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>

with the part of switch menu that looks like:

<!-- Keep all menus within masterdiv-->
    <div id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu(0, './test2.html')" onMouseOver="this.className='menutitle2'" onMouseOut="this.className='menutitle'">Home</div>

	<div class="menutitle" onclick="SwitchMenu('sub2')" onMouseOver="this.className='menutitle2'" onMouseOut="this.className='menutitle'">Industrial</div>
	<span class="submenu" id="sub2">
		<a href="http://www.sequal.com/industrialoxygenproducts.htm" target="mainWindow">Oxygen</a><br>
		<a href="http://www.sequal.com/industrialnitrogengproducts.htm" target="mainWindow">Nitrogen</a><br>
		<a href="http://www.sequal.com/industrialairdryingproducts.htm" target="mainWindow">Air Dryer</a><br>
	</span>

Keep the script (the top one) Inside the <head> tags of your page.

[ddadmin]

Hmmm personally I really wouldn't mix the two scripts together and instead just try and modify Switch Menu script to work for you. Can you more specifically describe the original problem you're having again, such as which menu link to click to see the problem, and in what browser?

[lrubin28]

you asked what I am trying to do. I used the Switch menu which worked fine for me, but sometimes it will bring a user to something near the bottom of a long page, and the menu is no longer viewable, and so navigation isn't easy for customers. I wanted the menu to always be on the left side of the screen, no matter where on the page the user might be. Does that make sense?

[lrubin28]

Thanks again for your help. I'll try it tonight when I get home...

Larry

[Minos]

Well...Aside from the floating menu...you could use frames.