asked on

Chrome and Safari not executing JavaScript correctly

I have a small image on my page that triggers a larger version of the image to appear on top of it when it's clicked:

<img id="img1_300" src="<?=$file1_300?>" onmousedown="showFullImage(img1_full)" />

Open in new window

The large image starts out with display:none and the showFullImage() function just sets its display to block:

function showFullImage(image) {
        image.style.display='block'; 
	document.getElementById('img1_300').style.display='none';
	document.getElementById('img2_300').style.display='none';
	document.getElementById('img3_300').style.display='none';
	document.getElementById('cap1').style.visibility='hidden';
	document.getElementById('cap2').style.visibility='hidden';
	document.getElementById('cap3').style.visibility='hidden';  
}

Open in new window

As you can see, I also turn off some other elements when I turn on the big image.

This works fine in Firefox and IE but nothing happens with Safari or Chrome. I can trigger an alert at the top of the JavaScript function on Safari and Chrome, so the function is being entered, but the statements aren't executing.

Does anyone know what might be going on?

Thanks

experts1

I suggest you re-arrange your function as follows:

function showFullImage(image) {
	document.getElementById('img1_300').style.display='none';
	document.getElementById('img2_300').style.display='none';
	document.getElementById('img3_300').style.display='none';
	document.getElementById('cap1').style.visibility='hidden';
	document.getElementById('cap2').style.visibility='hidden';
	document.getElementById('cap3').style.visibility='hidden';
        image.style.display='block';
}

Open in new window

Roopesh Reddy

Hi,

I think in the calling function - ShowFullImage() you are passing the the ID of the image!

So, try with the below code -

function showFullImage(image) {
        document.getElementById(image).style.display='block'; 
	document.getElementById('img1_300').style.display='none';
	document.getElementById('img2_300').style.display='none';
	document.getElementById('img3_300').style.display='none';
	document.getElementById('cap1').style.visibility='hidden';
	document.getElementById('cap2').style.visibility='hidden';
	document.getElementById('cap3').style.visibility='hidden';  
}

Open in new window

Hope it helps u...

steva

ASKER

Sorry but neither of those ideas worked.

With the image.style line at the top, where it was originally, nothing happens when the smaller image is clicked. With it at the bottom, as experts1 suggested, the top six lines execute ok but not the image.style line. That is, the six elements disappear as they should, but the large image doesn't appear. So this says that the image.style line is breaking the Javascript interpreter and nothing after it executes - but only in Safari and Chrome.

Replacing the image.style line with document.getElementById(image).style.display='block'; doesn't work at all, for any browser.

If it might help, you can see the page at www.thebarcoderegistryx.com/magicbroom. Clicking any of the three images should replace the lower part of the screen with a larger version of that image.

Thanks

ASKER CERTIFIED SOLUTION

Roopesh Reddy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

experts1

Try changing the display code line to
"image.style.display='';" , (single quotes) as below:

function showFullImage(image) {
	document.getElementById('img1_300').style.display='none';
	document.getElementById('img2_300').style.display='none';
	document.getElementById('img3_300').style.display='none';
	document.getElementById('cap1').style.visibility='hidden';
	document.getElementById('cap2').style.visibility='hidden';
	document.getElementById('cap3').style.visibility='hidden';
        image.style.display='';
}

Open in new window

steva

ASKER

roopeshreddy,

This works! Passing the id in single quotes and then using the normal document.getElementById on that passed in id is apparently the proper way to write the JavaScript.

Thanks

experts1,

image.style.display='';
doesn't work for any of the browsers.