jQuery Smart Banners | Lessoncup Programming Blog

Tuesday, 4 March 2014

jQuery Smart Banners

Hi, today i am going to tell you about how to create a Facebook like smart banners using jQuery, the smart banners advantage is to show the special or paid banners and ads to end of the window scroll at top position, let's see how to develop a small script


HTML

in html just take the div's and align them to left side and right side, inside the right side DIV take banner box's to be show and give them ID names like banner and smartBanner
<div id="main">

<div id="left">

<h3>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. 
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 !!!<br><br>


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. 
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 !!!<br><br>

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. 
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 !!!<br>
<br>
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. 
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 !!!
</h3>

</div>

<div id="right">

<div id="banner">

<h2>Suggested Groups</h2>

<ul>
<li><span>Web Design</span> <br>
Plus
Sagar Gangavane and 2 other friends joined
Join Group</li>
<li><span>Code Igniter PHP Framework</span><br>

ICorethink WebTechnologies and 10 other friends joined</li>
<li><span>Laravel | Framework | Community</span><br>

Riaz Ak Surkhab and 12 other friends joined</li>
</ul>

</div>

<div id="smartBanner">


<h2>Sponsored</h2>

<ul>
<li>

<span>
T-Shirts under Rs. 299</span>
junglee.com

Find 2,000+ designs in T-shirts at Rs. 299 or less from across websites. Explore now!

</li>

<li>

<span>T-Shirts under Rs. 299</span>
junglee.com

Find 2,000+ designs in T-shirts at Rs. 299 or less from across websites. Explore now!

</li>

<li>

<span>T-Shirts under Rs. 299</span>
junglee.com

Find 2,000+ designs in T-shirts at Rs. 299 or less from across websites. Explore now!

</li>
</ul>

</div>

</div>

</div>


CSS

in css style the DIV's with proper alignments
<style>

#main{
width:960px;height:1100px; background-color:#FFF; margin:0 auto; margin-top:60px;
}

#left{width:700px; height:500px; float:left;}

#left h3{font-size:12px; line-height:24px; margin:10px;}

#right{width:260px; height:auto;float:left;}

#banner{width:260px; height:200px; border-bottom:solid  #F7F7F7 1px;}

#banner h2{margin:0; padding:5px; background-color:#F60; font-size:12px; color:#FFF; font-weight:700; border-top:solid #EBEBEB 1px;}


#banner ul{margin:0; padding:5px;}

#banner li{list-style:none; padding:5px; font-size:12px; color:#666;}

#banner span{color:#09C; font-weight:bold;}

#banner h3{color:#09C; font-weight:bold; padding:10px;}

#smartBanner ul{margin:0; padding:5px;}

#smartBanner h2{margin:0; padding:5px; background-color:#F7F7F7; font-size:12px; color:#999; font-weight:700; border-top:solid #EBEBEB 1px;}

#smartBanner li{list-style:none; padding:5px; font-size:12px; color:#666;}

#smartBanner span{color:#09C; font-weight:bold;}

</style>

JAVASCRIPT

here inside the ready function get the #smartBanner top position using offset() method, now write the scroll() function to window, inside the function get the top position of window using scrollTop() method

now write the if condition to fix the #smartBanner to top position, if the window scroll top position reach to #smartBanner top position set the #banner div position to fixed and top position to 0

in second condition if the window scroll top position less to #smartBanner top position change the banner DIV position fixed to relative and assign the #smartBanner top position to banner top position
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 var smartBanner = $('#smartBanner').offset().top;
 
 
 $(window).scroll(function(){
  
  var woindowScroll= $(window).scrollTop();
  
  if  (woindowScroll > smartBanner){
   
     $("#banner").css("position", "fixed");
     
     $("#banner").css("top", "0");
     
  }
  
  if  (woindowScroll <= smartBanner){
   
     $("#banner").css("position", "relative");
     
     $("#banner").css("top", $("#smartBanner").offset);
     

  }
 });
 

 
});
</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