Background
jQuery has some methods to get or set the position or width/height of DOM element. For example, $(..).width(), $(..).outerHeight(). But I still feel it's not that convenient to layout DOM elements in flexible manners.
1) One interesting fact is the $(..).position() gets the position of DOM element including margin, while the $(..).offset() gets the position excluding the margin. This can be observed by the below sample:
So, it makes us a little twisted when calculating or setting the bounds for DOM element.
2) $(..).css("border-left-width") can't get the exact border width in pixel. Because sometimes the value we get might be like "thin", "medium" or "Thick".
3) $(..).width(value) and $(..).height(value) can be used to set the CSS width/height of DOM element. But sometimes we actually need to set the width or height of a element from the displaying point of view, which the DOM element may already has padding or border specified.
4) Similar as above, we need methods to get/sets the bounds a DOM element for different requirement, the portion may include or exclude the margins/borders/paddings etc.
For the above reasons, I wrote a class that can help user to layout DOM element in flexible and cross-browser ways.
What are these methods?
Layout class defines 4 categories of methods that help developers to get or set the layout for DOM element. User can determine it by passing proper parameters to methods. They are:
1) Position methods
1: Point GetPosition(DOMElement element, bool absolute, bool margin);
2: Point GetInnerPosition(DOMElement element, bool absolute);
3: Point GetContentPosition(DOMElement element, bool absolute)
4: void SetPosition(DOMElement element, int x, int y);
2) Width/Height methods
1: int GetWidth(DOMElement element, bool margin);
2: void SetWidth(DOMElement element, int width, bool margin);
3: int GetHeight(DOMElement element, bool margin);
4: void SetHeight(DOMElement element, int height, bool margin);
5: int GetInnerWidth(DOMElement element);
6: void SetInnerWidth(DOMElement element, int width);
7: int GetInnerHeight(DOMElement element);
8: void SetInnerHeight(DOMElement element, int height);
9: int GetContentWidth(DOMElement element);
10: void SetContentWidth(DOMElement element, int width);
11: int GetContentHeight(DOMElement element);
12: void SetContentHeight(DOMElement element, int height);
3) Bounds methods
1: Bounds GetBounds(DOMElement element, bool margin);
2: void SetBounds(DOMElement element, Bounds bounds, bool margin);
3: Bounds GetInnerBounds(DOMElement element);
4: void SetInnerBounds(DOMElement element, Bounds bounds);
5: Bounds GetContentBounds(DOMElement element);
6: void SetContentBounds(DOMElement element, Bounds bounds);
4) Box utilities
1: Box GetMarginBox(DOMElement element);
2: Box GetBorderBox(DOMElement element);
3: Box GetPaddingBox(DOMElement element);
4: bool HasBorder(DOMElement element, BoxSide boxSide);
5: float GetMargin(DOMElement element, BoxSide boxSide);
6: float GetBorderWidth(DOMElement element, BoxSide boxSide);
7: float GetPadding(DOMElement element, BoxSide boxSide);
jQuery extension
All those functions can be accessed from jQuery extension. To add them to jQuery extension, you can call the below method:
SpringSys.Web.UI.Layout.extendTojQuery();
Example
Here we write a sample to outlines all the bounds of two DIV elements. Both DIVs has padding, border and margin; The second DIV has border width not in pixel unit.
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head runat="server">
3: <title></title>
4:
5: <style type="text/css">
6: .target
7: {
8: width:120px;
9: height:120px;
10: border:solid 15px #aa2828;
11: margin:10px;
12: padding:20px;
13: position:absolute;
14: }
15:
16: .target2
17: {
18: width:120px;
19: height:120px;
20: border-left:solid thin blue;
21: border-right:solid 1em blue;
22: border-top:solid medium blue;
23: border-bottom:solid thick blue;
24: margin:10px;
25: padding:20px;
26: position:absolute;
27: }
28:
29: .markline
30: {
31: border: solid 1px #55aa55;
32: }
33:
34:
35: </style>
36:
37: </head>
38: <body>
39: <form id="form1" runat="server">
40:
41: <asp:ScriptManager ID="ScriptManager1" runat="server">
42: <Scripts>
43: <asp:ScriptReference Path="~/Scripts/jquery-1.3.2.js"/>
44: <asp:ScriptReference Path="~/Scripts/Layout.debug.js"/>
45: </Scripts>
46: </asp:ScriptManager>
47:
48: <div>
49:
50: <script type="text/javascript">
51: function OutlineTarget(target) {
52: $("<div class='markline'/>").appendTo(document.body).setInnerBounds(target.getBounds(true));
53: $("<div class='markline'/>").appendTo(document.body).setInnerBounds(target.getBounds());
54: $("<div class='markline'/>").appendTo(document.body).setBounds(target.getInnerBounds());
55: $("<div class='markline'/>").appendTo(document.body).setInnerBounds(target.getContentBounds(true));
56: }
57:
58: $(function() {
59: SpringSys.Web.UI.Layout.extendTojQuery();
60: OutlineTarget($("#target"));
61: OutlineTarget($("#target2"));
62: });
63:
64: </script>
65:
66:
67: <div class="target" style="left:20px;top:40px;">Content area is here ...</div>
68: <div class="target" id="target" style="left:20px;top:270px;">Content area is here ...</div>
69: <div class="target2" style="left:450px;top:40px;">Content area is here ...</div>
70: <div class="target2" id="target2" style="left:450px;top:270px;">Content area is here ...</div>
71:
72:
73: </div>
74: </form>
75: </body>
76: </html>
We use green line to outline the correct range in DOM element. After run, we can see the browsing result looks like below:
Download
Click here to get the C# source file of Layout.cs. (Need Scrip# to convert to JavaScript)
Click here to get the Script# project file.
To get the JavaScript file directly, please click here.