Mozilla slowness on div show hide routine

[David]

Hi everyone,

Hoping there are some .js/browser experts out there that can help with this
weird problem.

I have made a swap div routine and applied the events to menu buttons with a
closer layer behind the menus. The closer div has a lower index than the
submenu divs so it appears behind them. The closer div contains a
transparent gif with an event applied to it to close all of the divs when
moused over.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 -
Firefox 0.8 ) it is slow. It gets even slower if the closer image is made
taller. I don't understand this.

Here is a link to see what is going on
http://mysite.verizon.net/res8xvny/menu/

The first page isn't so bad because the closer div/image is relatively short
in height, 160px, but the 2nd example is very slow and it is because the
closer div/image height has been increased to 400px. Other than the height
of the closer image the pages are identical.

This is all very strange to me. I know the problem is because of the height
because if I make the closer very very small it is very fast in the Mozilla
browsers.

Anyone have an idea what could be causing this? There are no animations on
the divs, just show hides. I have placed some comments in the code but it is
pretty simple to see what is going on in the function.

David

[CharlieDontSurf]

> ... The closer div contains a

transparent gif with an event applied to it to close all of the divs when
moused over.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 -
Firefox 0.8 ) it is slow. It gets even slower if the closer image is made
taller. I don't understand this.

Moz and Firefox always seem to bog doing repaints involving transparent
images (they slow a bit with markedly resized images as well). Dump the
..gif and throw a sized table in the DIV and it'll get snappy again. Or
get rid of the A tag too and attach the event to the DIV itself.

[David]

Thanks, that's a good suggestion and I have thought of that but this script
needs to support NN4 as well. I guess I could use a
captureEvents(Event.MOUSEOVER) for the div in NN4.

What I find strange is that there are other show-hide routines using this
method, even scripts that are way more bloated than this one and they do not
exhibit this lagging behavior. That's what leads me to believe there is
something in the script itself that is lending to this.

David

"CharlieDontSurf" <du*********@yahoo.com> wrote in message
news:MP************************@News.Individual.NE T...

... The closer div contains a
transparent gif with an event applied to it to close all of the divs when moused over.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 -
Firefox 0.8 ) it is slow. It gets even slower if the closer image is made taller. I don't understand this.

Moz and Firefox always seem to bog doing repaints involving transparent
images (they slow a bit with markedly resized images as well). Dump the
.gif and throw a sized table in the DIV and it'll get snappy again. Or
get rid of the A tag too and attach the event to the DIV itself.

[Grant Wagner]

David wrote:

Hi everyone,

Hoping there are some .js/browser experts out there that can help with this
weird problem.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 -
Firefox 0.8 ) it is slow. It gets even slower if the closer image is made
taller. I don't understand this.
Works fine in Firefox 0.9.3 and Mozilla 1.7.2. It might just be a bug in earlier
Gecko-based browsers you will be unable to avoid.
Here is a link to see what is going on
http://mysite.verizon.net/res8xvny/menu/

Anyone have an idea what could be causing this? There are no animations on
the divs, just show hides. I have placed some comments in the code but it is
pretty simple to see what is going on in the function.

This function:

function Menu(subToShow,num){
var z,y,activeDrop,closer,layers,h="hidden",v="visible ";
if((y=MM_findObj("drop0"))!=null){closer=(document .layers)?y:y.style;} //
closer div.
if((z=MM_findObj(subToShow))!=null){activeDrop=(do cument.layers)?z:z.style} //
the active drop div.
for(i=0;i<20;i++){
if((x=MM_findObj("drop"+[i]))!=null){subArray=(document.layers)?x:x.style;} //
all of the drop divs.
closer.visibility=v; // "show" the closer.
if(num>0){
subArray.visibility=h; // "hide" all the rest.
if(activeDrop){activeDrop.visibility=v} // "show" the drop.
}else{
closer.visibility=h; // "hide" the closer.
subArray.visibility=h; // "hide" all the rest.
}
}
}

is pretty badly written.

Every pass through the loop you are doing a '"show" the closer'. As well, every
pass through the loop you are doing a '"show" the drop'. These things only need
to happen once. The only reason you are looping is to '"hide" all the rest'.
This is probably the only thing you should be doing in the loop. The reason
you're setting the activeDrop on every pass is because you are turning
everything off unconditionally all the time, so at some point you end up turning
off the layer you want on. As well, you are checking for 20 layers regardless of
whether they actually exist or not. As well, you turn the closer on with each
pass through the loop, but if num is < 1 (whatever num is) then you turn it off
immediately. To correct at least some of these deficiencies I've modified the
original function:

function Menu(subToShow,num){
var z,y,h="hidden",v="visible";
if ((y = MM_findObj("drop0")) != null) {
var closer = (document.layers) ? y : y.style;
if (num > 0) {
closer.visibility = v;
} else {
closer.visibility = h;
}
}// closer div.
if ((z = MM_findObj(subToShow)) != null) {
var activeDrop = (document.layers) ? z : z.style;
if (activeDrop && num > 0) {
activeDrop.visibility = v;
}
} // the active drop div.
var i = 0;
while ((x = MM_findObj("drop" + i)) != null) {
if ("drop" + i != subToShow && num > 0) {
subArray = (document.layers) ? x : x.style;
subArray.visibility = h;
}
i++;
}
}

Untested and it doesn't improve things very much. But it does stop you from
setting the visibility of closer and activeDrop 20 times everytime you mouseover
something, which is probably the problem.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[CharlieDontSurf]

> What I find strange is that there are other show-hide routines using this

method, even scripts that are way more bloated than this one and they do not
exhibit this lagging behavior. That's what leads me to believe there is
something in the script itself that is lending to this.

If you think it's the script, try using this:

activeDrop=0;
function Menu(num){
var o=getEl(num);
if(o){
if(num){
if(activeDrop)activeDrop.visibility='hidden';
activeDrop=o;
o.visibility='visible';
getEl(0).visibility='visible';
return;
}
o.visibility='hidden';
activeDrop.visibility='hidden';
}
function getEl(n){
return (document.layers)?document.layers['drop'+n]:
(document.all)?document.all['drop'+n].style:(document.getElementById)?
document.getElementById('drop'+n).style:0;
}
}

I still suspect the gif, though. I upgraded from .8 to 9.3 just last
week and was struck by how much quicker it is at show/hide/moving layers
over images with transparency. It's still kinda bloopy compared to
IE/NN4/Opera, though.

[David]

Charlie and Grant,

Thanks to both of you for your help.

Grants example was the one to go with in this case. I did have to make one
change but it worked flawlessly and it did in fact solve the Mozilla issue.
You can see below the change I had to make. For some reason the function
wasn't recognizing the "num" arg but it does honor the "i". This was causing
the closer to hide when it should be visible when rolling over the buttons.

var i = 0;
while ((x = MM_findObj("drop" + i)) != null) {

//if ("drop" + i != subToShow && num > 0) {
if ("drop" + i != subToShow && i > 0) {

subArray = (document.layers) ? x : x.style;
subArray.visibility = h;
}//closer.visibility = h;
i++;
}
}

David


"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:41***************@agricoreunited.com...

David wrote:

Hi everyone,

Hoping there are some .js/browser experts out there that can help with this weird problem.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 -
Firefox 0.8 ) it is slow. It gets even slower if the closer image is made taller. I don't understand this.
Works fine in Firefox 0.9.3 and Mozilla 1.7.2. It might just be a bug in

earlier Gecko-based browsers you will be unable to avoid.

Here is a link to see what is going on
http://mysite.verizon.net/res8xvny/menu/

Anyone have an idea what could be causing this? There are no animations on the divs, just show hides. I have placed some comments in the code but it is pretty simple to see what is going on in the function.
This function:

function Menu(subToShow,num){
var z,y,activeDrop,closer,layers,h="hidden",v="visible ";
if((y=MM_findObj("drop0"))!=null){closer=(document .layers)?y:y.style;} //
closer div.

if((z=MM_findObj(subToShow))!=null){activeDrop=(do cument.layers)?z:z.style}
// the active drop div.
for(i=0;i<20;i++){
if((x=MM_findObj("drop"+[i]))!=null){subArray=(document.layers)?x:x.style;}
// all of the drop divs.
closer.visibility=v; // "show" the closer.
if(num>0){
subArray.visibility=h; // "hide" all the rest.
if(activeDrop){activeDrop.visibility=v} // "show" the drop.
}else{
closer.visibility=h; // "hide" the closer.
subArray.visibility=h; // "hide" all the rest.
}
}
}

