Jquery only working in Chrome

Discussion in 'jQuery' started by Cozmic, Jul 31, 2010.

0
  1. #1
    Hey. I have this HTML file.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link href='{$tp}admin.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='thirdparty/jquery.js' />
<script type='text/javascript' src='thirdparty/jquerycolor.js' />

<script type='text/javascript'>
$(document).ready(function(){
	var frame = document.getElementById('frame');
	var loading = document.getElementById('loading');
	
	$('#forums').click(function() {
		loading.style.display = 'block';
		frame.src = '';
		document.getElementById('more').innerHTML = "<div class='button' style='background-color:#085484;color:white;'>Forums</div>";
		$('.innerright').animate({
			backgroundColor: '#085484'
		}, 500, function() {
			frame.src = 'admin.php?app=forums';
			loading.style.display = 'none';
		});
	});
	$('#home').click(function() {
		loading.style.display = 'block';
		frame.src = '';
		document.getElementById('more').innerHTML = "";
		$('.innerright').animate({
			backgroundColor: 'white'
		}, 500, function() {
			frame.src = 'admin.php?app=home';
			loading.style.display = 'none';
		});
	});
	$('#colapse').click(function() {
		$('.innerleft').animate({
			height: 'toggle'
		}, 500, function() {
			$('.left').animate({
				width: '0px'
			}, 0, function() {
				$('.right').animate({
					width: '100%'
				}, 500, function() {
					document.getElementById('restore').style.display = 'block';
				});
			});
		});
	});
	$('#restore').click(function() {
		document.getElementById('restore').style.display = 'none';
		$('.right').animate({
			width: '70%'
		}, 500, function() {
			$('.left').animate({
				width: '30%'
			}, 0, function() {
				$('.innerleft').animate({
					height: 'toggle'
				}, 500, function() {

				});
			});
		});
	});
});
</script>

<html>
<body>
	<div class='menu'>
		<div><a href='index.php'>Forum Home</a></div>
	</div>
	
	<div class='wrap'>
		<div class='header'><img style='margin-left:25px;' src='{$tp}images/adminlogo.png' /></div>
		<div class='nav'>
			<div class='button' id='home'>Admin Home</div><span id='more'>
		</div>
		
		<div id='restore' style='display:none;text-align:center;color:white;cursor:pointer;'>
			Restore Sidebar
		</div>
		
		<table class='main'><tr>
			<td class='left'>
				<div class='innerleft'>
					<div class='topleft'><span id='colapse' style='cursor:hand;'>Colapse Sidebar</span></div>
					<div class='button' id='forums'>Manage Forums</div>
				</div>
			</td>
			<td class='right'>
				<div class='innerright' id='main'>
					<center><img src='{$tp}images/ajax.png' id='loading' style='display:none;' /></center>
					<iframe width='100%' style='height:500px;border:none;' src='?app=home' id='frame'></iframe>
				</div>
			</td>
		</tr></table>
	</div><br />
</body>
</html>
    HTML:
    Basically, I have jquery which will, once one of the sidebar buttons is pressed:

    1. animate the color of the right area of the table to the right color.
    2. Add an entry to the breadcrumbs at the top.
    3. set the iframe SRC to the desired link.

    It works perfectly in Google Chrome but not in Firefox or IE. Nothing will happen when you click one of the sidebar links. I guess that means that those browsers don't like the script I'm using.

    Any ideas what I did wrong here? Don't bother criticizing HTML standards, because I intend on tackling any problems with that after it works in FireFox and IE.
     
    Cozmic, Jul 31, 2010 IP