Pages

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>

JAVASCRIPT

here inside the ready function get the #smartBannertopposition 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 #smartBannertop position change the banner DIV position fixed to relative and assign the #smartBanner top position to banner top position