Page 1 of 1

Issue with Javascript slider in Firefox.

Posted: Thu Aug 19, 2010 11:02 am
by Bjeffries111
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:

Code: Select all

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

Re: Issue with Javascript slider in Firefox.

Posted: Thu Aug 19, 2010 6:34 pm
by Bjeffries111
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:

Code: Select all

<script type="text/jscript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

Re: Issue with Javascript slider in Firefox.

Posted: Fri Aug 20, 2010 1:45 pm
by PHPHorizons
Hello Bjeffries111,

I took a look at the site you linked to but didn't see a slider there, in firefox or in ie.

The javascript code you're using there looks like jQuery code and that will be cross browser capable from the git go. The problem is something else, but I don't know what it is.

Cheers

Re: Issue with Javascript slider in Firefox.

Posted: Fri Aug 20, 2010 3:38 pm
by Bjeffries111
Yeah it is a jquery slider, I modified the CSS to make the thumbnails appear on both sides not all 4 on one side. So those 4 surrounding images are the thumbnails for the slider. But keep in mind it did not work before I modified the code.

I would not have gone through and modified anything if would have known it was going to be this big of an issue fixing it.

Re: Issue with Javascript slider in Firefox.

Posted: Fri Aug 20, 2010 7:40 pm
by PHPHorizons
You're going to kick yourself in the pants on this one! You have text/jscript specified on a script tag when you need text/javascript

Code: Select all

<script type="text/jscript">

Code: Select all

<script type="text/javascript">
Cheers

Re: Issue with Javascript slider in Firefox.

Posted: Sat Aug 21, 2010 8:11 pm
by Bjeffries111
Holy $*** PHPHorizons, you are the man!! I cannot believe I didnt see that!!

Re: Issue with Javascript slider in Firefox.

Posted: Sun Aug 22, 2010 6:54 am
by PHPHorizons
/me bows
Cheers