www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image Slider Problem

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    18

    Image Slider Problem

    Hi!

    I'm trying to make a very basic image slider. When the javascript code is in the same document with the html everything works fine but when I move the javascript to it's own folder and put link to the javascript in the header of the page it doesn't work. The pages have connected correctly. I will show code to make it more clear.

    JAVASCRIPT

    var imageSlider = document.getElementById('imageSlider');
    var myPics = ['pic1.jpg, pic2.jpg, pic3.jpg'];
    var totalPics = myPics.length;
    var i = 0;
    function loop() {
    if(i > (totalPics - 1)){
    i = 0;
    }
    imageSlider.innerHTML = '<img src="../images/slider/'+myPics[i]+'">';
    i++;
    loopTimer = setTimeout('loop()',3000);
    }
    loop();


    HTML

    <div id="pageContent">
    <div id="imageSlider"></div>
    </div>

    __________________________________________________________________________

    Folders are set-up with html in root.
    script in js folder.
    images in images/slider/ folder.

    Thanks in advance!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2013
    Posts
    18
    Maybe I described it bad but when I put it all in one document like that my code works fine and I can display the images.
    It's when I separate the code I can't see the images. After a quick firebug check I see this.

    TypeError: imageSlider is null
    imageSlider.innerHTML = '<img src="../images/slider/'+myPics[i]+'">';

    Know what that means?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    that means you are referencing the <div id="imageSlider"></div> before the document is fully loaded
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Nov 2013
    Posts
    18
    But in my header.php file I put this

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Colubris</title>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="javascript/slider.js"></script>
    </head>

    And after that in the index.php I use the imageSlider div.
    I also tried to put the <script type="text/javascript" src="javascript/slider.js"></script> in the top of index page.
    Same issue.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    that's exactly what i was talking about. the very first line of your script (var imageSlider = document.getElementById('imageSlider');) causes this error. why? because the script is executing right where it is placed in the markup. try to place the script before the </body> closing tag or (the better choice) change the script to make it run after the page is loaded

    live demo
    Last edited by Padonak; 11-19-2013 at 12:38 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Nov 2013
    Posts
    18
    oooh! I see!
    How can i modify it to run after the page is loaded?
    Not very good with javascript.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    see the demo (the prev my post upd). note that your images array was incorrect
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles