SHARE
TWEET

Gotpix.com JQuery/JSON Feed

Ranga14 Sep 18th, 2013 (edited) 21 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(".toggle_feed").click(function(){
  2.                         // Show Layout Connector
  3.                         $(".feed_drop").toggleClass("feed_show").fadeIn(250);
  4.                         // Show Main Container for the feed...
  5.                         $("#FeedContain").toggleClass("feed_show").fadeIn(250)
  6.                         // Show Loader
  7.                         showLoadingImage();
  8.                         var $feed = $("#Feed");
  9.                         // Pull Data
  10.                         $.getJSON("./includes/feed.php", function(result) {
  11.                                 var $elList = $("<ul><li><a><h6></h6><img></a></li><li class='feed_status'></li><li class='feed_date'></li></ul>");
  12.                                 $.each(result, function(i, data) {
  13.                                         $elList.find("h6").text(data['user']);
  14.                                         $elList.find("a").attr("href", "./profile.php?user=" + data['user']);
  15.                                         $elList.find("img").attr("src", "./includes/objects/thumb_resize.php?fileName=" + data['photopath']);
  16.                                         $elList.find(".feed_status").text(data['status']);
  17.                                         $elList.find(".feed_date").text(data['date']);
  18.                                         console.log($elList);
  19.  
  20.                                         $feed.append("<ul>" + $elList.html() + "</ul>");
  21.                                 });
  22.                                 hideLoadingImage();
  23.                                 $("#scrollbar1").mousedown(function() {
  24.                                         $('#scrollbar1').tinyscrollbar_update();
  25.                                 });
  26.                         });
  27.                         // Close the feed onclick
  28.                         $(".feed_close").click(function(){
  29.                                 $(".feed_drop").hide();
  30.                                 $("#FeedContain").hide();
  31.                                 $("#Feed").empty();
  32.                         });
  33.                         $("#scrollbar1").mouseenter(function() {
  34.                                 $('#scrollbar1').tinyscrollbar();
  35.                         });
  36.                         // Close the feed whenever you click out of the container.
  37.                         $(document).mouseup(function (e)
  38.                         {
  39.                                 var container = $("#FeedContain");
  40.                                 var containerDrop = $(".feed_drop");
  41.                        
  42.                                 if (!container.is(e.target) && !containerDrop.is(e.target) // if the target of the click isn't the container...
  43.                                         && container.has(e.target).length === 0 && containerDrop.has(e.target).length === 0) // ... nor a descendant of the container
  44.                                 {
  45.                                         container.hide();
  46.                                         containerDrop.hide();
  47.                                         $("#Feed").empty();
  48.                                 }
  49.                         });
  50.                 });
  51.  
  52.                 // Loader              
  53.                 function showLoadingImage() {
  54.                         $("#Feed").append("<div id='loading-image'><img src='./graphics/ajax-loader.gif' border='0' alt='Loading...'></div>");
  55.                 }
  56.                 function hideLoadingImage() {
  57.                         $("#loading-image").remove();
  58.                 }
  59.         });
RAW Paste Data
Want to get better at JavaScript?
Learn to code JavaScript in 2017
Top