js menu/submenu–need default image on page load

@ottoworksJun 08.2005

The following is a distilled version of code I’m using for a menu. It works fine, but I’d like to have a default text and image appear in the submenu column when the page loads. This image-text combo should disappear with the first mouseover, and it doesn’t need to reappear again until the page is reloaded. Is there a simple solution?

Thanks in advance to anyone who can help.

Cheers, Paul Otteson

Here’s the link: [url]http://www.esf.edu/aec/defaultcss2.htm[/url]
—————–

<html>

to post a comment

JavaScript

8 Comments(s) _↴

@phpnoviceJun 08.2005 — #I'd like to have a default text and image appear in the submenu column when the page loads.[/QUOTE]
Meaning what ... precisely?

@ottoworksauthorJun 08.2005 — #Thanks. First, Please note that I'm a javascript cut-and-paste hack who can't write a script from scratch.

When this page opens -- http://www.esf.edu/aec/defaultcss.htm -- the right (submenu) column is empty. Mouseover the left column and submenus appear.

I would like to have content appear in the right column when the page opens, as it does on this page -- http://www.esf.edu/adm/, then disappear when the user mouses over the left column menu (I can't use the script on http://www.esf.edu/adm/ because the mouseovers don't work on Mozilla. A Mozilla fix for this script would also be a solution I could use).

I do not need the original content to reappear at any point. All it need is for it to be there on page load, and disappear with the first menu mouseover.

Thanks

@phpnoviceJun 08.2005 — #As an example, you could do the following to have the first submenu showing by default:

<i>
 </i>&lt;script&gt;
 [COLOR=Red]var menunotset = true;[/COLOR]
 window.onload = function() {
 var cc = document.getElementById("submenu").childNodes;
 for(var i = 0; i &lt; cc.length; i++) {
 if(cc[i].nodeName &amp;&amp; cc[i].nodeName.toLowerCase() == "li") {
 [COLOR=Red]      if (menunotset) {
 cc[i].className = "hover";
 menunotset = false;
 }[/COLOR]
 cc[i].onmouseover = function() { 
 if(window.cmenu &amp;&amp; window.cmenu != this) window.cmenu.className = "";
 (window.cmenu = this).className = "hover" 
 }
 }
 }
 }
 &lt;/script&gt;

@ottoworksauthorJun 09.2005 — #Thanks phpnovice--

It works great, except for one problem. If the user doesn't drag his cursor across the top of the left menu before mousing over other left menu items, the first submenu doesn't disappear and all the other submenus overlap the first. Check it out:

http://www.esf.edu/aec/defaultcss.htm

It's the same on IE and Firefox, Mac and Win, and Safari.

here's the whole script as it stands:

 <script>
   var menunotset = true;

 <ul id="submenu" style="position:relative">
   <li style="padding: 1px">
   <ul>
   <li>Greetings and welcome to the AEC
   </ul>
   </li>
   <li><a href="/aec/about"><b>About AEC</b></a>
   <ul>
   <li><a href="/aec/about/default.htm">Overview</a>
   <li><a href="/aec/facilities/hwf.htm">Huntington Wildlife Forest</a>
   <li><a href="/aec/staff/default.htm">Personnel</a>
   </ul>
   </li>

I experimented with the first <li>, trying adding text, leaving it empty, having padding=0, etc. Nothing helped. I stuck with padding=1px to give it some dimension, because if I go with 0 and it has no dimension, then this overlap problem happens no matter where the cursor enters the menu.

Can you (or anyone) take me the last step? Thanks.

Cheers,

Paul

@phpnoviceJun 09.2005 — #That is because you created a fake menu entry that is not formatted in such a way as to allow the JavaScript and CSS code to handle it in the same manner as the other menus.

@phpnoviceJun 09.2005 — #Actually, I take that back... Now that I look at it again, I see that the code is saving the currently showing menu. So, change the code I gave you to the following instead:

<i>
 </i>if (menunotset) {
 (window.cmenu = cc[i]).className = "hover";
 menunotset = false;
 }

@ottoworksauthorJun 09.2005 — #Eureka! Perfect!

Thank you for your help phpnovice. You made my day.

cheers,

Paul Otteson

@phpnoviceJun 09.2005 — #Cheers.

Also in #JavaScript _↴

Don't load script again - cookie?Javascript Array listbox giving selected number -1 (select 2, get 1)

Success!

Help @ottoworks spread the word by sharing this article on Twitter...

Tweet This

js menu/submenu–need default image on page load

Here’s the link: [url]http://www.esf.edu/aec/defaultcss2.htm[/url]
—————–

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

js menu/submenu–need default image on page load

Here’s the link: [url]http://www.esf.edu/aec/defaultcss2.htm[/url] —————–

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

Here’s the link: [url]http://www.esf.edu/aec/defaultcss2.htm[/url]
—————–

8 Comments(s) _↴

Also in #JavaScript _↴