Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > BOOK: Beginning JavaScript 3rd Ed. ISBN: 978-0-470-05151-1
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning JavaScript 3rd Ed. ISBN: 978-0-470-05151-1
This is the forum to discuss the Wrox book Beginning JavaScript, 3rd Edition by Paul Wilton, Jeremy McPeak; ISBN: 9780470051511
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript 3rd Ed. ISBN: 978-0-470-05151-1 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old November 3rd, 2008, 01:47 PM
Registered User
 
Join Date: Nov 2008
Location: sierra foothills, ca, USA.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default div element in array won't display onload

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>

Reply With Quote
  #2 (permalink)  
Old November 3rd, 2008, 08:21 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,652
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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";
}
Reply With Quote
  #3 (permalink)  
Old November 3rd, 2008, 08:24 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,652
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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">
Reply With Quote
  #4 (permalink)  
Old November 5th, 2008, 09:12 PM
Registered User
 
Join Date: Nov 2008
Location: sierra foothills, ca, USA.
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

Reply With Quote
  #5 (permalink)  
Old November 6th, 2008, 01:02 AM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,652
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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>
...
Reply With Quote
  #6 (permalink)  
Old November 6th, 2008, 01:08 AM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,652
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering an UL element within DIV keithc BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 April 4th, 2013 04:13 PM
remove <div>-element Kabe Classic ASP Professional 0 November 9th, 2007 04:41 AM
Array Element android66 Javascript 2 November 12th, 2004 03:50 AM
How do I test for an empty array element kmoran Excel VBA 1 October 8th, 2004 03:34 AM
Removing an Element from an Associative Array nick8245 Javascript 2 September 26th, 2003 12:15 PM



All times are GMT -4. The time now is 01:32 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.