jQuery Bottom Slide Box | Lessoncup Programming Blog

Wednesday, 6 November 2013

jQuery Bottom Slide Box

Hi, jQuery slide box at bottom, this kind of feature we have seen in may websites, like when we scroll to end of webpage we see some banner or announcements will appear form right side or from bottom side and it will disappear when we scroll up the webpage, i have developed in simple way, the concept same as you seen in my previous lesson jQuery Fixed header



HTML

design a page and put some lengthy content. take any html element ID from bottom of the page.
<div class="slidebox">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="39%" valign="top"><img src="author.jpg"></td>
      <td width="61%" valign="top"><strong>Mohammad Khasim</strong><br>
        Trainer | Programmer | Blogger<br>
<a href="www.lessoncup.com" style="color:#9F0; text-decoration:none;">
www.lessoncup.com</a></td>
    </tr>
  </table>
</div>
<div id="lessoncup">

<div class="header">

<ul>
<li>Html5</li>
<li>Ajax</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySql</li>
<li>CSS</li>
</ul>

</div>

<table width="896" height="1280" border="0" cellpadding="10" cellspacing="5">
  <tr>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
      Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  </table>

</div>
<div style="margin:0 auto;width:400px;font-family:Verdana, Geneva, sans-serif; font-size:9px; color:#CCC; margin-top:10px;" id="cp">(c) Mohammad Khasim Productions - for more lessons<strong>&nbsp;<a href="http://www.lessoncup.com" style="text-transform:lowercase;" target="_blank">www.lessoncup.com</a></strong></div>

CSS

write styles for slide box to give rich look to viewers and set the fixed position, bottom value 0 and move the div to right side from the page, it is so it will not appear in a page.
<style type="text/css">

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#FFF; margin:0; padding:0;}

#lessoncup{width:900px; height:auto;margin:0 auto;}

.header{-webkit-box-shadow: 0px 1px 2px #666; width:180px;
box-shadow: 0px 1px 2px #666;width:900px; height:40px;  background-color:#F60;padding:5px;margin:0 auto; font-family:Arial, Helvetica, sans-serif;font-size:11px;}

.slidebox{-webkit-box-shadow: -5px 2px 2px #666;
box-shadow: -5px 2px 2px #666;width:320px; height:115px;  background-color:#63C;padding:5px;margin:0 auto; border:solid  #60C 5px; 
position:fixed; right:-350px;bottom:0; color:#FFF; font-size:12px; line-height:20px;}


ul{ list-style:none; margin:0; padding:0;}

li{ float:left; padding:5px; margin:5px; color:#FFF;cursor:pointer; font-weight:bold; font-size:14px;}
                
</style>

JAVASCRIPT

use offset().top to get the top values of bottom element, and get the window height using window.height() , here the logic is we need to compare the both positions, if the window height reaches to bottom top value will display the slide box else will send the slide box to the right position.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    
 $(window).scroll(function(){
  
        var bottomElement = $('#cp').offset().top - $(window).height();
  
 var winHeight = $(window).scrollTop();
 
        if  ( winHeight > bottomElement) {
   
            $('.slidebox').animate({'right':'0px'},500);
   
  }else{
   
            $('.slidebox').stop(true).animate({'right':'-350px'},500);
  }
    });
 
   
});
</script>

Live Demo   Download Script

No comments :

Post a Comment

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

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

Get my Latest Lessons