Jquery slider won't work on Firefox

Hi.

I'm using a Jquery slider on my site.

It works great on Safari, Chrome, and even IE. But it doesn't work on Firefox, the slides don't run, the first one comes up and it freezes there. I can the the first slide and and "border" around it (I'm  including a screen shot). I've tried a million things and I just don't know what to fix so that it works on Firefox.   I'm all out of options, I'm a newbie and I'm stuck!

This is the CSS for that:


.main_view {
      float:none;
      position: relative;
}

.window {
      height:333px;      width: 500px;
      overflow: hidden;
      position: relative;
}
.image_reel {
      position: absolute;
      top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.pagingnew {
      position: absolute;
      bottom: 10px; right: -7px;
      width: 178px; height:47px;
      z-index: 100;
      text-align: center;
      line-height: 40px;
      background: url(/images/marq/fondomarq.png) no-repeat;
      display: none;
}
.pagingnew a {
      padding: 5px;
      text-decoration: none;
      color: #fff;
}
.pagingnew a.active {
      font-weight: bold;
      background: #036;
      border: 1px solid #666;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      -webkit-border-radius: 3px;
}
.pagingnew a:hover {font-weight: bold;}


#marqueslider {
      position:relative;
      margin:0;
      padding:0;
      top:2px;
      left:27px;
}

#marqueslider a {
      border:0;
}


In the snippet bellow I'm including the code from the HTML page where the slider shows up. Again, it works great on everything but on Firefox.  Please help!

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

//Show the paging and activate its first link
$(".pagingnew").show();
$(".pagingnew a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".pagingnew a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.pagingnew a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.pagingnew a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
$(".pagingnew a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});

});
</script>
  <div id="marqueslider">	
        <div class="main_view">
    <div class="window">
        <div class="image_reel">
             <a href="servicioexpress.php"><img src="slideshow/images/Express2.jpg" alt="Servicio Express"  /></a>
               <a href="info.php"><img src="slideshow/images/Saldos.jpg" alt="¡Saldos!" /></a>
        </div>
        <div class="pagingnew">
        <a href="servicioexpress.php" rel="1">1</a>
        <a href="info.php" rel="2">2</a>
    </div> 
    </div>
    
</div>
    </div>

Open in new window

JackoPintoAsked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
Yes, they have double quotes. The problem is that they have single quotes as well. Replace those two lines with these:

<script type="text/javascript" src="menu/js/jquery.js"></script>
<script type="text/javascript" src="meny/js/mrmenu.js"></script>
0
 
Michel PlungjanIT ExpertCommented:
If sliding from 1 to 2 and back to 1 is what you want, then it works in FF 3.6.9 on Mac
Can you clear your cache in FF? What FF are you using on what platform?
0
 
mickey159Commented:
Do you have the jQuery UI inserted?
I can't find it in your code provided.
Maybe you should check the slashes if there are in the right direction.
I encountered this problem before, and its the problem of slashes.
(I used \ but it should be /)

Good luck!
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
As I already mentioned, it does work so no UI needed
0
 
mickey159Commented:
Can you please provide the images?
I just can't test well without images.

Thank you!
0
 
Michel PlungjanIT ExpertCommented:
I had no problem testing.

First you see 1 and some bordered links, then the links slide away and you see a 2, then the links slide back in and you see a 1 again
0
 
JackoPintoAuthor Commented:
Thanks a lot. I'm on a Mac using FF 3.6.8, I did clean the cache but still can't get it to work on FF.  What else can I do?

Here's the live link:  http://libreriafrancesa.net/, on my Firefox that first slide just won't move, it just stays there.  If I go to Chrome or Safari it works great.

Thanks for the help.
0
 
Michel PlungjanIT ExpertCommented:
Here is what I get in FF 3.6.8. on Mac

Picture-5.png
Picture-6.png
0
 
JackoPintoAuthor Commented:
Thanks.

I'm now on a different Mac also on FF 3.6.8 and the slider won't go pass the first image (guy holding the boxes), on this other Mac the slider works great showing first the guy with the boxes and then the price tags (I'm attaching the images) the first one that comes up is the boxes one and then the price tags.

What can be done to fix this?
one.png
0
 
JackoPintoAuthor Commented:
Sorry, here's the second slide:


two.png
0
 
Michel PlungjanIT ExpertCommented:
Can you for a minute try to use a JPG instead?
0
 
JackoPintoAuthor Commented:
The slides are jpg., the ones I posted here are .png because I got them as screen-shots. Is that what you mean?

Thanks
0
 
David S.Commented:
It's not working in Firefox because the default border on those images (because each is in a link) is causing the second slide to drop below the first instead of sitting next to it. The solution is to add "border: 0 none" to the ".image_reel img" (CSS) rule.
0
 
JackoPintoAuthor Commented:
Thanks Kravimir, I added that css change but I still don't get any movement from the Slider on Firefox, still works on Chrome and Safari.

0
 
David S.Commented:
Hmm... it's working in Firefox 3.5 now, but still isn't in 3.6.

That page has many XHTML errors (http://validator.w3.org/). This one in particular might be the problem. The relative URLs are wrapped in both single and double quotes (use one or the other, don't use both):

<script type="text/javascript" src="'menu/js/jquery.js'"></script>
<script type="text/javascript" src="'meny/js/mrmenu.js'"></script>
0
 
JackoPintoAuthor Commented:
Thanks I will try that and I'll get back with comments.
0
 
JackoPintoAuthor Commented:
Thanks Kravimir, I checked the URL's and they all have double quotes. Could you please specify what I need to do?  I can't get to work. Thanks. Here's another url where this same slider works fine even in Firefox: http://conceptosfinancieros.org/, I just don't get why it won't do the same for: http://www.libreriafrancesa.net/

Thanks for the help!
0
 
JackoPintoAuthor Commented:
Thank you for clarifying Kravimir! All good now.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.