Click here to Skip to main content
15,881,852 members
Articles / All Topics
Technical Blog

jQuery Floatbox

Rate me:
Please Sign up or sign in to vote.
1.00/5 (1 vote)
3 Dec 2012CPOL1 min read 11K   2   2
A jQuery floatbox.

Making a box on the web page was not an easy thing. Now there are many open sources for doing this thing. ITDoc has also created a jQuery plug-in to deal with this thing. It is named as floatbox. It is available at github. The code that is written to make it up is not a very strange technique. It also provide an easy usage. After source code is included the only two parameters are required. The first parameter value includes left, right and center is for aligning on the horizontal line. The second parameter is among top, bottom, and middle is for aligning on the vertical line.

In order to use it first download the code form github. After downloading put floatbox.js in the appropriate place. Then you may use your own jQuery library file or the one included with the code.

First, add the jQuery source in the html page on the top before floatbox.js. Second, add the floatbox.js plug-in file in the page after the jQuery library. Note that jQuery must come first because it is the core library. Add finally, add the script to call floatbox method for any element that is wanted to be float on the page.

You may see the code for more comprehension.

XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="floatbox.js"></script>
<script>
	$(document).ready(function(e) {
        $("#float").floatbox("left","middle");
    });
</script>
</head>

<body>
	<div style="background:blue;height:1000px;width:800px;">

    </div>
    <div id="float" style="width:300px;height:100px;background-color:#0F3;">
    	Helo everybody
    </div>
</body>
</html>

The file is also included with the code.

This article was originally posted at http://www.itdoc.org/2012/11/30/jquery-floatbox

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Suggestion[My vote of 1] No screenshota? No sample code? Pin
Andre Sanches (alvs)11-Dec-12 11:42
Andre Sanches (alvs)11-Dec-12 11:42 
GeneralRe: [My vote of 1] No screenshota? No sample code? Pin
Member 82920218-Jan-13 18:55
Member 82920218-Jan-13 18:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.