November 12, 201015 yr Hey, Im trying to implement "nivo slider" into my webpage. www.elliothesp.co.uk/pigandrat Now, in Internet Explorer & Chrome etc it loads up fine and works how I want it too. However, in firefox, the animated gif just spins and spins. This is my html part, everything looks fine to me, although im not sure about the jQuery window.ready part. EDIT: Forgot to mention, it works fine in the offline view part with dreamweaver! <link rel="stylesheet" type="text/css" href="css.css" /> <link rel="stylesheet" href="scripts\nivo-slider.css" type="text/css" media="screen" /> </head> <body> <div id="sliderwrapper"> <div id="surrounder"> <div id="slider" class="nivoSlider"> <img src="imagerotator/image1.jpg" alt="" /> <img src="imagerotator/image2.jpg" alt=""/> <img src="imagerotator/image3.jpg" alt=""/> </div> </div> </div> <script type="text/javascript" src="scripts\jquery-1.4.3.min.js"></script> <script type="text/javascript" src="scripts\jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).ready(function() { $('#slider').nivoSlider({animSpeed:1000, pauseTime:3000}); }); </script> The css } #sliderwrapper { padding-bottom: 30px; width:100%; height:400px; margin-left:auto; margin-right:auto; } #surrounder { height:380px; width:660px; margin-left:auto; margin-right:auto; background-image:url(images/wrapper.png); background-repeat:no-repeat; } #slider { position:relative; top:29px; width:600px; height:300px; margin-left: 27px; margin-top: 50px; background:url(images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .clear { clear:both; } Can anyone see anything thats added (or missing) that wont let it work in firefox? Im really stumped!
November 12, 201015 yr Try putting this: <script type="text/javascript" src="scripts\jquery-1.4.3.min.js"></script> <script type="text/javascript" src="scripts\jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).ready(function() { $('#slider').nivoSlider({animSpeed:1000, pauseTime:3000}); }); </script> before your closing </head> tag
November 12, 201015 yr Author Thanks for the reply, but nope, the loading gif just keeps spinning! Does it work for you in FF?
November 12, 201015 yr Thanks for the reply, but nope, the loading gif just keeps spinning! Does it work for you in FF? I posted that before I had tested it, no it doesn't.. I edited my last post, try above ^^
November 12, 201015 yr Author Nope, doesnt work! I will just try another one, "coin slider" seemed to work that someone suggested to me, so I shall have a go with that
November 12, 201015 yr I went to the site that you pointed to and it says that it can't find scripts\nivo-slider.css, scripts\jquery-1.4.3.min.js and scripts\jquery.nivo.slider.pack.js. Which means that you have either uploaded them to a different folder and haven't changed the path in your html, or you just forgot to upload the scripts folder.
November 12, 201015 yr sorry me being stupid really the path should be: /scripts/jquery.nivo.slider.pack.js not /scripts\jquery.nivo.slider.pack.js. you just have to change \ to a /
November 12, 201015 yr Author Haha, man that is my bad! I did that part in notepad, I guess a good thing about dreamweaver is that it does that for you Thanks alot mate
Create an account or sign in to comment