Forums

synic

I have a page that utilizes jQuery and it's not working properly in IE7 for some reason. Well, half of it isn't working -- the first div and the last div do not show up in IE... I think it has to do with the animated scrolling script I'm using (found here: http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links) but I'm really not sure.

Anyway, here's all of the code:
The JavaScript file (handlers.js)

$(function () {
/* ----------------- STOP WATCH INSTANCES ----------------- */
/* -------------------------------------------------------- */
	var s1 = new Stopwatch(function(runtime) {
	  // format time as m:ss.d
	  var minutes = Math.floor(runtime / 60000);
	  var seconds = Math.floor(runtime % 60000 / 1000);
	  var decimals = Math.floor(runtime % 1000 / 100);
	  var displayText = minutes + \":\" + (seconds < 10 ? \"0\" : \"\") + seconds + \".\" + decimals;
	  $('#timesample1').attr('value', displayText);
	});
	
	var s2 = new Stopwatch(function(runtime) {
	  // format time as m:ss.d
	  var minutes = Math.floor(runtime / 60000);
	  var seconds = Math.floor(runtime % 60000 / 1000);
	  var decimals = Math.floor(runtime % 1000 / 100);
	  var displayText = minutes + \":\" + (seconds < 10 ? \"0\" : \"\") + seconds + \".\" + decimals;
	  $('#timesample2').attr('value', displayText);
	});
	
	var s3 = new Stopwatch(function(runtime) {
	  // format time as m:ss.d
	  var minutes = Math.floor(runtime / 60000);
	  var seconds = Math.floor(runtime % 60000 / 1000);
	  var decimals = Math.floor(runtime % 1000 / 100);
	  var displayText = minutes + \":\" + (seconds < 10 ? \"0\" : \"\") + seconds + \".\" + decimals;
	  $('#timesample3').attr('value', displayText);
	});
	
	var s4 = new Stopwatch(function(runtime) {
	  // format time as m:ss.d
	  var minutes = Math.floor(runtime / 60000);
	  var seconds = Math.floor(runtime % 60000 / 1000);
	  var decimals = Math.floor(runtime % 1000 / 100);
	  var displayText = minutes + \":\" + (seconds < 10 ? \"0\" : \"\") + seconds + \".\" + decimals;
	  //$('#time4').html(displayText).hide();
	  $('#timesample4').attr('value', displayText);
	});
/* ---------------- END STOP WATCH INSTANCES ---------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */ 
/* ------------------- STOPWATCH 1 BUTTONS ------------------ */
	$('#start1').bind(\"click\", function(){ 
		s1.startStop();		
		$(this).attr('disabled', 'true');
		$('#reset1').removeAttr('disabled');
	});
  	$('#reset1').bind(\"click\", function(){ 
  		s1.startStop(); 
  		$('#start1').remove();
  		$('#reset1').remove();
  	});
/* ----------------- END STOPWATCH 1 BUTTONS ---------------- */ 	
/* ---------------------------------------------------------- */ 
/* ------------------- STOPWATCH 2 BUTTONS ------------------ */
  	$('#start2').bind(\"click\", function(){
  		s2.startStop(); 
  		$(this).attr('disabled', 'true');
		$('#reset2').removeAttr('disabled');
  	});
  	$('#reset2').bind(\"click\", function(){ 
  		s2.startStop(); 
  		$('#start2').remove();
  		$('#reset2').remove();
  	});
/* ----------------- END STOPWATCH 2 BUTTONS ---------------- */ 
/* ---------------------------------------------------------- */ 
/* ------------------- STOPWATCH 3 BUTTONS ------------------ */
  	$('#start3').bind(\"click\", function(){ 
  		s3.startStop(); 
  		$(this).attr('disabled', 'true');
		$('#reset3').removeAttr('disabled');
  	});
  	$('#reset3').bind(\"click\", function(){ 
  		s3.startStop(); 
  		$('#start3').remove();
  		$('#reset3').remove();
  	});
/* ----------------- END STOPWATCH 3 BUTTONS ---------------- */ 
/* ---------------------------------------------------------- */ 
/* ------------------- STOPWATCH 4 BUTTONS ------------------ */
  	$('#start4').bind(\"click\", function(){ 
  		s4.startStop(); 
  		$(this).attr('disabled', 'true');
		$('#reset4').removeAttr('disabled');
  	});
  	$('#reset4').bind(\"click\", function(){ 
  		s4.startStop(); 
  		$('#start4').remove();
  		$('#reset4').remove();
  	});  	
/* ----------------- END STOPWATCH 4 BUTTONS ---------------- */ 
/* ---------------------------------------------------------- */ 
/* ---------------------------------------------------------- */ 
/* ---------------- CAPTURE SCREEN RESOLUTION --------------- */ 
  	$('#screenres').attr('value', screen.width + 'x' + screen.height);  	
/* -------------- END CAPTURE SCREEN RESOLUTION ------------- */ 
/* ---------------------------------------------------------- */ 
/* ---------------------------------------------------------- */ 
/* ----------------------- SCROLL TO DIV -------------------- */
	function filterPath(string) {
	    return string
		.replace(/^\//,'')  
		.replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
		.replace(/\/$/,'');
	}
		$('a[href^=#]').each(function() {
			if ( filterPath(location.pathname) == filterPath(this.pathname)
				&& location.hostname == this.hostname
				&& this.hash.replace(/#/,'') ) {
					var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
					var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
					if ($target) {
						var targetOffset = $target.offset().top;
						$(this).click(function() {
							$('html, body').animate({scrollTop: targetOffset}, 900);
							return false;
						});
					}
				}
		});
/* -------------------- END SCROLL TO DIV ------------------- */ 
/* ---------------------------------------------------------- */ 
});

The CSS file (style.css)

/* ------------------------------------------ */
/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
/* ------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica, Arial, sans-serif; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/* END RESET */

/* ------------------------------------------ */
/* PAGE STRUCTURE */
/* ------------------------------------------ */
#page-wrap {
	width: 500px;
	font-size: 13px;
	margin: 0 auto;
}

#logo {
	background: url(images/logo2.jpg) no-repeat;
	margin: 0 auto;
	text-indent: -9999px;
	width: 500px;
	height: 250px;
}

#welcome {
	margin: 10px 0 0 0;
	font-size: 13px;
}

#sample1 {
	position: relative;
	font-family: Georgia, serif;
	font-size: 12px;
}

#sample2 {
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
}

#sample3 {
	position: relative;
	font-family: Courier, monospace;
	font-size: 13px;
}

#sample4 {
	position: relative;
	font-family: 'Comic Sans MS', cursive;
	font-size: 14px;
}


#footer {
	position: relative;
	width: 500px;
	border-bottom: #000 3px solid;
}

.continue {
	text-align: center;
}

.continue a {
	display: block;
	padding: 2px 2px 2px 2px;
	text-decoration: none;
	background: #b3b0a1;
	color: #000;
}

.continue a:hover {
	background: #000;
	color: #fff;
}

.space {
	height: 300px;
}

.serif {
	font-family: Georgia, serif;
	font-size: 12px;
}

.sansserif {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

.monospace {
	font-family: Courier, monospace;
	font-size: 12px;
}

.cursive {
	font-family: 'Comic Sans MS', cursive;
	font-size: 12px;
}

.size {
	font-size: 20px;
}

.color {
	color: #ff0000;
}

.stopwatch {
	position: relative;
	width: 500px;
	margin-bottom: 20px;
}

And the HTML file (experiment.html)

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	
	<title>Legibility and Readability:  An experiment exploring typography</title>
	
	<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
	<link rel=\"stylesheet\" type=\"text/css\" href=\"form.css\" />
	<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js\"></script>
	<script type=\"text/javascript\" src=\"js/handlers.js\"></script>
	<script type=\"text/javascript\" src=\"js/stopwatch.js\"></script>
</head>

<body>

	<div id=\"page-wrap\">

		<h1 id=\"logo\">Font Legibility and Readability Experiment</h1>
		
		<p class=\"continue\"><a href=\"#first\">Click Here to Begin...</a></p>
		
		<div class=\"space\"></div>
		<div class=\"space\">
			<a name=\"first\">
		</div>
		
		<div id=\"sample1\">
			<a name=\"first\">
			
			<p>I am almost ashamed, dear Peter Giles, to be sending you this little book about the state of Utopia, now that nearly a year has gone by.  I’m sure you thought it would take me six weeks at the outside.  After all, you knew there were no painstaking researches involved, and I did not even have to work out how to arrange my materials.  All I had to do was repeat what you and I both heard Raphael Hythloday report.  There was no point in polishing the prose, for it would have been unrealistic if I had made him speak.</p>
			
			<div class=\"stopwatch\">
				<p>
					<button id=\"start1\">Start</button>
					<button id=\"reset1\" disabled=\"true\">Stop</button>
				</p>
				<p class=\"continue\"><a href=\"#second\">Next Sample Paragraph...</a></p>
			</div>
		
		</div>
		
		<div class=\"space\">
			<a name=\"second\">
		</div>
		
		<div id=\"sample2\">			
			
			<p>I confess, dear Peter, that so much of the work was already done that there was scarcely anything left for me to do.  Of course if I had been obliged to think for myself, or to decide how to organize the material, I might have had to invest a good deal of time and effort, even assuming I had the necessary intelligence and learning.  And if I had been obliged to produce something that was not merely accurate but eloquent, then I know I couldn’t have done it, no matter how hard and long I tried. </p>
			
				<div class=\"stopwatch\">
				<p>
					<button id=\"start2\">Start</button>
					<button id=\"reset2\" disabled=\"true\">Stop</button>
				</p>
				<p class=\"continue\"><a href=\"#third\">Next Sample Paragraph...</a></p>
			</div>
			
		</div>
		
		<div class=\"space\">
			<a name=\"third\">
		</div>
		
		<div id=\"sample3\">			
			
			<p>Yet it was almost impossible for me to complete even this straightforward task because my other occupations left me without a moment to myself.  The law takes up almost all my time.  Sometimes I’m acting on behalf of a client, sometimes settling a dispute, either because I’ve been appointed to arbitrate or because the case has come before me in court.  I have to call on some people out of politeness and visit others on business.  I’m out almost all day long dealing with other people’s concerns, and in the time that’s left I get on with my own.</p>
			
				<div class=\"stopwatch\">
				<p>
					<button id=\"start3\">Start</button>
					<button id=\"reset3\" disabled=\"true\">Stop</button>
				</p>
				<p class=\"continue\"><a href=\"#forth\">Last Sample Paragraph...</a></p>
			</div>
			
		</div>
		
		<div class=\"space\">
			<a name=\"forth\">
		</div>
		
		<div id=\"sample4\">			
			
			<p>Even when I return home, I must chat with my wife, amuse my children, and talk to my employees.  All these I think of as chores that have to be done. At least they have to be done unless you’re prepared to discover that you’re a stranger in your own home.  In any case, we are all under an obligation to be as pleasant as possible to those with whom we share our lives, no matter whether we are linked to them by blood, by choice, or by chance, provided of course we don’t spoil them with kindness.</p>
			
			<div class=\"stopwatch\">
				<p>
					<button id=\"start4\">Start</button>
					<button id=\"reset4\" disabled=\"true\">Stop</button>
				</p>
				<p class=\"continue\"><a href=\"#submit-form\">Click Here to Continue...</a></p>
			</div>
		
		</div>			
		
		<div class=\"space\">
			<a name=\"submit-form\">
		</div>
		
		<div id=\"form\">
			
			<form action=\"null.html\" method=\"post\">
				<h3>Basic Information</h3>
				<fieldset>	
					<label class=\"field-first\">Reading Sample #1<input type=\"text\" id=\"timesample1\" name=\"first_name\" value=\"\" readonly=\"readonly\" /></label>
					<label class=\"field-last\">Reading Sample #2<input type=\"text\" id=\"timesample2\" name=\"last_name\" value=\"\" readonly=\"readonly\"/></label>
					<label class=\"field-first\">Reading Sample #3<input type=\"text\" id=\"timesample3\" name=\"first_name\" value=\"\" readonly=\"readonly\"/></label>
					<label class=\"field-last\">Reading Sample #4<input type=\"text\" id=\"timesample4\" name=\"last_name\" value=\"\" readonly=\"readonly\"/></label>
					<label class=\"field-first\">Screen Resolution<input type=\"text\" id=\"screenres\" name=\"screen_res\" value=\"\" readonly=\"readonly\"/></label>
					<label class=\"field-last\">Type of Monitor (CRT/LCD)<input type=\"text\" id=\"monitor\" name=\"monitor\" value=\"\" /></label>
				</fieldset>
				<h3>Favorite Font/Font Family?</h3>
				<fieldset>
					<input id=\"radiobutton_1\" type=\"radio\" name=\"radiobutton_type\" value=\"\" />
					<label class=\"radioitem\" for=\"radiobutton_1\"><span class=\"serif\">Georgia (Serif)</span></label>
					<input id=\"radiobutton_2\" type=\"radio\" name=\"radiobutton_type\" value=\"\" />
					<label class=\"radioitem\" for=\"radiobutton_2\"><span class=\"sansserif\">Verdana (Sans-serif)</span></label>
					<input id=\"radiobutton_3\" type=\"radio\" name=\"radiobutton_type\" value=\"\" />
					<label class=\"radioitem\" for=\"radiobutton_3\"><span class=\"monospace\">Courier (Monospace)</span></label>
					<input id=\"radiobutton_4\" type=\"radio\" name=\"radiobutton_type\" value=\"\" />
					<label class=\"radioitem\" for=\"radiobutton_4\"><span class=\"cursive\">Comic Sans MS (Cursive)</span></label>
				</fieldset>
				<h3>Submit Your Results!</h3>
				<fieldset>
					<label>Click Submit to complete the survey!</label>
					<input type=\"submit\" name=\"submit\" value=\"SUBMIT\" />
					<input type=\"hidden\" name=\"submitted\" value=\"TRUE\" />
				</fieldset>
			</form>		
		
		</div>
		
		<div id=\"footer\"></div>
		
	</div>
	
</body>
</html>

synic

Edit: Well, I guess it's not that chunk of code that's causing the problems. I commented that out and I still don't see the #sample1 and #sample4 div's in IE7. Wtf :(

Edit #2: I don't think it has to do with the JavaScript files at all. And it seems like the divs are there, just not being displayed. Ugh.

Robskiwarrior

"synic" said:
Edit: Well, I guess it's not that chunk of code that's causing the problems. I commented that out and I still don't see the #sample1 and #sample4 div's in IE7. Wtf :(

Edit #2: I don't think it has to do with the JavaScript files at all. And it seems like the divs are there, just not being displayed. Ugh.

hehe thats what I was just going to ask :D

Right I have to take the kids to school but on my return I shall have a look at helping you beat back the evils of IE... :)

Edit: Do you have a live link anywhere?

synic

It's ok, I ended up doing something else that eliminated the problem completely.

treehouse : what would you like to learn today?

Forums

jQuery + IE7 = Bad