1 <?xml version=
"1.0" encoding=
"utf-8" ?>
2 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
7 <meta name=
"generator" content=
"Docutils 0.4.1: http://docutils.sourceforge.net/" />
8 <title>MochiKit.Style - painless Style manipulation API
</title>
10 <link rel=
"stylesheet" href=
"../../../include/css/documentation.css" type=
"text/css" />
11 <script type=
"text/javascript" src=
"../../../packed/MochiKit/MochiKit.js"></script>
12 <script type=
"text/javascript" src=
"../../js/toc.js"></script>
15 <div class=
"document">
17 <h1><a id=
"name" name=
"name">Name
</a></h1>
18 <p>MochiKit.Style - painless Style manipulation API
</p>
21 <h1><a id=
"synopsis" name=
"synopsis">Synopsis
</a></h1>
22 <pre class=
"literal-block">
23 var messagePos = getElementPosition('message');
24 var messageSize = getElementDimensions('message');
26 var notifyPos = new MochiKit.Style.Coordinates(
27 messagePos.x + messageSize.w +
10,
30 setElementPosition('notify', notifyPos);
34 <h1><a id=
"description" name=
"description">Description
</a></h1>
35 <p>Refactored from
<a class=
"mochiref reference" href=
"DOM.html">MochiKit.DOM
</a>.
</p>
38 <h1><a id=
"dependencies" name=
"dependencies">Dependencies
</a></h1>
40 <li><a class=
"mochiref reference" href=
"Base.html">MochiKit.Base
</a></li>
41 <li><a class=
"mochiref reference" href=
"DOM.html">MochiKit.DOM
</a></li>
45 <h1><a id=
"overview" name=
"overview">Overview
</a></h1>
46 <p>Refactored from
<a class=
"mochiref reference" href=
"DOM.html">MochiKit.DOM
</a>.
</p>
48 <h2><a id=
"element-visibility" name=
"element-visibility">Element Visibility
</a></h2>
49 <p>The
<a class=
"mochiref reference" href=
"#fn-hideelement">hideElement
</a> and
<a class=
"mochiref reference" href=
"#fn-showelement">showElement
</a> functions are
50 provided as a convenience, but only work for elements that are
51 <tt class=
"docutils literal"><span class=
"pre">display:
</span> <span class=
"pre">block
</span></tt>. For a general solution to showing, hiding, and
52 checking the explicit visibility of elements, we recommend using a
53 solution that involves a little CSS. Here's an example:
</p>
54 <pre class=
"literal-block">
55 <style type=
"text/css
">
56 .invisible { display: none; }
59 <script type=
"text/javascript
">
60 function toggleVisible(elem) {
61 toggleElementClass(
"invisible
", elem);
64 function makeVisible(elem) {
65 removeElementClass(elem,
"invisible
");
68 function makeInvisible(elem) {
69 addElementClass(elem,
"invisible
");
72 function isVisible(elem) {
73 // you may also want to check for
74 // getElement(elem).style.display ==
"none
"
75 return !hasElementClass(elem,
"invisible
");
79 <p>MochiKit doesn't ship with such a solution, because there is no
80 reliable and portable method for adding CSS rules on the fly with
85 <h1><a id=
"api-reference" name=
"api-reference">API Reference
</a></h1>
87 <h2><a id=
"functions" name=
"functions">Functions
</a></h2>
89 <a name=
"fn-getstyle"></a>
90 <a class=
"mochidef reference" href=
"#fn-getstyle">getStyle(element, cssSelector)
</a>:
</p>
92 <p>Looks up a CSS property for the given element. The element can be
93 specified as either a string with the element's ID or the element
96 <dt><tt class=
"docutils literal"><span class=
"pre">cssSelector
</span></tt>:
</dt>
97 <dd>The CSS selector, e.g.
<tt class=
"docutils literal"><span class=
"pre">background-color
</span></tt>.
</dd>
98 <dt><em>Availability
</em>:
</dt>
99 <dd>Available in MochiKit
1.4+
</dd>
103 <a name=
"fn-setstyle"></a>
104 <a class=
"mochidef reference" href=
"#fn-setstyle">setStyle(element, styles)
</a>:
</p>
106 <p>Set CSS properties on a the given element. The element can be
107 specified as either a string with the element's ID or the element
109 <dl class=
"docutils">
110 <dt><tt class=
"docutils literal"><span class=
"pre">styles
</span></tt>:
</dt>
111 <dd>Dictionnary holding CSS properties to set, e.g.
112 <tt class=
"docutils literal"><span class=
"pre">{'background-color':
</span> <span class=
"pre">'red',
</span> <span class=
"pre">'opacity':
</span> <span class=
"pre">0.5}
</span></tt>.
</dd>
113 <dt><em>Availability
</em>:
</dt>
114 <dd>Available in MochiKit
1.4+
</dd>
118 <a name=
"fn-setopacity"></a>
119 <a class=
"mochidef reference" href=
"#fn-setopacity">setOpacity(element, opacity)
</a>:
</p>
121 <p>Sets
<tt class=
"docutils literal"><span class=
"pre">opacity
</span></tt> for
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt>. Valid
<tt class=
"docutils literal"><span class=
"pre">opacity
</span></tt> values range
122 from
0 (invisible) to
1 (opaque).
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> is looked up with
123 <a class=
"mochiref reference" href=
"#fn-getelement">getElement
</a>, so string identifiers are also acceptable.
</p>
124 <dl class=
"docutils">
125 <dt><em>Availability
</em>:
</dt>
126 <dd>Available in MochiKit
1.4+
</dd>
130 <a name=
"fn-getelementdimensions"></a>
131 <a class=
"mochidef reference" href=
"#fn-getelementdimensions">getElementDimensions(element)
</a>:
</p>
133 <p>Return the absolute pixel width and height (including padding and border,
134 but not margins) of
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> as an object with
<tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt>
135 properties, or
<tt class=
"docutils literal"><span class=
"pre">undefined
</span></tt> if
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> is not in the document.
136 <tt class=
"docutils literal"><span class=
"pre">element
</span></tt> may be specified as a string to be looked up with
137 <a class=
"mochiref reference" href=
"#fn-getelement">getElement
</a>, a DOM element, or trivially as an object with
138 <tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and/or
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt> properties.
</p>
139 <dl class=
"docutils">
140 <dt><em>Availability
</em>:
</dt>
141 <dd>Available in MochiKit
1.4+
</dd>
145 <a name=
"fn-setelementdimensions"></a>
146 <a class=
"mochidef reference" href=
"#fn-setelementdimensions">setElementDimensions(element, dimensions[, units='px'])
</a>:
</p>
148 <p>Sets the dimensions of
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> in the document from an object
149 with
<tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt> properties.
</p>
150 <p>Warning: IE in quirks-mode seems to behave strange when you set
151 the height off an element containing text to
0. You can workaround this
152 by setting the value of visibly/display.
</p>
153 <dl class=
"docutils">
154 <dt><tt class=
"docutils literal"><span class=
"pre">element
</span></tt>:
</dt>
155 <dd>A reference to the DOM element to update (if a string is
156 given,
<a class=
"mochiref reference" href=
"#fn-getelement">getElement(node)
</a> will be used to locate the
158 <dt><tt class=
"docutils literal"><span class=
"pre">dimensions
</span></tt>:
</dt>
159 <dd>An object with
<tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt> properties. You can also specify only
161 <dt><tt class=
"docutils literal"><span class=
"pre">units
</span></tt>:
</dt>
162 <dd>Optionally set the units to use, default is
<tt class=
"docutils literal"><span class=
"pre">px
</span></tt></dd>
163 <dt><em>Availability
</em>:
</dt>
164 <dd>Available in MochiKit
1.4+
</dd>
168 <a name=
"fn-getelementposition"></a>
169 <a class=
"mochidef reference" href=
"#fn-getelementposition">getElementPosition(element[, relativeTo={x:
0, y:
0}])
</a>:
</p>
171 <p>Return the absolute pixel position of
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> in the document
172 as an object with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt> properties, or
<tt class=
"docutils literal"><span class=
"pre">undefined
</span></tt> if
173 <tt class=
"docutils literal"><span class=
"pre">element
</span></tt> is not in the document.
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> may be specified
174 as a string to be looked up with
<a class=
"mochiref reference" href=
"#fn-getelement">getElement
</a>, a DOM
175 element, or trivially as an object with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and/or
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt>
177 <p>If
<tt class=
"docutils literal"><span class=
"pre">relativeTo
</span></tt> is given, then its coordinates are subtracted
178 from the absolute position of
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt>, e.g.:
</p>
179 <pre class=
"literal-block">
180 var elemPos = getElementPosition(elem);
181 var anotherElemPos = getElementPosition(anotherElem);
182 var relPos = getElementPosition(elem, anotherElem);
183 assert( relPos.x == (elemPos.x - anotherElemPos.x) );
184 assert( relPos.y == (elemPos.y - anotherElemPos.y) );
186 <p><tt class=
"docutils literal"><span class=
"pre">relativeTo
</span></tt> may be specified as a string to be looked up with
187 <a class=
"mochiref reference" href=
"#fn-getelement">getElement
</a>, a DOM element, or trivially as an object
188 with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and/or
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt> properties.
</p>
189 <dl class=
"docutils">
190 <dt><em>Availability
</em>:
</dt>
191 <dd>Available in MochiKit
1.4+
</dd>
195 <a name=
"fn-setelementposition"></a>
196 <a class=
"mochidef reference" href=
"#fn-setelementposition">setElementPosition(element, position[, units='px'])
</a>:
</p>
198 <p>Sets the absolute position of
<tt class=
"docutils literal"><span class=
"pre">element
</span></tt> in the document from an
199 object with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt> properties.
</p>
200 <dl class=
"docutils">
201 <dt><tt class=
"docutils literal"><span class=
"pre">element
</span></tt>:
</dt>
202 <dd>A reference to the DOM element to update (if a string is
203 given,
<a class=
"mochiref reference" href=
"#fn-getelement">getElement(node)
</a> will be used to locate the
205 <dt><tt class=
"docutils literal"><span class=
"pre">position
</span></tt>:
</dt>
206 <dd>An object with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt> properties. You can also specify only
208 <dt><tt class=
"docutils literal"><span class=
"pre">units
</span></tt>:
</dt>
209 <dd>Optionally set the units to use, default is
<tt class=
"docutils literal"><span class=
"pre">px
</span></tt></dd>
210 <dt><em>Availability
</em>:
</dt>
211 <dd>Available in MochiKit
1.4+
</dd>
215 <a name=
"fn-setdisplayforelement"></a>
216 <a class=
"mochidef reference" href=
"#fn-setdisplayforelement">setDisplayForElement(display, element[, ...])
</a>:
</p>
218 <p>Change the
<tt class=
"docutils literal"><span class=
"pre">style.display
</span></tt> for the given element(s). Usually
219 used as the partial forms:
</p>
221 <li><a class=
"mochiref reference" href=
"#fn-showelement">showElement(element, ...)
</a></li>
222 <li><a class=
"mochiref reference" href=
"#fn-hideelement">hideElement(element, ...)
</a></li>
224 <p>Elements are looked up with
<a class=
"mochiref reference" href=
"#fn-getelement">getElement
</a>, so string
225 identifiers are acceptable.
</p>
226 <p>For information about the caveats of using a
<tt class=
"docutils literal"><span class=
"pre">style.display
</span></tt>
227 based show/hide mechanism, and a CSS based alternative, see
228 <a class=
"reference" href=
"#element-visibility">Element Visibility
</a>.
</p>
229 <dl class=
"docutils">
230 <dt><em>Availability
</em>:
</dt>
231 <dd>Available in MochiKit
1.4+
</dd>
235 <a name=
"fn-showelement"></a>
236 <a class=
"mochidef reference" href=
"#fn-showelement">showElement(element, ...)
</a>:
</p>
238 <p>Partial form of
<a class=
"mochiref reference" href=
"#fn-setdisplayforelement">setDisplayForElement
</a>, specifically:
</p>
239 <pre class=
"literal-block">
240 partial(setDisplayForElement,
"block
")
242 <p>For information about the caveats of using a
<tt class=
"docutils literal"><span class=
"pre">style.display
</span></tt>
243 based show/hide mechanism, and a CSS based alternative, see
244 <a class=
"reference" href=
"#element-visibility">Element Visibility
</a>.
</p>
245 <dl class=
"docutils">
246 <dt><em>Availability
</em>:
</dt>
247 <dd>Available in MochiKit
1.4+
</dd>
251 <a name=
"fn-hideelement"></a>
252 <a class=
"mochidef reference" href=
"#fn-hideelement">hideElement(element, ...)
</a>:
</p>
254 <p>Partial form of
<a class=
"mochiref reference" href=
"#fn-setdisplayforelement">setDisplayForElement
</a>, specifically:
</p>
255 <pre class=
"literal-block">
256 partial(setDisplayForElement,
"none
")
258 <p>For information about the caveats of using a
<tt class=
"docutils literal"><span class=
"pre">style.display
</span></tt>
259 based show/hide mechanism, and a CSS based alternative, see
260 <a class=
"reference" href=
"#element-visibility">Element Visibility
</a>.
</p>
261 <dl class=
"docutils">
262 <dt><em>Availability
</em>:
</dt>
263 <dd>Available in MochiKit
1.4+
</dd>
267 <a name=
"fn-getviewportdimensions"></a>
268 <a class=
"mochidef reference" href=
"#fn-getviewportdimensions">getViewportDimensions()
</a>:
</p>
270 <p>Return the pixel width and height of the viewport as an object
271 with
<tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt> properties.
</p>
272 <dl class=
"docutils">
273 <dt><em>Availability
</em>:
</dt>
274 <dd>Available in MochiKit
1.4+
</dd>
278 <a name=
"fn-getviewportposition"></a>
279 <a class=
"mochidef reference" href=
"#fn-getviewportposition">getViewportPosition()
</a>:
</p>
281 <p>Return the pixel position of the viewport inside the window, as a
282 <a class=
"mochiref reference" href=
"#fn-coordinates">Coordinates
</a> object.
</p>
283 <dl class=
"docutils">
284 <dt><em>Availability
</em>:
</dt>
285 <dd>Available in MochiKit
1.4+
</dd>
289 <div class=
"section">
290 <h2><a id=
"objects" name=
"objects">Objects
</a></h2>
292 <a name=
"fn-coordinates"></a>
293 <a class=
"mochidef reference" href=
"#fn-coordinates">Coordinates(x, y)
</a>:
</p>
295 <p>Constructs an object with
<tt class=
"docutils literal"><span class=
"pre">x
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">y
</span></tt> properties.
<tt class=
"docutils literal"><span class=
"pre">obj.toString()
</span></tt>
296 returns something like
<tt class=
"docutils literal"><span class=
"pre">{x:
</span> <span class=
"pre">0,
</span> <span class=
"pre">y:
</span> <span class=
"pre">42}
</span></tt> for debugging.
</p>
297 <dl class=
"docutils">
298 <dt><em>Availability
</em>:
</dt>
299 <dd>Available in MochiKit
1.4+
</dd>
303 <a name=
"fn-dimensions"></a>
304 <a class=
"mochidef reference" href=
"#fn-dimensions">Dimensions(w, h)
</a>:
</p>
306 <p>Constructs an object with
<tt class=
"docutils literal"><span class=
"pre">w
</span></tt> and
<tt class=
"docutils literal"><span class=
"pre">h
</span></tt> properties.
<tt class=
"docutils literal"><span class=
"pre">obj.toString()
</span></tt>
307 returns something like
<tt class=
"docutils literal"><span class=
"pre">{w:
</span> <span class=
"pre">0,
</span> <span class=
"pre">h:
</span> <span class=
"pre">42}
</span></tt> for debugging.
</p>
308 <dl class=
"docutils">
309 <dt><em>Availability
</em>:
</dt>
310 <dd>Available in MochiKit
1.4+
</dd>
315 <div class=
"section">
316 <h1><a id=
"authors" name=
"authors">Authors
</a></h1>
318 <li>Bob Ippolito
<<a class=
"reference" href=
"mailto:bob@redivi.com">bob
@redivi.com
</a>></li>
319 <li>Beau Hartshorne
<<a class=
"reference" href=
"mailto:beau@hartshornesoftware.com">beau
@hartshornesoftware.com
</a>></li>
322 <div class=
"section">
323 <h1><a id=
"copyright" name=
"copyright">Copyright
</a></h1>
324 <p>Copyright
2005-
2006 Bob Ippolito
<<a class=
"reference" href=
"mailto:bob@redivi.com">bob
@redivi.com
</a>>, and Beau Hartshorne
325 <<a class=
"reference" href=
"mailto:beau@hartshornesoftware.com">beau
@hartshornesoftware.com
</a>>. This program is dual-licensed free
326 software; you can redistribute it and/or modify it under the terms of
327 the
<a class=
"reference" href=
"http://www.opensource.org/licenses/mit-license.php">MIT License
</a> or the
<a class=
"reference" href=
"http://www.opensource.org/licenses/afl-2.1.php">Academic Free License v2.1
</a>.
</p>