dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image Slider Problem

  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,689
    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,671
    that means you are referencing the <div id="imageSlider"></div> before the document is fully loaded

  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,671
    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 01:38 PM.

  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,671
    see the demo (the prev my post upd). note that your images array was incorrect

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