Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotating Image Trouble

    Hello, I'm new to this forum. I'm not new to Javascript, but have no formal training. Looking to learn lots on this forum.

    I’m trying to deploy a Javascript code “trio” of images. The code uses a CSS file, and a separate JS file. I have a couple issues I’d like input on.

    The first is the images loop through once, per div. I’d like each div to loop independently, and infinitely on page load.

    Seccond: this page doesn’t show in IE... at all. Only FireFox. Any clues? Thank you all!!!

    My page: http://www.cityofcampbell.com/_indexRotation.htm

    JS [CODE]
    $(window).load(function() { //start after HTML, images have loaded

    var InfiniteRotator =
    {
    init: function()
    {
    //initial fade-in time (in milliseconds)
    var initialFadeIn = 1000;

    //interval between items (in milliseconds)
    var itemInterval = 500;

    //cross-fade time (in milliseconds)
    var fadeTime = 500;

    //count number of items
    var numberOfItems = $('.rotating-item').length;

    //set current item
    var currentItem = 0;

    //show first item
    $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

    //loop through the items
    var infiniteLoop = setInterval (function(){
    $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

    if(currentItem == numberOfItems -1){
    currentItem = 0;
    }else{
    currentItem++;
    }
    $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
    }
    };

    InfiniteRotator.init();

    });
    [CODE]

    CSS [CODE]
    #rotator1 {
    position: relative;
    width: 119px;
    height: 87px;
    }
    .rotating-item {
    display: none;
    position: absolute;

    }

    #rotator2 {
    position: relative;
    width: 119px;
    height: 87px;
    }
    .rotating-item {
    display: none;
    position: absolute;

    }

    #rotator3 {
    position: relative;
    width: 119px;
    height: 87px;
    }
    .rotating-item {
    display: none;
    position: absolute;
    [CODE]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    First of all, you need to use [/CODE] at the end of your code, not [CODE].

    Second, not to quibble, but you are using jQuery and there *is* a separate forum for that.
    I don't see anything at all wrong with the JavaScript code (and since it works in FF, surely there isn't) but there may be something else you need to do in IE to make that jQuery work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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