erratic JS behaviour

[osmanjaro]

Hi all, This should be a simple fix for someone.
I'm making a site that uses only one tiny bit of javascript.
It's for opening large versions of thumbnail images in the same page.
Very simple, works well but not perfectly.
The thumbnails sometimes take 2 clicks before the large image appears
correctly.
Lookit : http://www.lisavallentin.com/images.html
(please excuse that the site is half complete and lacking ie css)

the script :
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>

called like this :
<a onclick="return showPic(this)" href="images/debbie.jpg"
title="Debbie (watercolour)" ></a>

Any help would be greatly appreciated.
I'm not too hot on the js, but I'm eager to learn.

i

 

[BootNic]

Hi all, This should be a simple fix for someone.
I'm making a site that uses only one tiny bit of javascript.
It's for opening large versions of thumbnail images in the same
page. Very simple, works well but not perfectly.
The thumbnails sometimes take 2 clicks before the large image
appears correctly.
Lookit : http://www.lisavallentin.com/images.html
(please excuse that the site is half complete and lacking ie css)

the script :
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>

called like this :
<a onclick="return showPic(this)" href="images/debbie.jpg"
title="Debbie (watercolour)" ></a>

Any help would be greatly appreciated.
I'm not too hot on the js, but I'm eager to learn.

<script type="text/javascript">
function showPic (whichpic) {
var a=(document.getElementById)?false:true;
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue=
(whichpic.title)?whichpic.title:whichpic.childNodes[0].nodeValue;
}
return a;
}
function correction(){
document.getElementById('picswap').style.display='none';
document.getElementById('picswap').style.display='';
}
</script>

<img id="picswap" src="images/bit.gif" alt="" onload="correction()" />

 

[osmanjaro]

BootNic Thursday, December 15, 2005 9:21 PM wrote back

Much obliged BootNic.

i

 

[I Osman]

<script type="text/javascript">
function showPic (whichpic) {
var a=(document.getElementById)?false:true;
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue=
(whichpic.title)?whichpic.title:whichpic.childNodes[0].nodeValue;
}
return a;
}
function correction(){
document.getElementById('picswap').style.display='none';
document.getElementById('picswap').style.display='';
}
</script>

<img id="picswap" src="images/bit.gif" alt="" onload="correction()" />

site:
http://www.lisavallentin.com/sketches.html

Hi,
I did use this amended code in the .js file and xhtml.
The onload="correction()" part in the link does not validate and the
image loading problem (takes a double click to bring the image to the
front) still persists. I going back to my original flawed method.

Is there a way to do this all in the .js file and not in the html.
It should be possible to get the javascript to only be applied to links
class="showme" for example.

Strange that onclick="" would validate xhtml and onload="" doesn't.

 

[BootNic]

<script type="text/javascript">
function showPic (whichpic) {
var a=(document.getElementById)?false:true;
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue=
(whichpic.title)?whichpic.title:whichpic.childNodes[0].nodeValue;
}
return a;
}
function correction(){
document.getElementById('picswap').style.display='none';
document.getElementById('picswap').style.display='';
}
</script>

<img id="picswap" src="images/bit.gif" alt=""
onload="correction()" />

site:
http://www.lisavallentin.com/sketches.html

Hi,
I did use this amended code in the .js file and xhtml.
The onload="correction()" part in the link does not validate and the
image loading problem (takes a double click to bring the image to
the front) still persists. I going back to my original flawed
method.

Is there a way to do this all in the .js file and not in the html.
It should be possible to get the javascript to only be applied to
links class="showme" for example.

Strange that onclick="" would validate xhtml and onload="" doesn't.

The onload="correction()" is the part that redraws the node to
correct the display issue Mozilla has, you should get the same result
with one click if you Minimize and Maximize the browser.

The showPic function did the same thing, just wrote different.

Try this in your script.js and see if it will do what you want.

function showPic (whichpic) {
var a=(document.getElementById)?false:true;
var b = whichpic.href.split('/');
if (document.getElementById) {
document.getElementById('picswap').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue=
(whichpic.title)?whichpic.title:b[b.length-1];
}
return a;
}
function correction(){
document.getElementById('picswap').style.display='none';
document.getElementById('picswap').style.display='';
}
function loadcorrection(){
if(window.addEventListener && document.getElementById('picswap')){
document.getElementById('picswap').addEventListener("load", correction, false);
}
}
if(window.addEventListener){
window.addEventListener("load", loadcorrection, false);
}