Menu expanded while loading

@marcusioOct 20.2008

I have a menu on the left of ~~[URL=”http://www.marcuslewisdaycamp.com”]~~my website[/URL] that should start off being collapsed, however as the page loads, the menu is fully expanded. It doesn’t shrink until the page has fully loaded. If you miss it when you first go to the site, just hit refresh and you’ll see exactly what I mean.

I posted this in the Java forum, however someone thought it was an issue with CSS and suggested that I ask in here.

My CSS code looks like this:

~~[QUOTE]~~

.treemenu {
margin : 0px 0px;
padding : 0px;
list-style : none;
background-color : #ffffc0;
border : 0px solid #000;
width : 110px;
}

.treemenu UL {
list-style : none;
margin : 0px 0px;
padding : 0px 0px;
}

.treemenu LI {
display : none;
}

.treemenu A {
display : block;
padding-left : 12px;
text-decoration : none;

}

.treemenu .treeopen {
background-image : url(‘http://www.marcuslewisdaycamp.com/harvard/images/open.gif‘);
background-repeat : no-repeat;
background-position : left;
}

.treemenu .treeclosed {
background-image : url(‘http://www.marcuslewisdaycamp.com/harvard/images/closed.gif‘);
background-repeat : no-repeat;
background-position : left;
}

[/QUOTE]

The suggestion in the other forum was to change the display properties to “none” which I did (it orginally was set at “inline”) but there was no affect.

Any thoughts?

Thanks,

to post a comment

CSS

33 Comments(s) _↴

@FangOct 21.2008 — #Use a DOM loaded onload: http://dean.edwards.name/weblog/2005/09/busted/

Having the initial display set to 'none' will make the menu inaccessible to browsers with JavaScript disabled.

@marcusioauthorOct 21.2008 — #Thanks for the response, Fang, and please bear with me as I'm relatively new at trying to put this together.

I've been working for a few hours at trying to copy/manipulate the source code from his example page, but could not seem to get it to work properly. Can you tell me the steps that you would take to get my expanding menu integrated into his code?

I know enough to know how to work with existing code, but I'm not savvy enough to know all of the mechanics. ?

Again, thanks for the help!

M ?

@FangOct 21.2008 — #

 /* for Mozilla */
 if (document.addEventListener) {
 document.addEventListener("DOMContentLoaded",  initMenus, false);
 }
 
 /* for Internet Explorer */
 /*@cc_on @*/
 /*@if (@_win32)
 document.write("&lt;script defer src=ie_onload.js&gt;&lt;"+"/script&gt;");
 /*@end @*/
 
 /* for other browsers */
 window.onload =  initMenus;

ie_onload.js contains the line: [I]initMenus();[/I]

@marcusioauthorOct 21.2008 — #Hi Fang,

In order to get the page to display correctly without an error message, I made the code like this:

</head>

<script type="text/javascript">

function init() {

};

/* for Mozilla */

if (document.addEventListener) {

document.addEventListener("DOMContentLoaded", init, false);

}

/* for Internet Explorer */

/*@cc_on @*/

/*@if (@_win32)

document.write("<script defer src=http://www.marcuslewisdaycamp.com/ie_onload.js><"+"/script>");

/*@end @*/

/* for other browsers */

window.onload = init;

</script>

<script src="http://www.marcuslewisdaycamp.com/menuexpand.js" type="text/javascript"></script>

<body>[/QUOTE]

I created the ie_onload.js file so that it only contains [I]initMenus(); [/I] and I also had to place my other menu script beneath this code. I experimented with it on to this page, but still no luck. Am I missing something? ?

Thanks again for the help!!

M

@FangOct 22.2008 — #

&lt;script src="http://www.marcuslewisdaycamp.com/menuexpand.js" type="text/javascript"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 function init() {
 // quit if this function has already been called
 if (arguments.callee.done) return;
 
 <i>    </i>   // flag this function so we don't do the same thing twice
 <i>    </i>   arguments.callee.done = true;
 
 <i>    </i>   initMenus();
 };
 
 /* for Mozilla */
 if (document.addEventListener) {
 document.addEventListener("DOMContentLoaded", init, false);
 }
 
 /* for Internet Explorer */
 /*@cc_on @*/
 /*@if (@_win32)
 document.write("&lt;script defer src=ie_onload.js&gt;&lt;"+"/script&gt;");
 /*@end @*/
 
 /* for other browsers */
 window.onload = init;
 &lt;/script&gt;

ie_onload.js contains initMenus();

@marcusioauthorOct 22.2008 — #Hi Fang,

I copy/pasted the code exactly as you have it, however no change. ? You can take a look at the source code from the page I'm working with in case there may be something else going on if you think that would help.

Do you see anything else that may be causing the issue? Would there be another solution to the problem?

M

@FangOct 22.2008 — #Remove the [I]window.onload = initMenus;[/I] from script menuexpand.js

@marcusioauthorOct 22.2008 — #Still no luck ? but thanks so much for not giving up :o

@FangOct 22.2008 — #Works perfectly, see the enclosed html and js

I've added the slow loading image from Dean Edwards's site in the html to show that the menu closes long before the image loads.

[upl-file uuid=198e32ef-a5c8-4fcb-bc6e-0b1d4a795878 size=4kB]menuexpand.zip[/upl-file]

@marcusioauthorOct 22.2008 — #Wow...just when I was beginning to think that all was lost! ?

The only problem now is that it seems to have done a job on the formatting. My "+" and "-" graphics are now turned to bullets, the expanding menus are indented and there is a space between each link. I have been searching through the code trying to figure out why that is happening or how to be able to manipulate it, but there's no impact.

I have uploaded the files to my website and renamed the js file so that it can be worked on without affecting the other pages. Here it is right now: webpage.

I viewed it through a few browsers, so the current problem is more than just the rendering of the browser itself. What do you think?

M

@gabrieleOct 22.2008 — #I believe in your original css if you add the line

<i>
 </i>.treenode ul{
 display:none;
 }

it would solve your issues ..

no ?

@marcusioauthorOct 22.2008 — #Actually, I realized that the CSS was not being reference properly from the htm document, but once I fixed that, then YESSS!!! It worked!! ???

Thanks for responding, Gabriele, and a [B][U]HUGE [/U][/B]thanks to you, Fang. You gotta love when people do random acts of kindness just help out their fellow human being.

I hope you win the lottery this week ?

@FangOct 22.2008 — #I believe in your original css if you add the line

<i>
 </i>.treenode ul{
 display:none;
 }

it would solve your issues ..

no ?[/QUOTE]
No, that makes it inaccessible for browsers with JavaScript disabled.

@gabrieleOct 22.2008 — #No, that makes it inaccessible for browsers with JavaScript disabled.[/QUOTE]

Indeed..

a question:

the defer attribute on IE has the same effect as the DOMContentLoaded has on firefox ?

i mean it executes before the image loading ?

regards

@FangOct 22.2008 — #defer and DOMContentLoaded are basically waiting for the html to load. The images are loading while the scripts are executed.

@marcusioauthorOct 26.2008 — #Hi Fang...

Just when I thought I was all set...!

I realized that if the pages are going to look professional, then the menu should remain expanded when on a particular page. If you take a look at the site again and click on one of the expandable menus, you'll see that I have adjusted it. The funny thing is that the expanded menu is loading late the way the whole menu did in the beginning. Again, you'll see what I mean when you click on it.

This is not a huge deal and I can certainly live with it, but I didn't know if there was a quick fix.

Any thoughts?

M

@FangOct 26.2008 — #Where are you opening the page sub-menu?

@marcusioauthorOct 26.2008 — #It is being opened via a change in the HTML code of the page by changing "treenode" to "treenodeopen." Here is an example of where it was changed:

<font size="3" face="Arial Narrow"> <li class="treenodeopen">

<a class="treeclosed" href=""><strong>About Us</strong></a>

<ul style="display: none;">

<li><a href="http://www.marcuslewisdaycamp.com/harvard/about.html"><font color="#ff00ff">About the MLDC</font></a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/awards.html">Awards</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/faq.html">FAQ</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/guarantee.html">Our Guarantee</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/policies.html">Policies</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/safety.html">Safety</a></li>

</ul>[/QUOTE]

Is there some place else where I should have made a change?

M

@FangOct 26.2008 — #The site menu does not work.

@marcusioauthorOct 26.2008 — #Is there a way to make it so that the menu does not appear until it's fully loaded? It acts like the reverse of my initial problem where originally the viewer would see the menu start in an expanded form before it collapsed and now they see the menu start off in a collapsed form before it expands.

@FangOct 26.2008 — #The menu is initially collapsed (not accessible), you only have to open the page's sub-menu once the dom is loaded.

@marcusioauthorOct 26.2008 — #Hi Fang,

That's odd...your message that says that the menu doesn't work is time-stamped before my last message, but I only just got the notice about your post. Weird...

When you say that the "site menu does not work," do you mean that when you click on it it's not doing anything? I have been making some adjustments on it today, so maybe you happened to click on something while I was uploading some updated pages or something. Could you elaborate?

Thanks!

M

@marcusioauthorOct 26.2008 — #Just saw your most recent post at 11:21...

I might be getting things a little confused so I'll try to clarify. Is there a way to make it so that there isn't that little pause just before the "About Us" menu on this page expands?

Thanks,

M

@FangOct 26.2008 — #Open the sub-menu before adding the links.

@marcusioauthorOct 27.2008 — #Hmmm...I'm not quite sure what you mean, however I realized that if I change this: <ul style="display: none;"> to <ul style="display: block;">, it seems to solve the problem. Since I don't know exactly how this affects everything, I could use your opinion. Is this correct? Again, this is the context of how it originally looked:

<ul class="treemenu">

<font size="3" face="Arial Narrow"> <li class="treenodeopen">

<a class="treeclosed" href=""><strong>About Us</strong></a>

<ul style="display: none;">

<li><a href="http://www.marcuslewisdaycamp.com/harvard/about.html"><font color="#ff00ff">About the MLDC</font></a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/awards.html">Awards</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/faq.html">FAQ</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/guarantee.html">Our Guarantee</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/policies.html">Policies</a></li>

<li><a href="http://www.marcuslewisdaycamp.com/harvard/safety.html">Safety</a></li>

</ul>

</li>

</font></ul>[/QUOTE]

Thanks,

M

@FangOct 27.2008 — #http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

@marcusioauthorOct 28.2008 — #Thanks (again) Fang. I'll see if I can figure it out. I'm just glad that it all works! ?

@FangOct 28.2008 — #Unfortunately the menu has accessibility problems due to adding [I]display:none[/I]

The point of using the onload was to avoid that.

@marcusioauthorOct 28.2008 — #The only recent change that I made was to change <ul style="display: none;"> to <ul style="display: block;"> when I wanted the a portion of the menu to start off expanded. For the first time it seems as though everything is working exactly right.

When you say there that there are "accessibility problems," are you referring to a potential issue if someone has their scripting turned off in the browser? Should I replace each instance of "display: none" with something else? If so, what? ?

M

@FangOct 28.2008 — #The correct way is to display the menu completely open. Then, onload, use JavaScript to close all sub-menus that are not required to be open.

@marcusioauthorOct 28.2008 — #Hmmm....so what changes do I need to make in order to get this right? It sounds like the script is correct and the CSS sheet is correct, but that the language in the treemenu needs to be altered. Is that right?

M

@FangOct 29.2008 — #The menu should be usable without JavaScript.

JavaScript is used to close the sub-menus and add the open/close images next to the sub-menu titles.

If you want to make an accessible menu you would have to start from scratch.

An example:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Menu&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 function closeSubMenu() {
 var aUL=document.getElementById('sidemenu').getElementsByTagName('ul');
 for(var i=0; i&lt;aUL.length; i++) {
 aUL[i].className='collapsed';
 }
 }
 
 function toggleSubMenu(obj) {
 var sibling;
 if(obj.nextSibling.nodeType==3) {
 sibling=obj.nextSibling.nextSibling; // Moz. Opera
 }
 else {
 sibling=obj.nextSibling; // IE
 }
 sibling.className=(sibling.className=='expanded')? 'collapsed' : 'expanded';
 }
 
 window.onload=function() {
 closeSubMenu();
 var aP=document.getElementById('sidemenu').getElementsByTagName('p');
 for(var i=0; i&lt;aP.length; i++) {
 aP[i].onclick=function() {closeSubMenu();toggleSubMenu(this)};
 aP[i].style.cursor='pointer';
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 * {
 margin:0;
 padding:0;
 }
 body {
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size:0.8em;
 color:#000;
 } 
 .expanded {
 display:block;
 }
 .collapsed {
 display:none;
 }
 #sidemenu {
 width:10em;
 overflow:hidden;
 }
 #sidemenu li {
 list-style:none;
 }
 #sidemenu a {
 display:block;
 width:10em;
 border-bottom:1px solid #777;
 padding-left:1em;
 background:#fa0;
 color:#555;
 text-decoration:none;
 vertical-align:bottom; /* fixes the IE5 box gap */
 }
 #sidemenu a:hover {
 background:#ccc;
 color:#07f;
 }
 
 li p {
 float:none !important; float:left;  /* fixes the IE5 nested list gap */
 width:10em;
 border-bottom:1px solid #777;
 background:#f3f3f3;
 color:#f70;
 font-weight:bold;
 text-align:center;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ul id="sidemenu"&gt;
 &lt;li&gt;&lt;p&gt;main 1&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="sub11"&gt;sub1 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub12"&gt;sub1 2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub13"&gt;sub1 3&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;p&gt;main 2&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="sub21"&gt;sub2 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub22"&gt;sub2 2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub23"&gt;sub2 3&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;p&gt;main 3&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="sub31"&gt;sub3 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub32"&gt;sub3 2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="sub33"&gt;sub3 3&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@marcusioauthorOct 29.2008 — #I redid a page and tested it out, but it ended up leaving me at square one where the menu would initially look expanded and then after a second it would collapse. I think I will probably leave it as is at this point and just hope that most people have their browser's scripting turned on.

If their scripting is turned off, then I assume the menu will still show except it will always be expanded. Is that correct? When I get home later I'll test it out by turning it off in my own browser to see what happens.

Thanks!

M

Also in #CSS _↴

expanding <div> tag browser repainting mouseover in css

Success!

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

Tweet This

Menu expanded while loading

33 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Menu expanded while loading

33 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

33 Comments(s) _↴

Also in #CSS _↴