jQuery Footer Hanging Bar | Lessoncup Programming Blog

Wednesday, 12 March 2014

jQuery Footer Hanging Bar

Hi, today i am going to tell you about how to place a footer hanging message bar with jQuery in your website, this footer bar will display at end of the bottom and it will scroll as par the scrolling the window, you can also close the message bar by clicking close button. it is just few lines of code let's see how we do this


take one div and give it ID name like #footer_box inside the div take one close image and give a ID name like #closeBtn and keep some text message as you like.
<div id="text"></div>

<div id="footer_box">
<img id="closeBtn" style="float:right;cursor:pointer;"  src="close.png" />
  <p>it is a arena to learn web technologies like jQuery, Ajax, CSS, php, Mysql, JavaScript from basic level to advanced level. visit me @ <a href="http://www.lessoncup.com">www.lessoncup.com</a></p>


write the style to footer box DIV

#text{ width:900px; height:900px;}

#footer_box{ position: absolute;left:0;background:#ffc;padding:5px;border:1px solid #CCCCCC;text-align:center;


here write the scroll function to window inside the function get the top position of window by using scrollTop() method and get the window height using height() method, now animate the #footer_box div using animate() method from top position and keep the animation speed

write the click function on closeBtn to close the footer message box
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>


  var scrollPos=$(window).scrollTop()+$(window).height();
        $('#footer_box').animate({top:scrollPos-86+"px" },{queue: false, duration: 500});  
  $('#footer_box').animate({ top:"-=10px",opacity:0 }, "slow");


Live Demo   Download Script

1 comment :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons