Javascript toggles div visibility, img elements dissappear

Hi Folks,

I am having a strange Javascript issue. I have a div that I show and
hide by clicking on an image link, and all images within the div do not
show up in IE. FireFox does not give me this problem. Also, under IE,
when I expand the div and adjust the font size with <control + mouse
wheel> the images show up.

When I do not set the div's style.position at all in the javascript,
this problem does not occur. I am making a tree, however, so that is
not an option since the elements end up on top of each other.

The code...

<html>
<head>
<title>Expand Tree</title>
<script LANGUAGE="JavaScript">
function splodeDiv(divRef, imgRef){
var theDiv = document.getElementById(divRef);
var theImg = document.getElementById(imgRef);
var divState = theDiv.style.visibility == "hidden";
theDiv.style.visibility = divState ? "visible" : "hidden";
theDiv.style.position = divState ? "relative" : "absolute";
theImg.src = divState ? "minus.gif" : "plus.gif";
}

function load(){
var allImgs = document.getElementsByTagName('img');
for(var i = 0; i < allImgs.length; i++){
if(allImgs[i].id.search('expandRetract' != -1)){
allImgs[i].src = "minus.gif";
}
}
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++){
if(allDivs[i].id.search('folderGroup' != -1)){
allDivs[i].style.visibility = "visible";
allDivs[i].style.position = "relative";
}
}

}

</script>
</head>
<body onload="javascript:load();">

<a href="javascript:splodeDiv('folder Group1', 'expandRetract1');"><img
id="expandRetract1" src="minus.gif" border="0"></a>
<div id="folder Group1">
Howdy!
<img src="minus.gif">
<img src="minus.gif">
<img src="minus.gif">
</div>

</body>
</html>

Any help on this would be a life saver. I am past a deadline for a
demo!

Dan Wilson

dwilson wrote:[color=blue]
> I am having a strange Javascript issue. I have a div that
> I show and hide by clicking on an image link, and all
> images within the div do not show up in IE. FireFox does
> not give me this problem. Also, under[/color]
<snip>

So, in IE only, the user clicking on something causes the browser to
stop working in the way it previously had. Those are the symptoms of the
use of a javascript pseudo-protocol HREF.
[color=blue]
> <a href="javascript:splodeDiv('folder Group1',
> 'expandRetract1');"> ...[/color]
<snip>

And there it is. IE treats the activation of a javascript
pseudo-protocol HREF as navigation, and when used the browser goes into
a 'waiting state' pending the arrival of a replacement for the content.
In this state many previously available browser facilities are
withdrawn, including GIF animation and image swapping.

The normal strategy for dealing with this issue is to never use a
javascript pseudo-protocol HREF that will not result in the replacement
of the contents of the current page (so never to execute a function for
its side effect).

Usually the same effect as a javascript pseudo-protocol HREF can be
achieved (without the detrimental consequences in IE) with a suitably
default action cancelling intrinsic event handler. An onclick handlers
are the usual replacement. So, something like:-

<a href="someURL"
onclick="splodeDiv('folder Group1','expandRetract1');return false;"[color=blue]
> ... </a>[/color]

Where - someURL - is the url of a resource that should never be visited
while javascript is available/enabled because the click event is
cancelled by its handler returning false, and so may act as an
alternative to the scripted action, or apologise to the user for the
needless creation of a javascript dependent web site.

Richard.

So I have tried your suggestion, and even went so far as to remove the
anchor tag and use the onclick event directly on the img itself. I am
getting the same behavior, and not only with images but with a table as
well. I guess my question is how can I call this javascript without the
browser being in a state that will not reflect/redraw these elements?
The code...

<html>
<head>
<title>Expand Tree</title>
<script LANGUAGE="JavaScript">
function splodeDiv(divRef, imgRef){
var theDiv = document.getElementById(divRef);
var theImg = document.getElementById(imgRef);
var divState = theDiv.style.visibility == "hidden";
theDiv.style.visibility = divState ? "visible" : "hidden";
theDiv.style.position = divState ? "relative" : "absolute";
theImg.src = divState ? "minus.gif" : "plus.gif";
}

function load(){
var allImgs = document.getElementsByTagName('img');
for(var i = 0; i < allImgs.length; i++){
if(allImgs[i].id.search('expandRetract' != -1)){
allImgs[i].src = "minus.gif";
}
}
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++){
if(allDivs[i].id.search('folderGroup' != -1)){
allDivs[i].style.visibility = "visible";
allDivs[i].style.position = "relative";
}
}

}

</script>
</head>
<body onload="javascript:load();">

<img id="expandRetract1" src="minus.gif" onclick="splodeDiv('folder
Group1', 'expandRetract1');return false;">
<div id="folder Group1">
Howdy!
<img src="minus.gif">
<table border="1">
<tr>
<td>
in the table
</td>
</tr>
</table>
</div>

</body>
</html>

Thanks.

Dan Wilson

dwilson wrote:
<snip>[color=blue]
> function load(){
> var allImgs = document.getElementsByTagName('img');
> for(var i = 0; i < allImgs.length; i++){
> if(allImgs[i].id.search('expandRetract' != -1)){[/color]

This expression is wrong. The argument being passed to the search method
is - 'expandRetract' != -1 -, and its result is boolean. That boolean
result will be type-converted into a string and then that string into a
regular expression, either /true/ or /false/ (most likely /false/).
Those regular expressions look like they will not match the IDs and so
the search expression will return -1, and -1 is true. So the block of
the if statement will be executed on every image on the page, making all
of their SRCs "minus.gif".

The line should probably be:-

if(allImgs[i].id.search('expandRetract') != -1){
[color=blue]
> allImgs[i].src = "minus.gif";
> }
> }
> var allDivs = document.getElementsByTagName('div');
> for(var i = 0; i < allDivs.length; i++){
> if(allDivs[i].id.search('folderGroup' != -1)){[/color]

Much the same goes for this - if - expression, and every DIV on the page
will be rendered invisible.

<snip>[color=blue]
> <div id="folder Group1">[/color]
<snip>

IDs are not allowed to contain spaces.

The extent to which the above errors will influence the outcome should
not differ significantly between IE and Firefox (or any other browser
for that matter) so they do not explain the symptoms described.

Richard.

Javascript toggles div visibility, img elements dissappear

re: Javascript toggles div visibility, img elements dissappear

re: Javascript toggles div visibility, img elements dissappear

re: Javascript toggles div visibility, img elements dissappear

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about