Bug Tracker

Ticket #4869: width_anomalies.html
File width_anomalies.html, 1.7 KB (added by patrickwhalen, July 08, 2009 08:03PM UTC)
<html>
<head>
<title>tester page</title>	
	
	<style> 
	    <!--
			
			#outer {
				border: 2px solid orange;
				float: left;
			}
			
			
			
			
			.explanation {
				padding: 5px;
				color: #555;
			}
			
	
	    -->
	 </style>
	
	
	
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.3.2");</script>
	<script type="text/javascript">google.load("jqueryui", "1.7.1");</script>

	
	
	
	<script type="text/javascript"> 
	
//	var $q =jQuery.noConflict();
		$('document').ready(function() {
			
			$('#start').click(function() {
				var theWidth = $('#outer').width();
				alert('The outer div\'s width is: ' + theWidth + '\n\nAfter dismissing this alert, jQuery will assign ' + theWidth + ' to the div\'s width (yielding an unexpected result).');
				$('#outer').css({width: theWidth})
			});
			
			
		});
	
	</script>
	
	
</head>
<body>
	
	<div id='outer'>This is text inside of the 'outer' div</div>
	
	<div id='start' style="cursor: pointer; color: blue; text-decoration: underline; padding: 20px; clear: both;">Start</div>
	
	
	
	
	<div class='explanation'>Clicking 'Start' will grab the width of the 'outer' div (with the orange border) and display it in an alert box.</div>
	<div class='explanation'>After the alert is dismissed, that width value will be assigned to 'outer' via $('#outer').css({width: theWidth}); (so nothing should change).</div>
	<div class='explanation'>The trouble in FireFox is that sometimes this will cause the text to wrap, even though the width hasn't actually changed.</div>
	<div class='explanation'>In ie, if you continue to click 'Start', the width will be reduced with each click.</div>
</body>
</html>

Download in other formats:

Original Format