Issue with Javascript slider in Firefox.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Bjeffries111
Forum Newbie
Posts: 11
Joined: Thu Oct 08, 2009 12:56 pm

Issue with Javascript slider in Firefox.

Post 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>
Bjeffries111
Forum Newbie
Posts: 11
Joined: Thu Oct 08, 2009 12:56 pm

Re: Issue with Javascript slider in Firefox.

Post 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>
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: Issue with Javascript slider in Firefox.

Post 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
Bjeffries111
Forum Newbie
Posts: 11
Joined: Thu Oct 08, 2009 12:56 pm

Re: Issue with Javascript slider in Firefox.

Post 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.
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: Issue with Javascript slider in Firefox.

Post 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
Bjeffries111
Forum Newbie
Posts: 11
Joined: Thu Oct 08, 2009 12:56 pm

Re: Issue with Javascript slider in Firefox.

Post by Bjeffries111 »

Holy $*** PHPHorizons, you are the man!! I cannot believe I didnt see that!!
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: Issue with Javascript slider in Firefox.

Post by PHPHorizons »

/me bows
Cheers
Post Reply