Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery slider won't work on Firefox

Posted on 2010-09-09
18
Medium Priority
?
1,947 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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 43

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 43

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 43

Accepted Solution

by:
David S. earned 2000 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

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.

Question has a verified solution.

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

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

927 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