Javascript toggles div visibility, img elements dissappear

D

dwilson

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.id.search('expandRetract' != -1)){
allImgs.src = "minus.gif";
}
}
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++){
if(allDivs.id.search('folderGroup' != -1)){
allDivs.style.visibility = "visible";
allDivs.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
 
R

Richard Cornford

dwilson said:
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
Click to expand...
<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.
<a href="javascript:splodeDiv('folder Group1',
'expandRetract1');"> ...
Click to expand...
<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;"
... </a>
Click to expand...

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.
 
D

dwilson

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.id.search('expandRetract' != -1)){
allImgs.src = "minus.gif";
}
}
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++){
if(allDivs.id.search('folderGroup' != -1)){
allDivs.style.visibility = "visible";
allDivs.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
 
R

Richard Cornford

dwilson wrote:
function load(){
var allImgs = document.getElementsByTagName('img');
for(var i = 0; i < allImgs.length; i++){
if(allImgs.id.search('expandRetract' != -1)){
Click to expand...


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.id.search('expandRetract') != -1){
allImgs.src = "minus.gif";
}
}
var allDivs = document.getElementsByTagName('div');
for(var i = 0; i < allDivs.length; i++){
if(allDivs.id.search('folderGroup' != -1)){
Click to expand...


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

<div id="folder Group1">
Click to expand...
<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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript not hiding nested elements simultaneously 2
Help with code 0
Please Help? 0
problem assigning function to <div>.onclick 4
Flip-Cards with Local Images 1
Image not changing between "mute" & "un-mute" images. 5
Center <IMG> in <DIV> 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

Total: 20 (members: 1, guests: 19)
Robots: 357

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,015
Latest member
AmbrosePal

Latest Threads

Top