Sliding Menu - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Sliding Menu

Now it works, now it doesn't...

Horse Feathers

4:22 pm on Apr 5, 2004 (gmt 0)

10+ Year Member

My sliding menu works fine on my computer, but when I load it up (via ftp) and view from my browser, the submenu won't expand. If I click on one of the other links, go back, and then try the menu, it works just fine.

What am I missing here?

~ ~ ~

I've got external js and css files that contain the following:
--------------------
function toggleMenu(currMenu){
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style
if (thisMenu.display == "block") {
thisMenu.display = "none" }
else {
thisMenu.display = "block" }
return false }
else {
return true } }
--------------------
.menu {display: none;
}
--------------------
And the code in the actual document:
--------------------
<a href="process.html" onMouseover="document.pro.src=prodark.src"
onMouseout="document.pro.src=prolight.src">
<img src=button/lpro.gif name=pro alt=Process></a><br>

<a href="testpage.html" onMouseover="document.gal.src=galdark.src"
onMouseout="document.gal.src=gallight.src"
onClick="return toggleMenu('menu1')"><img src=button/lgal.gif name=gal alt=Gallery></a>

<span class="menu" ID="menu1">
<a href="gallery1.html" onMouseover="document.one.src=onedark.src"
onMouseout="document.one.src=onelight.src">
<img src=button/l1.gif name=one alt="Gallery 1"></a><br>

<a href="gallery2.html" onMouseover="document.two.src=twodark.src"
onMouseout="document.two.src=twolight.src">
<img src=button/l2.gif name=two alt="Gallery 2"></a><br>

<a href="gallery3.html" onMouseover="document.three.src=threedark.src"
onMouseout="document.three.src=threelight.src">
<img src=button/l3.gif name=three alt="Gallery 3"></a></span>

Rambo Tribble

10:40 pm on Apr 5, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Your description of the problem suggests that you are not preloading your images and when the page needs to display the submenu it is having to go back to the server to download the appropriate image. You can either preload the images by including them in a hidden div or through a JavaScript creation of a new Image object for each image.

Horse Feathers

12:16 am on Apr 6, 2004 (gmt 0)

10+ Year Member

I already have my images preloaded (and I notice no delay on the rollover images). I tried tweaking the javascript, and made sure I was using the script I've found in these forums for preloading. But I'm still can't get the sliding menu to work the first load through.

What is the hidden div you mentioned?

Thanks for your help!

Rambo Tribble

1:46 am on Apr 6, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The hidden div approach just places the images in a division that has visibility set to hidden, usually at the end of the document so they will occur below the content if an archaic browser that doesn't understand visibility:hidden gets ahold of the page. Then you load the images with regular image tags. Something like:
<style type="text/css">
div#noSeeum{visibility:hidden;}
</style>

<body>
<div id="noSeeum">
<img src="myPhoto.jpg" />
</div>
</body>

From the code you supplied, I don't see where the .src values for the objects you are reassigning on mouseover and mouseout are originating. You're sure these images have been loaded as objects as in var myImgOne = new Image(); myImgOne.src = "theImageInQuestion.jpg";?

[edited by: Rambo_Tribble at 2:08 am (utc) on April 6, 2004]

Horse Feathers

2:02 am on Apr 6, 2004 (gmt 0)

10+ Year Member

I tried the DIV as above, and not only did it not make the slide menu work on the first load, but when the slide menu did work, my submenu is no longer visible. Did I put it in the wrong place?

I'm curious, you appear to have images with file extensions of .src. That's a bit odd. Why is that? .src is usually the way in dot notation to specify the source attribute of an image object.

Took the script straight out of the Visual Quickstart Guide for Javascript (Peachpit Press). Creating More Effective Rollovers: "[...] using the .src property, it fills the src properties of the two objects with the GIFS of [the two images]."

Rambo Tribble

2:16 am on Apr 6, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

When you use the div technique, you then call the image directly, rather than through object notation. But if you are getting the images loaded to start with, we need to start back figuring.

At the moment I'm on my Linux box, my Win XP is backing up. As soon as it's done I'll be able to get to my favorite editor (HTML-Kit) and try a few things. I think we'll want to try replacing some of the mouse event handler instructions with alert() functions to return the value of the objects we are looking for, to see if they are present.

Rambo Tribble

2:50 am on Apr 6, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

It's still sounding like an image or images aren't being preloaded. Watch your transmission activity monitor (the little computers in the system tray) and see if they light up when you click on the link with the submenu. If they do it indicates that an image hasn't been loaded.

I suspect it is the button/l1.gif in the menu1 span, since display:none will supress the loading of images. If you use the hidden div technique mentioned earlier to load button/l1.gif, the image will be available to display when menu1 is displayed.

Horse Feathers

3:18 am on Apr 8, 2004 (gmt 0)

10+ Year Member

Okay, this may clarify the problem.

I was viewing the page from IE 6.0. I just checked on Netscape 7.0, and it works fine. Why is this, and what do I need to include to make the script work in IE?

Rambo Tribble

5:29 am on Apr 8, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

IE is known to have some issues with things that have an initial display:none; setting. Try giving the element in question a text-indent:0; before the display:none; rule. Sounds odd, I know, but there is a good chance it will work.