JavaScript Forum

**pealo86** · 01-23-2009, 03:05 PM

Im trying to follow a tutorial to code a JavaScript slideshow, and for some reason it's giving the CSS error:

Quote:

Warning: Error in parsing value for property 'left'. Declaration dropped.
Source File: file:///C:/Users/Pealo/Documents/design/corporate/mattPealingDesign/tute/slideshow/slideshow2.htm
Line: 0

And that's being displayed a lot, as in about 20 or so times??

Here is my code (by the way, I've isolated the error to the line that reads 'slides[currentSlide].style.left = 400;'

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Slideshow</title>
<script type="text/javascript" src="slideshow2.js"></script>
<link href="slideshow2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Image Slideshow</h1>

<div id="slideshow">
<img src="../../uploadImg/alexandra_medical_concept_240.jpg" width="400" height="320" class="slide" />
<img src="../../uploadImg/alexandra_medical_concept_241.jpg" width="400" height="320" class="slide" />
<img src="../../uploadImg/alexandra_medical_concept_242.jpg" width="400" height="320" class="slide" />
<img src="../../uploadImg/aspect_construction_167.jpg" width="400" height="338" class="slide" />
<img src="../../uploadImg/aspect_construction_168.jpg" width="400" height="338" class="slide" />
<img src="../../uploadImg/aspect_construction_169.jpg" width="393" height="400" class="slide" /></div>

<p>Click the image to view the next slide.</p>


</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

img.slide {
    position:absolute;
    left:0;
    top:0; }

#slideshow {
    position:relative;
    overflow:hidden;
    width:400px;
    height:300px; }

JavaScript:

Code:

// js slideshow 2

var numSlides = 0
var currentSlide = 0, oldSlide = 4;
var x = 0;
var slides = new Array ();

function makeSlideShow ()
    {
        // find all images with the class 'slide'
        imgs = document.getElementsByTagName ('img');
        for (i = 0; i < imgs.length; i ++)
            {
                if (imgs[i].className != 'slide')
                    {
                        continue; }
                        
                slides[numSlides] = imgs[i];
                
                // hide all but first image
                if (numSlides == 0)
                    {
                        imgs[i].style.zIndex = 10; }
                
                else
                    {
                        imgs[i].style.zIndex = 0; }
                
                imgs[i].onclick = nextSlide;
                numSlides ++;                
            }
    }

function nextSlide ()
    {
        slides[currentSlide].style.zIndex = 9;
        
        // move old slide to bottom of stack
        slides[oldSlide].style.zIndex = 0;
        oldSlide = currentSlide;
        currentSlide ++;
        if (currentSlide >= numSlides)
            {
                currentSlide = 0; }
                
        // start at the right edge
        slides[currentSlide].style.left = 400;
        x = 400;
                
        // move the new slide to the top
        slides[currentSlide].style.zIndex = 10;
        animateSlide ();
    }
    
function animateSlide ()
    {
        x = x - 25;
        slides[currentSlide].style.left = x;

        // previous image moves off the left edge
        slides[oldSlide].style.left = x - 400;
        
        // repeat until slide is at zero position
        if (x > 0)
            {
                window.setTimeout ('animateSlide ();', 10);
            }
    }

window.onload = makeSlideShow;

If anyone has any ideas then it's much appreciated! I have, however, Googled the problem and it seems to be quite common? Although I haven't found a solution!

**Insensus** · 01-23-2009, 03:15 PM

When altering something like style.left or style.right etc, you have to add +'px' to the end of the value.
So

Code:

slides[currentSlide].style.left = 400+'px';

**pealo86** · 01-23-2009, 03:20 PM

ahhh yesss it works! hehe thanks. I had originally tried it but with just '400px' and that didn't work. Although I did only apply that to the one line of code rather than all 3 that needed it.

I cant understand why people publish these books when the code inside them doesn't even work??

**tripy** · 04:18 PM

Quote:

I cant understand why people publish these books when the code inside them doesn't even work??

A book is a lot to proofread, and for example, the glitch you have here don't appear everywhere.
That's why you can usually download revised version of the scripts on the web site of the publisher.

If my memory serves me well, on IE and firefox in quirks mode, it works without the "px".
This problem only appears when you are in standard compliant mode
[trolling]which is never the case for IE, so it always works on IE...[/trolling]