Solved

Jquery slider won't work on Firefox

Posted on 2010-09-09
18
1,887 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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