Solved

Jquery slider won't work on Firefox

Posted on 2010-09-09
18
1,860 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 49
Glitch when viewing from computer to mini-window(smartphone) 1 19
HTML CSS 7 20
CSS Font Arial Narrow 2 12
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

13 Experts available now in Live!

Get 1:1 Help Now