jQuery Remove and Show Ads Like Facebook | Lessoncup Programming Blog

Thursday, 5 December 2013

jQuery Remove and Show Ads Like Facebook

Hi, today i am going to show you how to hide the ad and show a new ad in same place like facebook  we have seen same concept in facebook right side panel where when we remove any ad it will hide and display the new ad in same place, i develop the same concept using jQuery, Ajax and Php, before i started this i thought it is very easy but after start work i hanged for few minutes the ad is hiding but how to show.. 


the new ad in same place then after thinking thinking i got a idea when we click on remove button y can't we replace the old content with new content and i tried with replaceWith() method and it is worked. let us see how the trick is worked.

HTML

take the UL tag inside the div later we will add the other tags using jquery and ajax
<div class="lessoncup">

<ul></ul>

</div>

CSS

in CSS,  style the LI tag to give better look, and write the style for remove button and apply background image remove icon
<style>

.lessoncup{ width:300px; height:auto;border:solid #FFF 10px;font-family:Tahoma, Geneva, sans-serif;font-size:11px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0; padding:0; position:absolute; width:300px;}

.lessoncup ul li{padding:8px 20px 10px 5px;height:50px;color:#3b5998; border-top: 1px solid #e9e9e9;line-height:16px;}

.lessoncup ul li img{width:50px; height:50px; margin:0 5px 5px 0; float:left;}

.remove{position:absolute; right:5px; background-image:url(icons/x.png); width:11px; height:11px; background-repeat:no-repeat;}

.remove:hover{cursor:pointer;background-image:url(icons/x1.png); width:11px; height:11px; background-repeat:no-repeat;}
</style>


JAVASCRIPT

first we need to display some ads so inside the UL tag load the ads.php file,

now write the on function to .remove button because we are accessing live elements,  now using attr() method to get the ID of remove button, now use ajax request to get the new Ad from getad.php file to replace this old Ad, in ajax success function just replace the clicked element data to new data using replaceWith() method
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 $('.lessoncup ul').load('ads.php');
 
 
 $('body').on("click",".remove",function(){
  
  var element = $(this);
  var id = element.attr("id");
  
  $.ajax({
   
   type:"POST",
   url:"getad.php",
   cache:false,
   success:function(msg){
    
    $('#ad'+id).replaceWith(msg);
    
   }
   
   
  });

 });
     
});


</script>

PHP

ads.php in this file write the query using order by rand() to fetch the random records from news table to display the unique ads to unique visitor, and put it into the while loop and keep the query limit to 3
<li style=" background-color:#f2f2f2; color:#666; height:auto; padding:5px; font-weight:bold;">Recommended Pages</li>
<?php
include('db.php');
extract($_REQUEST);
$news=mysql_query('select * from news order by rand() limit 3');
while($full=mysql_fetch_array($news)){
?>

<li id="ad<?php echo $full['nid']?>">
<div id="<?php echo $full['nid']?>" class="remove"></div>

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>
You and 215 other friends like this.

</li>
<?php }?>

getad.php in this file write the query to fetch the random records from news table using order by rand() and keep the limit to 1, if you not give limit, in the place of one Ad it will show all Ads from table
<?php
include('db.php');
extract($_REQUEST);
$news=mysql_query('select * from news order by rand() limit 1');
while($full=mysql_fetch_array($news)){
?>

<li id="ad<?php echo $full['nid']?>">
<div id="<?php echo $full['nid']?>" class="remove"></div>

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>
You and 215 other friends like this.

</li>

<?php }?>

Live Demo   Download Script

1 comment :

  1. hello sire ur code is to good ,but how can i use ur code with outh data base(.db file),if u r frr pls send me to my email:swapana07@gmail.com

    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