CODEWITHSUNDEEP
javascriptjqueryajax
user4082764
user4082764

Reputation:

Click to show detail using Jquery and ajax

I have one question about popup slide. I want to do as in the picture:

enter image description here

So i am using this for click to show post detail:

function getAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) return true;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) alert(xhr.status);
    infoBox.innerHTML = xhr.responseText;
  };
  xhr.open("GET", "get_post_info.php?msg_id=" + id, true);
  xhr.send(null);
  return false;
}

This is link:

<a href="get_post_info.php?msg_id=351" class="" onclick="return getAreaInfo(351);" data-id="7"> Click To Show Post Details </a>

Showing the details div:

<div id="infoBox"></div>

Upvotes: 0

Views: 1273

Answers (1)

jmore009
jmore009

Reputation: 12933

To do this I would use a container set to position: fixed with a sidebar menu inside set to position: absolute and placed off the screen:

HTML

<div class="sidebar">
   <div class="sidebar-content">
     ...content...
   </div>
</div>

CSS

 .sidebar{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
}

.sidebar-content{
    position: absolute;
    width: 200px;
    height: 100%;
    right: -200px;
    background: #FFF;
}

I would also add the id of the record you wish to pull with ajax as a data attribute on the profile image

<div class="profile-photo" data-id="1"></div>

Then set up your click events:

First on clicking the profile image, pull the corresponding id and make an ajax call to your database to retrieve the record. On success show the overlay and slide out the sidebar now filled with the content from the database:

$(".photo").click(function(){
   var id = $(this).data("id");

   $.ajax({
     url: "your_url.php?="+id,
     type: 'get',
   }).done(function(data) {
      $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);   
   });

});

You can then create a click function to close your sidemenu when you click the background:

$(".sidebar").click(function(){
   $(".sidebar-content").animate({"right":"-200px"},200,function(){
      $(".sidebar").fadeOut();   
   });     
});

And one to prevent the menu from closing if you're inside the actual menu

$(".sidebar-content").click(function(e){ 
   e.stopPropagation();
});

FIDDLE

Upvotes: 0

Related Questions