Bug Tracker

Ticket #5440: css_sizing.htm

File css_sizing.htm, 2.1 KB (added by Ollie, 10 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title>jQuery CSS Sizing and Positioning</title>
5    <script type="text/javascript" src="../jquery-1.3.2.js"></script>
6    <script type="text/javascript">
7        $("document").ready(function(){
8                        $("p:first").css("font-size","2em");
9                        alert("The first paragraphs font-size is " + $("p:first").css("font-size"));
10                });
11        $(function() {
12                    $("#height").html($("#theDiv").height());
13            $("#width").html($("#theDiv").width());
14            $("#innerH").html($("#theDiv").innerHeight());
15            $("#innerW").html($("#theDiv").innerWidth());
16            $("#outerH").html($("#theDiv").outerHeight());
17            $("#outerW").html($("#theDiv").outerWidth());
18            $("#offset").html($("#theDiv").offset().top + ", " + $("#theDiv").offset().left);
19            $("#position").html($("#theDiv").position().top + ", " + $("#theDiv").position().left);
20        });
21    </script>
22    <style type="text/css">
23        div#theDiv {
24            width: 250px;
25            height: 180px;
26            margin: 10px;
27            padding: 20px;
28            background: blue;
29            border: 2px solid black;
30            cursor: pointer;
31        }
32        p, span {
33                        font-size: 1.25em;
34/*
35            font-size: 16pt;
36*/
37        }
38    </style>
39</head>
40<body>
41    <p>
42        Using jQuery to compute element size and position</p>
43    <div id="theDiv">
44    </div>
45    <div><span>Height: </span><span id="height"></span></div>
46    <div><span>Width: </span><span id="width"></span></div>
47    <div><span>innerHeight: </span><span id="innerH"></span></div>
48    <div><span>innerWidth: </span><span id="innerW"></span></div>
49    <div><span>outerHeight: </span><span id="outerH"></span></div>
50    <div><span>outerWidth: </span><span id="outerW"></span></div>
51    <div><span>offset: </span><span id="offset"></span></div>
52    <div><span>position: </span><span id="position"></span></div>
53</body>
54</html>