Look at the bottom of the page div floating !! you can close the div by clicking the right top close button
You can change the appearience and the position of the div by changing the css-class property.
 | Jquery Sample Code |
| <script type="text/javascript" language="javascript" src="js/jquery-1.2.6.min.js"></script>
| | 1:
| | 2:<div id="message_box">
| | 3: <img id="close_message" style="float:right;cursor:pointer" src="images/close.png" />
| | 4: This is a floating div sample by Arindam Chakraborty
| | 5:</div>
| | 6:
| | 7:
| | 8:<div>
| | 9: Look at the bottom of the page div floating !! you can close the div by clicking the right top close button <br /><br />
| | 10: You can change the appearience and the position of the div by changing the css-class property.
| | 11:</div>
| | 12:
| | 13:<style type="text/css" >
| | 14:#message_box {
| | 15:bottom: 0; left: 0;
| | 16:z-index: 10;
| | 17:background:#eeffb4;
| | 18:padding:5px;
| | 19:border:1px solid #99c403;
| | 20:text-align:center;
| | 21:width:99%;
| | 22:position: absolute;
| | 23:}
| | 24:
| | 25:</style>
| | 26:
| | 27:<script type="text/javascript" language="javascript" >
| | 28://scroll the message box
| | 29:$(window).scroll(function()
| | 30:{
| | 31: $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 400});
| | 32:});
| | 33:
| | 34:
| | 35:// close the div
| | 36:$('#close_message').click(function()
| | 37:{
| | 38:
| | 39: $('#message_box').animate({ bottom:"+=15px",opacity:0 }, "slow");
| | 40:});
| | 41:</script>
| | 42: |
|