is pretty badly written.

Every pass through the loop you are doing a '"show" the closer'. As well, every pass through the loop you are doing a '"show" the drop'. These things only need to happen once. The only reason you are looping is to '"hide" all the rest'. This is probably the only thing you should be doing in the loop. The reason you're setting the activeDrop on every pass is because you are turning
everything off unconditionally all the time, so at some point you end up turning off the layer you want on. As well, you are checking for 20 layers regardless of whether they actually exist or not. As well, you turn the closer on with each pass through the loop, but if num is < 1 (whatever num is) then you turn it off immediately. To correct at least some of these deficiencies I've modified the original function:

function Menu(subToShow,num){
var z,y,h="hidden",v="visible";
if ((y = MM_findObj("drop0")) != null) {
var closer = (document.layers) ? y : y.style;
if (num > 0) {
closer.visibility = v;
} else {
closer.visibility = h;
}
}// closer div.
if ((z = MM_findObj(subToShow)) != null) {
var activeDrop = (document.layers) ? z : z.style;
if (activeDrop && num > 0) {
activeDrop.visibility = v;
}
} // the active drop div.
var i = 0;
while ((x = MM_findObj("drop" + i)) != null) {
if ("drop" + i != subToShow && num > 0) {
subArray = (document.layers) ? x : x.style;
subArray.visibility = h;
}
i++;
}
}

Untested and it doesn't improve things very much. But it does stop you from setting the visibility of closer and activeDrop 20 times everytime you mouseover something, which is probably the problem.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[David]

This new method does work good but there is a problem. If one of the drops
are removed the i var breaks and the script fails. This was the reason for
the loop and its arbitrary number in the original method. Any of the drops
could be removed and the loop would skip over the missing value and continue
onto the rest and process them.

I'm trying to think of a way to make the new method work in this way without
using a loop but I don't think its possible.

David


"David" <ha**@hahaha.com> wrote in message
news:7AM1d.5738$lX.634@trnddc04...

Charlie and Grant,

Thanks to both of you for your help.

Grants example was the one to go with in this case. I did have to make one
change but it worked flawlessly and it did in fact solve the Mozilla issue. You can see below the change I had to make. For some reason the function
wasn't recognizing the "num" arg but it does honor the "i". This was causing the closer to hide when it should be visible when rolling over the buttons.
var i = 0;
while ((x = MM_findObj("drop" + i)) != null) {

//if ("drop" + i != subToShow && num > 0) {
if ("drop" + i != subToShow && i > 0) {

subArray = (document.layers) ? x : x.style;
subArray.visibility = h;
}//closer.visibility = h;
i++;
}
}

David


"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:41***************@agricoreunited.com...

David wrote:

Hi everyone,

Hoping there are some .js/browser experts out there that can help with this weird problem.

The problem.

This all works fine in IE6, Opera7, NN4 but in Mozilla browsers ( NN7 - Firefox 0.8 ) it is slow. It gets even slower if the closer image is made taller. I don't understand this.
Works fine in Firefox 0.9.3 and Mozilla 1.7.2. It might just be a bug in

earlier

Gecko-based browsers you will be unable to avoid.

Here is a link to see what is going on
http://mysite.verizon.net/res8xvny/menu/

Anyone have an idea what could be causing this? There are no

animations on the divs, just show hides. I have placed some comments in the code but it is pretty simple to see what is going on in the function.
This function:

function Menu(subToShow,num){
var z,y,activeDrop,closer,layers,h="hidden",v="visible ";
if((y=MM_findObj("drop0"))!=null){closer=(document .layers)?y:y.style;} // closer div.

if((z=MM_findObj(subToShow))!=null){activeDrop=(do cument.layers)?z:z.style} //

the active drop div.
for(i=0;i<20;i++){

if((x=MM_findObj("drop"+[i]))!=null){subArray=(document.layers)?x:x.style;} //

all of the drop divs.
closer.visibility=v; // "show" the closer.
if(num>0){
subArray.visibility=h; // "hide" all the rest.
if(activeDrop){activeDrop.visibility=v} // "show" the drop.
}else{
closer.visibility=h; // "hide" the closer.
subArray.visibility=h; // "hide" all the rest.
}
}
}

