Switch Menu Script - Slow???

[gingerDELUCA]

http://www.dynamicdrive.com/dynamici...switchmenu.htm

Hi,

I've just added a Switch Menu with persistence "sitewide" to my site http://www.cafepress.com/schnickschnack and it's working but it takes a very long time to load the persistence feature when tested on mac os x.

Is there a way to speed it up? OR Did I do something wrong?
Also is there a way to make the menu fold up completely when people go to the shop home?

Thanks for your help!!!

*gin

[jscheuer1]

The immediate thing that strikes me as a drag on your page load time is the many levels of nested tables. I forget the exact details but, nested tables slow down a page load, as do large tables that contain virtually all the content of a page. It appears you have a bit of both. More or less what happens is that the browser parses out the table(s) layout and content before it starts filling in the content visually. Using no tables or several small tables not contained within other tables lends for a much faster page load. There could be other things slowing it down but, the table issue is a big one. Just having one large graphic nested somewhere within a table that contains otherwise fast loading content can really slow the load even further. Enough on that for now. Your other question should be easy to resolve. On the page where you want the menu closed set:

persistmenu="no"

you may need to use a separate script for that one page but, including the directive here:

<script type="text/javascript" src="http://www.schnickschnack.biz/e/menu.js" language="JavaScript1.2"> 
/***********************************************
* 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
***********************************************/
persistmenu="no"
</script>

will probably get it.

[gingerDELUCA]

Also thanks for pointing out the table issue. I am currently doing a lot of research into how to make websites universally accessible to users of all abilities. That's when the whole table issue pop up also. I was unaware of tables causing such a slowdown but it makes sense.

I am a little overwhelmed however as how to replace all those tables. What are the alternatives?

Also I should explain that my store uses a template and the menu is only inserted into the template and not every single page. The template also has some preset tables that I cannot get rid off. But there are a bunch of avoidable tables that I used in the sections I have access to because I didn't know better.

*gin

PS: Happy Birthday!!!

[gingerDELUCA]

I got rid off 2 tables! There was one table that held together the two images that make up the blue "bar" at the top and another that held 5 images that form the blue "bar" at the bottom.

Does it still look OK? Is it okay to get rid of tables that hold image maps together when all the images are in the same row?

So instead of:

<td colspan="4"><table width="750" border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.cafepress.com/schnickschnack/535492" title="This Month's Special: Magnetic ABC"><img src="http://schnickschnack.biz/temp/h.png" width="236" height="94" border="0" alt="Magnetic ABC"></a></td><td><a href="http://www.cafepress.com/schnickschnack"><img src="http://schnickschnack.biz/temp/hh.png" width="514" height="94" border="0" alt="Ginger Deluca Purveyor of Fine Schnick Schnack - www.SchnickSchnack.biz - Cool Apparel, Fun Merchandise & Unique Gifts designed by Ginger Deluca"></a></td></tr></table></td>

it becomes:

<td colspan="4"><a href="http://www.cafepress.com/schnickschnack/535492" title="This Month's Special: Magnetic ABC"><img src="http://schnickschnack.biz/temp/h.png" width="236" height="94" border="0" alt="Magnetic ABC"></a><a href="http://www.cafepress.com/schnickschnack"><img src="http://schnickschnack.biz/temp/hh.png" width="514" height="94" border="0" alt="Ginger Deluca Purveyor of Fine Schnick Schnack - www.SchnickSchnack.biz - Cool Apparel, Fun Merchandise & Unique Gifts designed by Ginger Deluca"></a></td>

*gin

[jscheuer1]

PS: Happy Birthday!!!

Thanks!

Well, if it still is the same link, it looks fine and definitely loads faster. Could just be a low traffic period, the load time, as that one change should not make such a big difference but, who knows? Sometimes it can.

[gingerDELUCA]

I'm taking some more tables out. Please let me know if it ever gets buggy on your system. I can't see! Thanks.

I've tried putting the persistmenu="no" on the front page in the description. It doesn't work because it still uses the script that is defined in the overall template where it says "yes".

Is there a way to trick the template or script into making an exception for the frontpage?

*gin

[jscheuer1]

We should be able to create, literally, an override variable. At the beginning of the external script insert:

var override=""

then in the onloadfunction:

function onloadfunction(){
if (persistmenu=="yes" && override!=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

Then on whatever page you wish to frustrate this behavior, add to the body tag so it has this in it:

<body onload="override='yes'">

You could just use persistmenu='no' here and skip the in script modifications but, if you do that, the persistence from this page won't be saved for the other pages to follow.

The SchnickSchnack page still looks fine.

[gingerDELUCA]

Thanks!

Problem is that the body tag is also part of the template and I cannot change it only on the start page.

Sorry, I should have mentioned that earlier! The only thing I can change on the front page is anything in between the description comments.

*gin

[jscheuer1]

Well, this is not, I repeat not, to any specification in anyone's book but, you could add a duplicate of the body tag with this command added here:

	-->
	</style>
<body bgcolor="#ffffff"  class="body" onload="override='yes'">	
<!-- End Head -->
	

	
</head>



<body bgcolor="#ffffff"  class="body">

I think you can recognize the spot in your code I am referring to. As there is only one body tag allowed per page most, if not all, browsers will accept only the first one. Works here in IE6 and FF 1.0.4 - I even tested it with the bgcolor. The first body tag overrides the content of the second, both for the onload event and background color. If need be to fool other browsers, you could insert a duplicate </head> tag before the added first body tag, FF and IE like it either way.

[gingerDELUCA]

Again many thanks!

I've tried to put it between the desription comment

<!-- D -->

but it didn't really do the trick.

I can't put it in the head comment that's also template! Sorry -- it's a real pain with this template but there is no way for me to dump it.

*gin