div element in array won't display onload

linus9 · November 3rd, 2008, 02:47 PM

I'm in the process of learning javascript (in part through Beginning Javascript 2nd Edition) and am having trouble with a script intended to display the first div element from an array populated by div elements when the page loads; currently the first image in the array doesn't display when the page loads (even though the rest of the css elements [not included below] do display fine and the other script [also not included below] to display additional text on rollover of one of the image also works fine).

I intend to add further functions to the troublesome script that will advance or retard the image displayed from the array using forward and back arrows but I'd like to make this initial div element (and the image it contains) display first. I realize there are almost certainly more elegant ways to accomplish what I'm trying to accomplish but I'd like to figure out how to make the script work this way before I attempt to craft a better solution.

This is not (incidentally) for a class.

Thanks for any insights you might have.

<html>

<head>

<style type="text/css">
#backArrow{position: absolute; left: 690px; top: 207px}
#fwArrow{position: absolute; left: 843px; top: 207px}
#slideElement1{position: absolute; left: 730px; top: 175px; visibility: hidden}
#slideElement2{position: absolute; left: 730px; top: 175px; visibility: hidden}
#slideElement3{position: absolute; left: 730px; top: 175px; visibility: hidden}
</style>

<script type="text/javascript">

var picNumber=0;

var slidePic=new Array(3);

slidePic[0]=slideElement1;
slidePic[1]=slideElement2;
slidePic[2]=slideElement3;

function showPic(x)
{
var slideImage=document.getElementById(slidePic[x]);
slideImage.style.visibility="visible";
}

</script>

</head>

<body onload="showPic(picNumber)">

<div id="backArrow">
<img src="leftarrow.gif" />
</div>

<div id="fwArrow">
<img src="rightarrow.gif" />
</div>

<div id="slideElement1">
<img src="firstPic.jpg" />
</div>

<div id="slideElement2">
<img src="secondPic.jpg" />
</div>

<div id="slideElement3">
<img src="thirdPic.jpg" />

</div>

</body>
</html>

Old Pedant · November 3rd, 2008, 09:21 PM

It's pretty simple, really.

Code:

var slidePic=new Array(3);
 
 slidePic[0]=slideElement1;
 slidePic[1]=slideElement2;
 slidePic[2]=slideElement3;

So the question is: WHAT did you just store in those array elements???

Depending on the browser, you might have stored nothing. But with most modern browsers, you will be storing *references* to *objects*. That is, references to your
<div id="slideElement1">
and friends.

But now THIS code:

Code:

 
function showPic(x)
{
   var slideImage=document.getElementById(slidePic[x]);
   slideImage.style.visibility="visible";
}

is saying that you stored the *ID* values of those objects in the array, isn't it???

After all, you are asking to getElementById( ), and so that MUST mean that you are expecting the
slidePic[x]
is an ID.

But it clearly can't possibly be an ID.

So you *COULD* do

Code:

 
function showPic(x)
{
   var slideImage=document.getElementById(slidePic[x].id);
   slideImage.style.visibility="visible";
}

But that's pretty silly. Instead, just do:

Code:

 
function showPic(x)
{
   var slideImage = slidePic[x];
   slideImage.style.visibility="visible";
}

or, even simpler,

Code:

 
function showPic(x)
{
   slidePic[x].style.visibility="visible";
}

Which means there really isn't much point in bothering with the showPix() function, if you don't want to.

NOW...

If you want *MAXIMAL* browser compatibility *and* efficiency, then instead of initializing the array the way you are now, use this code:

Code:

var slidePic = new Array(
        document.getElementById("slideElement1"),
        document.getElementById("slideElement2"),
        document.getElementById("slideElement3")
        );

But if you want the simplest possible code--and if you can RELY upon your own naming convention for those DIVs--then *GET RID* of the silly array and just do:

Code:

 
function showPic(x)
{
   var slideImage=document.getElementById("slideElement" + x);
   slideImage.style.visibility="visible";
}

Old Pedant · November 3rd, 2008, 09:24 PM

One more thing...

It's not WRONG to do this:

Code:

 #slideElement1{position: absolute; left: 730px; top: 175px; visibility: hidden}
 #slideElement2{position: absolute; left: 730px; top: 175px; visibility: hidden}
 #slideElement3{position: absolute; left: 730px; top: 175px; visibility: hidden}

But you could simply code:

Code:

 #slideElement1, #slideElement2, #slideElement3 
        { position: absolute; left: 730px; top: 175px; visibility: hidden; }

Though personally at that point I'd change to:

Code:

div.slide { position: absolute; left: 730px; top: 175px; visibility: hidden; }

and do

<div class="slide" id="slideElement1">

linus9 · November 5th, 2008, 10:12 PM

Thank you so much for taking the time out of your day to help me with this conundrum; the amount of attention you gave my little problem is really appreciated.

I only have a moment now but I was able to solve the problem with the help of your insights and will post the way I did it soon.

Thank you again.

Old Pedant · November 6th, 2008, 02:02 AM

So by the way...

Code:

// I find display: none works better in some cases
// but if you really want visibility: hidden then also adjust my JS code
#slideElement1, #slideElement2, #slideElement3
    {position: absolute; left: 730px; top: 175px; display: none;}


<script type="text/javascript">
// adjust this to match the number of slideElement divs 
var LAST_SLIDE_ELEMENT = 2;

// initialize this
var picNumber = 0;
 
function showPic( which )
{
    for ( i = 0; i <= LAST_SLIDE_ELEMENT; ++i )
    {
        var div = document.getElementById("slideElement"+i);
        div.style.display = ( x == i ? "block" : "none" );
    }
    picNumber = which; // remember where we are
}

function moveBy( howMuch )
{
    var moveTo = picNumber + howMuch;
    if ( moveTo < 0 ) moveTo = LAST_SLIDE_ELEMENT;
    else if ( moveTo > LAST_SLIDE_ELEMENT ) moveTo = 0;
    showPic( moveTo );
}
</script>

<body onload="showPic(0);">
<div id="backArrow">
    <img src="leftarrow.gif" onclick="moveBy(-1);" />
</div>

<div id="fwArrow">
    <img src="rightarrow.gif" onclick="moveBy(1);" />
</div>
...

Old Pedant · November 6th, 2008, 02:08 AM

You may or may not be interested in expanding on this technique as I did for this page I created the other day:

http://www.ArtsOfSnohomish.org

There are 13 images in all, so be sure to wait around to see at least 26 or so changes.