French language flag Graphical round box made easier...

Get ready

  1. Download a copy of DOMAssistant library.

  2. Download boxIt zip file and unzip it on a local directory.

  3. 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.


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 examples for the boxItLauncher file :
Code in the launcherEffet 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).


By default

Top and left borders only (cornerEnding === 1)

Top and left borders only (cornerEnding omitted)

All borders except for the top (cornerEnding === 1)

All borders except for the top (cornerEnding omitted)


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 : container with top-right-corner background image
.round_cadre 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 : container with bottom-right-corner background image
.round_cadre 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.



#classesMultiples { border: 1px solid #fff; }
.testMultiples { width: 200px; }
.test_bg_black { background: #000; color: #fff; }
.test_bg_blue { background: #516BFF; color: #FFF152; }

<p id="classesMultiples" class="testMultiples test_bg_black cnt_test_bg_blue">Test</p>

Result :


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.

© iFacta Project - 2008