Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

Nivo Slider not working in Firefox

Discussion in 'Javascript, AJAX, and JSON' started by BHen, Mar 22, 2012.

  1. Offline

    BHen New Member

    Message Count:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    DC area
    I've added the Nivo Slider to a site for my company. It seems to be working fine in every browser except that in Firefox it doesn't even show up. Here's a link to my page.

    http://demo3.westat.com/graphics/brian/nivo/insight_nivo.htm

    Here is the js code in my html header:

    <link href="css/projects.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="scripts/jquery-1.7.1.min.js" type="text/jscript"></script>
    <script src="scripts/jquery.nivo.slider.js" type="text/jscript"></script>
    <script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' RANDOM can also be set
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 6400, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    directionNavHide: true, // Only show on hover Change to FALSE if you want them to always show
    controlNav: true, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav: true, // Use left & right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0.6, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });
    </script>

    Any cure for this headache would MUCH appreciated!

    Thanks,
    BHen


  2. Offline

    shovenose Account Closed

    Message Count:
    2,036
    Likes Received:
    129
    Trophy Points:
    63
    Gender:
    Male
    Location:
    Fairfax, CA
    I hate Nivo slider. It's SO HARD to get it working right...


  3. Offline

    BHen New Member

    Message Count:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    DC area
    I know, that's why I had to ask about Firefox. =P


  4. Offline

    shovenose Account Closed

    Message Count:
    2,036
    Likes Received:
    129
    Trophy Points:
    63
    Gender:
    Male
    Location:
    Fairfax, CA
    OK, first off, you don't have to bother including both jquery.nivo.slider.pack.js AND jquery.nivo.slider.js do one OR the other... I don't think it matters which.
    Also, make all your javascripts type="text/javascript" NOT text/jscript
    Does that fix it?
    Funny thing is, just 5 minutes ago I finished the frustrating job of getting Nivo Slider to work in one of my other sites lol!
    I was having problems with the fade transition, try a different one!


  5. Offline

    BHen New Member

    Message Count:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    DC area
    Shovenose, sorry, just seeing this. I'll give it a go and let you know. Much appreciated!


  6. Offline

    shovenose Account Closed

    Message Count:
    2,036
    Likes Received:
    129
    Trophy Points:
    63
    Gender:
    Male
    Location:
    Fairfax, CA
    Yup no problem keep us updated :)


  7. Offline

    BHen New Member

    Message Count:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    DC area
    OK, I changed the "text/jscript" to "text/javascript", and it created kind of a one step forward, one step back scenario. The Nivo slider is showing in Friefox, BUT what happens is after the first slide transition the left/right hover arrows and the caption at the bottom containing a link disappear. See site.

    http://demo3.westat.com/graphics/brian/nivo/insight_nivo.htm

    This is now happening in every browser. Thoughts?


  8. Offline

    BHen New Member

    Message Count:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    DC area
    Check that! I got it! There was one thing I needed to fix in the CSS.

    I had:

    .nivo-slice {
    display:block;
    position:absolute; z-index: 200; top:0;
    height:100%;}

    Then I revised:

    .nivo-slice {
    display:block;
    position:absolute; top:0;
    z-index:5;
    height:100%;}

    Now working in all browsers - Thank you!


Share This Page