PDA

View Full Version : General Question



lrubin28
01-03-2005, 04:51 PM
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
01-03-2005, 09:47 PM
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
01-04-2005, 12:08 AM
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
01-04-2005, 12:36 AM
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
01-04-2005, 03:39 AM
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
01-04-2005, 06:52 AM
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
01-04-2005, 01:03 PM
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
01-04-2005, 03:50 PM
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
01-04-2005, 03:51 PM
Thanks again for your help. I'll try it tonight when I get home...

Larry

Minos
01-04-2005, 09:37 PM
Well...Aside from the floating menu...you could use frames.

lrubin28
01-04-2005, 09:52 PM
Actually I wanted to use frames, but I use Front Page, and I wasn't sure that it would be very easy to start over from scratch - I don't think I can create frames in an existing web...maybe just copy and pasting would work. Thanks Karen...

Minos
01-05-2005, 09:12 AM
Well, if you need help setting that up (if you decide to go that route), ask.

lrubin28
01-05-2005, 03:39 PM
way too kind...!

lrubin28
01-09-2005, 07:52 PM
Hi Minos,

I was wondering if you can help...you were kind enough to tell me how to use the Switch menu so that if I didn't have a sub-menu, I could just click the button and go directly to the page. Well I got that to work, but meanwhile I had ended up creating a frames page for my menu - so with the code you gave me, I can link to the page I want, but the frames are gone. I was wondering if you could tell me what I need to do to keep the fram displayed? Thanks again for your time..

Larry

batcaveguy
01-09-2005, 08:46 PM
I'm using the same script on my site.

Here's one simple thing you can try in your css section.

.navbar { width:200px; height:800 px; overflow:auto; float:left;}

This will automatically generate a vertical scrollbar.
Or a horizontal one as needed.

This will then allow your visitors to see the lower end of your menu.
Or.....you can simply change the height of navbar to ensure it will be seen at all times.
The scrollbar idea should work better in case you have something below that division.