Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member
    Join Date
    Aug 2013
    Posts
    36
    Member #
    37005
    Liked
    4 times

    Javascript Slideshow works ONLY when used on FF

    Hi all

    I have a problem with the javascript that I am using. I am new to javascript but figured it would be the most effective method of producing a slideshow.

    The problem is that when loaded my slideshow displays the 'broken image' icon for the area inside the slideshow container. If i preview this offline on Firefox it works perfectly however will only sometimes work on internet explorer or chrome. I have seen online queries surrounding this error related to the chrome minimum timer however can't seem to fix it.

    I have virtually copied a tutorial code in the effort of teaching myself how this works and so may be a simple error that my limited knowledge doesn't cover for javascript.

    I was wondering if i would be able to gain any assistance with this error as I am keen to put on a slideshow to the page.

    Thank you for the assistance.


    -- JS Code --


    <script type="text/javascript">

    var interval = 3000;
    var random_display = 0;
    var imageDir = "_assets/";

    var imageNum = 0;
    imageArray = new Array();
    imageArray[imageNum++] = new imageItem(imageDir + "infographic.png");
    imageArray[imageNum++] = new imageItem(imageDir + "test1.png");
    imageArray[imageNum++] = new imageItem(imageDir + "test2.png");
    imageArray[imageNum++] = new imageItem(imageDir + "test3.png");

    var totalImages = imageArray.length;

    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }

    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }


    function randNum(x,y) {
    var range = y - x + 1;
    return Math.floor(Math.random()*range)+x;
    }



    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    var new_image = get_ImageItemLocation(imageArray[imageNum]);
    return(new_image);
    }


    function switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }

    </script>



    -- HTML Code --

    <body onload="switchImage('slideImg')">
    <img name="slideImg" src="test1.png" width="500" height="300" border="0" alt="slideshow" />
    </body>

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Try putting the script just before </body>. It's possible the script is running before the assets are loaded.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Aug 2013
    Posts
    36
    Member #
    37005
    Liked
    4 times
    I tried that along with placing it at different sections of the body yet it still comes up with the same issue

  5. #4
    Member
    Join Date
    Aug 2013
    Posts
    36
    Member #
    37005
    Liked
    4 times
    I have tested this on a remote server and the code works fine when uploaded to the server. It seems the problem is only when in offline testing.

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Quote Originally Posted by henryfraser View Post
    I have tested this on a remote server and the code works fine when uploaded to the server. It seems the problem is only when in offline testing.
    offline ? are you using an actual web server or just viewing the pages in the web browser ?

    also, did you post ALL the code or the portion you thought was relevant ?

    if you're not actually using the <html><head> tags in your code, the browser will get confused... meaning sometimes it will GUESS at what it's seeing and attempt to render it, other times it gives up.

  7. #6
    Member
    Join Date
    Aug 2013
    Posts
    36
    Member #
    37005
    Liked
    4 times
    I was viewing the pages in the web browser at first. I had it in the head tag both with full script and a link to the script off the page. It works fine on the remote server however the offline web page doesn't seem to want to do it. it isn't that much of an issue now that i know it works online but would be interested to know why it doesn't work offline. is it similar to some php elements where it requires a remote server?


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 02:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com