Simple floating div using jQuery

Posted: December 27, 2012 in Uncategorized
//Without any jQuery plugins you can float a  html element on your we page.
//Here we are taking example of a div element.
//You can place that div anywhere according to your requirements.
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8221; type=”text/javascript”></script>
<script language=”javascript”>
$(document).ready(function(){
         //on window scroll fire it will call a function.
$(window).scroll(function () {
         //after window scroll fire it will add define pixel added to that element.
set = $(document).scrollTop()+”px”;
        //this is the jQuery animate function to fixed the div position after scrolling.
$(‘#floatDiv’).animate({top:set},{duration:1000,queue:false});
});
});
</script>
<style type=”text/css”>
body .divMain{
height:6000px !important;
background-color:yellow;
overflow:auto;
}
.divMain #floatDiv {
position:absolute;
left:50%;
margin-top:200px;
margin-left:-200px;
width:200px;
height:200px;
background-color: red;
}

</style>
</head>
<body>
<div>
<div id=”floatDiv”>
</div>
</div>
</body>
</html>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s