DOMAssistant.boxIt
Graphical round box made easier...
Get ready
Download a copy of DOMAssistant library.
Download boxIt zip file and unzip it on a local directory.
On your page header, insert the following lines :
<link rel="stylesheet" type="text/css" href="lib/css/DOMAssistant-boxIt.css" />
<script type="text/javascript" src="lib/js/DOMAssistantCompressed-2.7.js"></script>
<script type="text/javascript" src="lib/js/DOMAssistant-boxIt.plugin.js"></script>
<script type="text/javascript" src="lib/js/boxItLauncher.js"></script>
Check that "lib/js/" et "lib/css/" have been modified accordingly to the relative url of your scripts and stylesheets directories.
Notice
Excepting stylesheet, which can be inserted before or after the scripts, the insertion order must be the same as described above.
Box coding
On the page
Except for <img /> and <span></span> tags, areas you may want to transform must suit with block-type tags.
There's no particular rules for coding boxes on the page : it only depends on the content of your boxItLauncher.js file.
| Code in the launcher | Effet attendu |
|---|---|
$("p").boxIt() |
Create a box around each paragraph of the page |
$("p#test").boxIt() |
Create a box around the paragraph which has "test" ID |
$("div.test").boxIt() |
Create a box around each DIV blocks which has "test" css className |
$(".test").boxIt().className += " reussi" |
Create a box around each DIV block which has "test" css className and add it "reussi" className. |
For more detailed description of css selectors, read the DOMAssistant documentation
The boxIt() method
Calling the method boxIt([t,r,b,l[,cornerEnding]]) on a DOM element reference collection creates a box structure around this element.
This call has to be done after the DOM has been loaded and is made effective, in the boxItLauncher.js file, by calling the DOMAssistant.DOMReady() method. (Using window.onload() only starts it after the page content is loaded, doing all modifications visibles during the process...)
Returned value
BoxIt method returns a DOM element reference collection of the created blocks-containers (div.round_cadre), you can then apply additional methods to it (You can see the 4th example of the "Code examples for the boxItLauncher file" array).
Borders definitions
By default, 4 borders are visibles. However, you can specify which ones have to appear, passing to the method 0 (hide) or 1 (show) argument according to each border.
Order of these arguments is the same as in CSS border coding : top, right, bottom, left.
"Forgotten" arguments are considered to be 1. (visible).
Examples
boxIt()boxIt(1,0,0,1,1)boxIt(1,0,0)boxIt(0,1,1,1,1)boxIt(0)Styles
Basic styles
.round_cadre : general block container (additional styles can be applied on it)
.round_cadre div.gCont : container with right-border background image
.round_cadre div.topCont : container with top-border background image
.round_cadre div.top : container with top-right-corner background image
.round_cadre div.top div : container with top-left-corner background image
.round_cadre div.midCont : central container with left-border background image. It will receive initial content.
.round_cadre div.botCont : container with bottom-border background image
.round_cadre div.bot : container with bottom-right-corner background image
.round_cadre div.bot div : container with bottom-left-corner background image
Multiple classNames
If you have to apply boxIt to an element on which other classNames are already defined, they will be inherited by the boxes' global container.
This action can be modified whith adding prefix "cnt_" to the desired className : in this case, className will be applied to the initial element (inside the box).
The ID, however, will always remain attached to the initial element.
Example
boxItLauncher.js
$("#classesMultiples").boxIt();
CSS :
#classesMultiples { border: 1px solid #fff; }
.testMultiples { width: 200px; }
.test_bg_black { background: #000; color: #fff; }
.test_bg_blue { background: #516BFF; color: #FFF152; }
HTML :
<p id="classesMultiples" class="testMultiples test_bg_black cnt_test_bg_blue">Test</p>
Result :
Test
Nested boxes rules
If you want to create nested boxes with different styles, make sure to place, into your DOMAssistant-boxIt.css stylesheet, style définitions for "mothers-boxes" before those for "children-boxes", unless only the "moher-box" style (last defined on the stylesheet) will be used for all.
© 
- 2008