User Interface Techniques: How to create a Floating Div

Feb 28, 2011

How to create a Floating Div

Write this in <head> tag:

<script type="text/javascript" src="/js/jquery-min-1.4.4.js"></script>
<script type="text/javascript" src="/js/floating-1.5.js"></script>

write this in <body> tag:

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

Download jquery here

Download floating js here

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)