0

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

Page: http://www.flyteusa.com/flyteusa/index1.php

Code:

<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>
1
Contributor
3
Replies
4
Views
7 Years
Discussion Span
Last Post by bjeffries
0

well does anyone know of any javascript code that will do the same thing I have set up now but work in all browsers?

0

I read another forum that said this
"If a form works in IE and nowhere else,
it is often because a script expects document.getElementById to return a field that has a name, and not an id. "

Would this be affecting me in any way? if it is would there be a way to rewirte the script that is calling on the id's to getElementById?

Script:

<script type="text/jscript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.