Bug Tracker

Ticket #4869: width_anomalies.html

File width_anomalies.html, 1.7 KB (added by patrickwhalen, 11 years ago)
Line 
1<html>
2<head>
3<title>tester page</title>     
4       
5        <style> 
6            <!--
7                       
8                        #outer {
9                                border: 2px solid orange;
10                                float: left;
11                        }
12                       
13                       
14                       
15                       
16                        .explanation {
17                                padding: 5px;
18                                color: #555;
19                        }
20                       
21       
22            -->
23         </style>
24       
25       
26       
27        <script src="http://www.google.com/jsapi"></script>
28        <script type="text/javascript">google.load("jquery", "1.3.2");</script>
29        <script type="text/javascript">google.load("jqueryui", "1.7.1");</script>
30
31       
32       
33       
34        <script type="text/javascript"> 
35       
36//      var $q =jQuery.noConflict();
37                $('document').ready(function() {
38                       
39                        $('#start').click(function() {
40                                var theWidth = $('#outer').width();
41                                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).');
42                                $('#outer').css({width: theWidth})
43                        });
44                       
45                       
46                });
47       
48        </script>
49       
50       
51</head>
52<body>
53       
54        <div id='outer'>This is text inside of the 'outer' div</div>
55       
56        <div id='start' style="cursor: pointer; color: blue; text-decoration: underline; padding: 20px; clear: both;">Start</div>
57       
58       
59       
60       
61        <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>
62        <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>
63        <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>
64        <div class='explanation'>In ie, if you continue to click 'Start', the width will be reduced with each click.</div>
65</body>
66</html>