is pretty badly written.

Every pass through the loop you are doing a '"show" the closer'. As

well, every

pass through the loop you are doing a '"show" the drop'. These things

only need

to happen once. The only reason you are looping is to '"hide" all the rest'.

This is probably the only thing you should be doing in the loop. The

reason

you're setting the activeDrop on every pass is because you are turning
everything off unconditionally all the time, so at some point you end up

turning

off the layer you want on. As well, you are checking for 20 layers

regardless of

whether they actually exist or not. As well, you turn the closer on with

each

pass through the loop, but if num is < 1 (whatever num is) then you turn

it off

immediately. To correct at least some of these deficiencies I've

modified the

original function:

function Menu(subToShow,num){
var z,y,h="hidden",v="visible";
if ((y = MM_findObj("drop0")) != null) {
var closer = (document.layers) ? y : y.style;
if (num > 0) {
closer.visibility = v;
} else {
closer.visibility = h;
}
}// closer div.
if ((z = MM_findObj(subToShow)) != null) {
var activeDrop = (document.layers) ? z : z.style;
if (activeDrop && num > 0) {
activeDrop.visibility = v;
}
} // the active drop div.
var i = 0;
while ((x = MM_findObj("drop" + i)) != null) {
if ("drop" + i != subToShow && num > 0) {
subArray = (document.layers) ? x : x.style;
subArray.visibility = h;
}
i++;
}
}

Untested and it doesn't improve things very much. But it does stop you

from

setting the visibility of closer and activeDrop 20 times everytime you

mouseover

something, which is probably the problem.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[CharlieDontSurf]

> Grants example was the one to go with in this case. I did have to make one

change but it worked flawlessly and it did in fact solve the Mozilla issue.
Glad to hear your problem is fixed :)
If one of the drops are removed the i var breaks and the script fails. This
was the reason for the loop and its arbitrary number in the original method.
Any of the drops could be removed and the loop would skip over the missing
value and continue onto the rest and process them.

If you give the bit I posted a try, you'll find that it'll work with
arbitrary numbers, serialized or not, without a loop. Just as long as 1.
the menu layers are always IDed with the "drop"+num format, 2. the
closer layer is named "drop0", 3. activeDrop remains a reserved variable
and isn't used elsewhere, and 4. you pass only a number to the Menu
function, ie, Menu(12).

If you want to stick with using the Macromedia object finder, then this
will work:

activeDrop=0;
function Menu(num){
var o=MM_findObj('drop'+num);
if(o){
o=(document.layers)?o:o.style;
if(num){
if(activeDrop)activeDrop.visibility='hidden';
activeDrop=o;
o.visibility='visible';
(document.layers)?MM_findObj
('drop0').visibility='visible':MM_findObj
('drop0').style.visibility='visible';
return;
}
o.visibility='hidden';
activeDrop.visibility='hidden';
}
}

[David]

Charlie,

Well it isn't exactly fixed yet :-))

Your method does work with the exception of the closer div doesn't close
when moused over. This is probably a simple fix, but for some strange reason
the sluggishness is still there in Mozilla browsers. This bugs me... I know
Mozilla has had animation problems but I'm not up on the transparent gifs
causing things like this and with a .jpg the problem goes away.

Grants code does remove the sluggish problem but if a drop in the middle is
removed the hide stops working for the following drops. I believe this is
because the while loop exits because the loop is broken at the point of the
removed drop number.

David

"CharlieDontSurf" <du*********@yahoo.com> wrote in message
news:MP************************@News.Individual.NE T...

Grants example was the one to go with in this case. I did have to make one change but it worked flawlessly and it did in fact solve the Mozilla issue.

Glad to hear your problem is fixed :)

If one of the drops are removed the i var breaks and the script fails.

This was the reason for the loop and its arbitrary number in the original method. Any of the drops could be removed and the loop would skip over the missing value and continue onto the rest and process them.

