* Edit post * Delete post * Report this post * Reply with quote Issue with Javascript slider in Firefox.

bjeffries111 · August 19, 2010

Would anyone know why my javascript slider does not work in FireFox? Ironically it works well in Ie and Chrome. All I did was modify a JQuery slider to fit my needs and even before I Modified it, the slider still would not work in FireFoxPage: http://www.flyteusa.com/flyteusa/index1.phpCode:

<style>html {	margin:0;}#wrapper {	margin:0;	padding:0;}#featured{	width:1000px;	padding:0;	position:relative;	height:800px;	background:#fff;	border:2px solid #333;}#featured ul.ui-tabs-nav{	position:absolute;	top:0px;	left:0;	list-style:none;	padding:0;	margin:0;	width:1000px;	height: 800px;}#featured ul.ui-tabs-nav li{	padding:0;	font-size:12px;	color:#666;	float:left;	width:250px;	height:250px;}#featured ul.ui-tabs-nav li span{	font-size:11px; font-family:Verdana;	line-height:18px;}#featured .ui-tabs-panel{	width:400px;	height:400px;	background:#999;	position:relative;	overflow:hidden;}#featured .ui-tabs-hide{	display:none;}#featured li.ui-tabs-nav-item a{/*On Hover Style*/	display:block;	height:100px;	color:#333;  background:#fff;	line-height:20px;	outline:none;}#featured li.ui-tabs-nav-item a:hover{	background:#f2f2f2;}#featured li.ui-tabs-selected{ /*Selected tab style*/	background:url('http://flyteusa.com/images/selected-item.gif') top left no-repeat;}#featured ul.ui-tabs-nav li.ui-tabs-selected a{	background:#ccc;}#featured ul.ui-tabs-nav li img{	float:left;	margin:0;	background:#fff;	/*padding-top:1px; padding-left:1px;	border:1px solid #eee;*/}#featured .ui-tabs-panel {	position:absolute;	left:250px;	top:100px;}#featured .ui-tabs-panel .info{	position:absolute;	top:332px;	left:0;	height:70px;	width: 400px;	background: url('http://flyteusa.com/flyteusa/sitemain/images/transparent-bg.png');}#featured .info h2{	font-size:18px; font-family:Georgia, serif;	color:#fff; padding:5px; margin:0;	overflow:hidden;}#featured .info p{	margin:0 5px;	font-family:Verdana; font-size:11px;	line-height:15px; color:#f0f0f0;}#featured .info a{	text-decoration:none;	color:#fff;}#featured .info a:hover{	text-decoration:underline;}</style><!--//orginal script locations... google.com <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>  --><script type="text/javascript" src="http://flyteusa.com/flyteusa/sitemain/jscss/jquery.min.js" ></script><script type="text/javascript" src="http://flyteusa.com/flyteusa/sitemain/jscss/jquery-ui.min.js" ></script><script type="text/jscript">	$(document).ready(function(){		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);	});</script></head><body><div id="wrapper"><div align="center"><table width="1000" height="800" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top"><div id="featured" ><img src="http://flyteusa.com/flyteusa/sitemain/images/Flyte_Rough_Black.png" width="350" border="0" style="position:absolute; left:275px;" /><br /><!--jQuery slider here-->	<ul class="ui-tabs-nav">		<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" style="margin-right:400px !important;"><a href="#fragment-1"><img src="http://flyteusa.com/flyteusa/sitemain/images/slider/atv-small.jpg" width="97" alt="" /><span></span></a></li>		<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://flyteusa.com/flyteusa/sitemain/images/slider/mx-small.jpg" width="97" alt="" /><span></span></a></li>		<li class="ui-tabs-nav-item" id="nav-fragment-3" style="margin-right:400px !important;"><a href="#fragment-3"><img src="http://flyteusa.com/flyteusa/sitemain/images/slider/chp-small.jpg" width="97" alt="" /><span></span></a></li>		<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://flyteusa.com/flyteusa/sitemain/images/slider/mxa-small.jpg" width="97" alt="" /><span></span></a></li>	</ul>	<!-- First Content -->	<div id="fragment-1" class="ui-tabs-panel" style="">		<img src="http://flyteusa.com/flyteusa/sitemain/images/slider/atv.jpg" width="400" alt="" />		<div class="info" >		<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>		</div>	</div>	<!-- Second Content -->	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">		<img src="http://flyteusa.com/flyteusa/sitemain/images/slider/mx.jpg" width="400" alt="" />		<div class="info" >		<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>		<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>		</div>	</div>	<!-- Third Content -->	<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">		<img src="http://flyteusa.com/flyteusa/sitemain/images/slider/chp.jpg" width="400" alt="" />		<div class="info" >		<h2><a href="#" >35 Amazing Logo Designs</a></h2>		<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>		</div>	</div>	<!-- Fourth Content -->	<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">		<img src="http://flyteusa.com/flyteusa/sitemain/images/slider/mxa.jpg" width="400" alt="" />		<div class="info" >		<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>		<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>		</div>	</div></div><!--end slider--></td></tr></table></div></div></body></html>

bjeffries111 · August 22, 2010

Does anyone know of a javascript slider that I can use that will do pretty much the same thing as you see here: http://www.flyteusa.com/flyteusa/index1.php (but view in IE or Chrome) ???

End User · August 22, 2010

It didn't work before you modified it and it didn't work after you modified it? Honestly, under these circumstances how would anyone here be able to tell you what's wrong?

Would anyone know why my javascript slider does not work in FireFox? Ironically it works well in Ie and Chrome. All I did was modify a JQuery slider to fit my needs and even before I Modified it, the slider still would not work in FireFox

I sense there's a clue here somewhere, but I can't quite put my finger on it.

Sign In

* Edit post * Delete post * Report this post * Reply with quote Issue with Javascript slider in Firefox.

Recommended Posts

bjeffries111 0

Share this post

Link to post

Share on other sites

bjeffries111 0

Share this post

Link to post

Share on other sites

End User 0

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity