jQuery Footer Right Box Collapse and Expand | Lessoncup Programming Blog

Friday, 28 February 2014

jQuery Footer Right Box Collapse and Expand

Hi, today i am going to tell you about how to develop a footer collapse and expanded fixed box with sound effect using jquery this is very regular app visible in many sites we can keep many things inside this box, it is very easy to develop. let's see the process to develop this small app


HTML

<audio id="sound">
    <source src="sounds/glass_ping.mp3" type="audio/mpeg">
   <source src="sounds/glass_ping.ogg" type="audio/ogg">
  Your browser does not support the audio element. </audio>
<div id="footer">

<a class="open" href="javascript:void(0)">
<span>Open</span>
</a>

<a class="close" href="javascript:void(0)">
<span>Close</span>
</a>
        
<div id="content">
Lessopcup is a place to learn and grow your web programming skills and share your comments to give help them  who are looking into this awesome creative WEB Programming World.
</div>

</div>


CSS

write the styles to footer box to align at right side bottom corner  position to be fixed and take two classes for open title and close title
<style>

#footer{
position:fixed; bottom:-151px; right:0;
}

.open{
display:block;
overflow:hidden;
padding:0 10px 0 8px;
float:right;
text-decoration:none;
line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;background-color:#464646;-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);
}

.close{
display:none;
overflow:hidden;
padding:0 10px 0 8px;
float:right;
text-decoration:none;
line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;background-color:#464646;-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);
}

#footer span{background:url('images/icons.png') 0 -77px no-repeat;padding-left:15px;
}

#footer a:hover span{
color:#ffffff;background-position:0 -117px;
}


#content{
background:#464646; line-height:20px; font-size:12px;color:#0CF;padding:15px;width:200px;margin-top:27px;-moz-border-radius:2px 0 0 0;-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);
}


</style>


JAVASCRIPT

write the click function on open button as a selector inside the function just animate the footer box div to 0 pixel from bottom make the sound track using play() method and hide the open button and show the close button to change the event.

write one more click function on close button to move the footer box div 0 position to previous position and hide the close button and show the open button
<script>

$(document).ready(function(){
 
 $('.open').click(function(){
  
  $('#footer').animate({bottom:0});
  $('#sound')[0].play();
  $(this).hide();
  $('.close').show();

 });
 
 $('.close').click(function(){
  
  $('#footer').animate({bottom:"-151px"});
  $(this).hide();
  $('.open').show();

 });

 
});
</script>

Live Demo   Download Script

2 comments :

  1. Can anyone explain what I'm doing wrong? Internet exploder has the content floating to the extreme left... http://dev.2hoffshore.com/test.html

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons