Bug Tracker

Ticket #4724: offset.html

File offset.html, 2.0 KB (added by smiller.health, 14 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title>Offset Zoom Test Case</title>
5    <style type="text/css">
6        body
7        {
8            cursor: pointer;
9        }
10        #ClickHere
11        {
12            margin-left: 105px;
13            border: solid 2px Navy;
14            color:Navy;
15        }
16        div.block
17        {
18            background-color: Red;
19            border: solid 1px Black;
20            width: 50px;
21            height: 50px;
22            position: absolute;
23            top: 0px;
24            left: 0px;
25            font-size: .65em;
26        }
27    </style>
28
29    <script type="text/javascript" src="jquery-1.3.2.js"> </script>
30
31    <script type="text/javascript" language="javascript">
32        var clickCounter = 0;
33        $(document).ready(function() {
34            $("body").click(function(e) {
35                var oldElement = $("#block" + clickCounter);
36                clickCounter++;
37                var id = "block" + clickCounter;
38                var newElement = $("<div class='block' id='" + id + "'></div>");
39                $("body").append(newElement);
40                var offset = oldElement.offset();
41                var left = offset.left + oldElement.width();
42                var top = offset.top + oldElement.height();
43                newElement.css("top", top + "px");
44                newElement.css("left", left + "px");
45                newElement.html(clickCounter + "<br />(" + left + ", " + top + ")");
46            });
47        });
48       
49    </script>
50
51</head>
52<body>
53    <div id="ClickHere">
54        Click Here to create another block. This will should create a box to appear under
55        and to the right of the last box created. Change the Zoom level to something other
56        than 100% in IE7 and observe the undesired behavior.</div>
57    <div id="block0" class="block">0</div>
58</body>
59</html>