Click here to Skip to main content
11,805,035 members (57,111 online)
Click here to Skip to main content

Tagged as

jQuery Floatbox

, 3 Dec 2012 CPOL 5.5K 2
Rate this:
Please Sign up or sign in to vote.
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<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>
	$(document).ready(function(e) {

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

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

The file is also included with the code.


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


About the Author

Member 8292021
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Suggestion[My vote of 1] No screenshota? No sample code? Pin
Andre Luiz V Sanches11-Dec-12 11:42
memberAndre Luiz V Sanches11-Dec-12 11:42 
GeneralRe: [My vote of 1] No screenshota? No sample code? Pin
Member 82920218-Jan-13 18:55
memberMember 82920218-Jan-13 18:55 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 3 Dec 2012
Article Copyright 2012 by Member 8292021
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid