Solved

Jquery slider won't work on Firefox

Posted on 2010-09-09
18
1,870 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:JackoPinto
  • 8
  • 5
  • 3
  • +1
18 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33644600
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
 
LVL 6

Expert Comment

by:mickey159
ID: 33645414
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33646704
As I already mentioned, it does work so no UI needed
0
 
LVL 6

Expert Comment

by:mickey159
ID: 33652700
Can you please provide the images?
I just can't test well without images.

Thank you!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33653760
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
 

Author Comment

by:JackoPinto
ID: 33657570
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33657824
Here is what I get in FF 3.6.8. on Mac

Picture-5.png
Picture-6.png
0
 

Author Comment

by:JackoPinto
ID: 33678566
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
 

Author Comment

by:JackoPinto
ID: 33678569
Sorry, here's the second slide:


two.png
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33679461
Can you for a minute try to use a JPG instead?
0
 

Author Comment

by:JackoPinto
ID: 33686591
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
 
LVL 42

Expert Comment

by:David S.
ID: 33686742
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
 

Author Comment

by:JackoPinto
ID: 33687082
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
 
LVL 42

Expert Comment

by:David S.
ID: 33687139
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
 

Author Comment

by:JackoPinto
ID: 33731646
Thanks I will try that and I'll get back with comments.
0
 

Author Comment

by:JackoPinto
ID: 33744326
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 33748370
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
 

Author Comment

by:JackoPinto
ID: 33750193
Thank you for clarifying Kravimir! All good now.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now