If you give the bit I posted a try, you'll find that it'll work with
arbitrary numbers, serialized or not, without a loop. Just as long as 1.
the menu layers are always IDed with the "drop"+num format, 2. the
closer layer is named "drop0", 3. activeDrop remains a reserved variable
and isn't used elsewhere, and 4. you pass only a number to the Menu
function, ie, Menu(12).

If you want to stick with using the Macromedia object finder, then this
will work:

activeDrop=0;
function Menu(num){
var o=MM_findObj('drop'+num);
if(o){
o=(document.layers)?o:o.style;
if(num){
if(activeDrop)activeDrop.visibility='hidden';
activeDrop=o;
o.visibility='visible';
(document.layers)?MM_findObj
('drop0').visibility='visible':MM_findObj
('drop0').style.visibility='visible';
return;
}
o.visibility='hidden';
activeDrop.visibility='hidden';
}
}

[CharlieDontSurf]

In article <4kP1d.5975$MS1.735@trnddc02>, ha**@hahaha.com says...

Your method does work with the exception of the closer div doesn't close
when moused over. This is probably a simple fix...
Odd. I just planted it on a page and it's working in Firefox9.3,
Opera7.23, NN4, and IE5.01,5.5,6. Are you passing an ID in the closer
mouseout -- Menu('drop0') -- instead of just a number -- Menu(0)?
but for some strange reason
the sluggishness is still there in Mozilla browsers. This bugs me...
Me too. It's a stumper. I don't know why Grant's routine fixes it.
Grants code does remove the sluggish problem but if a drop in the middle is
removed the hide stops working for the following drops. I believe this is
because the while loop exits because the loop is broken at the point of the
removed drop number.

This should fix that, IF you don't pass the num argument as a string --
use Menu('drop2',2) and not Menu('drop2','2'):

function Menu(subToShow,num){
var z,y,h="hidden",v="visible";
if ((y = MM_findObj("drop0")) != null) {
var closer = (document.layers) ? y : y.style;
if (num > 0) {
closer.visibility = v;
}
else {
closer.visibility = h;
}
}// closer div.
if ((z = MM_findObj(subToShow)) != null) {
var activeDrop = (document.layers) ? z : z.style;
if (activeDrop && num > 0) {
activeDrop.visibility = v;
}
} // the active drop div.
var i = 20;
while(i-->1){
if((x=MM_findObj('drop'+i))!=null&&i!=num){
x=(document.layers)?x:x.style;
x.visibility=h;
}
}
}

[David]

doh' .. my bad. I was using the string method for the argument. You are
right that your code does work. Your tweak to Grants code works as well. You
guys amaze me sometimes :-)))

many thanks ....

David

"CharlieDontSurf" <du*********@yahoo.com> wrote in message
news:MP************************@News.Individual.NE T...

In article <4kP1d.5975$MS1.735@trnddc02>, ha**@hahaha.com says...

Your method does work with the exception of the closer div doesn't close
when moused over. This is probably a simple fix...

Odd. I just planted it on a page and it's working in Firefox9.3,
Opera7.23, NN4, and IE5.01,5.5,6. Are you passing an ID in the closer
mouseout -- Menu('drop0') -- instead of just a number -- Menu(0)?

but for some strange reason
the sluggishness is still there in Mozilla browsers. This bugs me...

Me too. It's a stumper. I don't know why Grant's routine fixes it.

Grants code does remove the sluggish problem but if a drop in the middle is removed the hide stops working for the following drops. I believe this is because the while loop exits because the loop is broken at the point of the removed drop number.

This should fix that, IF you don't pass the num argument as a string --
use Menu('drop2',2) and not Menu('drop2','2'):

function Menu(subToShow,num){
var z,y,h="hidden",v="visible";
if ((y = MM_findObj("drop0")) != null) {
var closer = (document.layers) ? y : y.style;
if (num > 0) {
closer.visibility = v;
}
else {
closer.visibility = h;
}
}// closer div.
if ((z = MM_findObj(subToShow)) != null) {
var activeDrop = (document.layers) ? z : z.style;
if (activeDrop && num > 0) {
activeDrop.visibility = v;
}
} // the active drop div.
var i = 20;
while(i-->1){
if((x=MM_findObj('drop'+i))!=null&&i!=num){
x=(document.layers)?x:x.style;
x.visibility=h;
}
}
}