Last updated: 22 Mar 2012
Absolute Floating Menu as jQuery plugin
Absolute Floating Menu script is also a jQuery plugin right out of the box (in addition to standalone mode). When the script code is loaded, if jQuery was loaded before that (even in when noConflict() is used), Absolute floating menu will register itself as jQuery plugin.Also available:
jQuery floating DIV demonstration
Look for the floating box somewhere on the page.Using the javascript
To use the script as a jQuery plugin perform the following steps:-
Download, put on your server and reference jQuery
library in HTML
HEAD
. -
Download version 1.12
of the script code and put it on your server as a separate file and reference it in your page header
after jQuery library.
Please don't reference www.jtricks.com directly from your HTML code, upload it to your server instead.
For example:
<script type="text/javascript" src="/js/jquery-min-1.4.4.js"></script> <script type="text/javascript" src="/js/floating-1.12.js"></script>
- Create a DIV element which contains the menu markup and add script start code. For example:
<div id="floatdiv" style=" position:absolute; width:200px;height:50px;top:10px;right:10px; padding:16px;background:#FFFFFF; border:2px solid #2266AA; z-index:100"> This is a floating javascript menu. </div> <script type="text/javascript"> jQuery(document).ready(function($) ( { $('#floatdiv').addFloating( { targetRight: 10, targetTop: 10, snap: true }); }); </script>
- Other options for floating are shown here.
- Make sure your page has
DOCTYPE
set. It doesn't matter if it isHTML 4.01
orXHTML
, but the script will fail to work if Internet Explorer is in quirks mode. - Be sure to verify page design with the Javascript turned off.
- If all else fails, use script support services.
Donations and Script Rating
If you like our script, please |