jquery - AJAX call, add loader only when loading posts -


i have ajax call on click on section i'll load posts (the featured images assigned them) category assigned section. works well, except few things.

1: have loader appear when images (from posts) being loaded second div. when loading of posts in div complete, div gets class triggers it's transition, it's visible, loader gets loaded class, , no ajax loader present. but, when click hide second div (gallery), loader appears again, , transition happens. how make on second click won't have loader , have transition hides div immediately?

i'm doing wordpress. ajax looks this.

var $content = $("#gallery"); var $content_inner = $("#inner_gallery"); var $fullpage = $('#fullpage'); var $gallerycat = $('#fullpage').find('.section'); var $close = $('.close'); var $loader = $("#loader");   var catid; var order; var orderby;  $('#fullpage').find('.section').eq(0).addclass('first');  $gallerycat.each(function(){     $(this).on('click', function(){         catid = $(this).data('cat');         order = $(this).data('order');         orderby = $(this).data('orderby');         load_posts(catid, order, orderby);         if(!$(this).hasclass('first')){             $fullpage.toggleclass('galleryshow');         }         if (!$content.hasclass('galleryshow')) {             $content_inner.scrolltop(0);         }     }); });  function load_posts(currentcat, order, orderby){     var str = '&cat=' + currentcat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts';     $content_inner.html();     $.ajax({         type: "post",         datatype   : "html",         url: get_gallery_posts.ajaxurl,         data: str,         success: function(data){             var $data = $(data);             if ($data.length) {                 $content_inner.imagesloaded(function(){                     $content_inner.html(data);                     $content.toggleclass('galleryshow');                 });             }         },         beforesend : function(){             $loader.removeclass('loaded').addclass('loading');         },         error : function(jqxhr, textstatus, errorthrown) {             $loader.html(jqxhr + " :: " + textstatus + " :: " + errorthrown);         },         complete : function(){             $loader.removeclass('loading').addclass('loaded');         }     });     return false; } 

and html looks this:

<div id="fullpage"> <div class="section" data-cat="category1" data-catname="category1" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> <div class="section" data-cat="category2" data-catname="category2" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> <div class="section" data-cat="category3" data-catname="category3" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> </div> <div id="gallery">     <div id="inner_gallery"></div> </div> <div id="loader"></div> 

so when click on section, info it, pass function query posts, , posts appear in #inner_gallery.

all of works, needs tweaking. making loader not loading when hiding gallery, , resetting scroll position of inner gallery.

edit: i've sorted scroll issue:

if (!$content.hasclass('galleryshow')) {     $content_inner.scrolltop(0); } 

still loader issue persists.

ok think got

var $content = $("#gallery"); var $content_inner = $("#inner_gallery"); var $fullpage = $('#fullpage'); var $gallerycat = $('#fullpage').find('.section'); var $close = $('.close'); var $loader = $("#loader");   var catid; var order; var orderby;  $('#fullpage').find('.section').eq(0).addclass('first');  $(window).on('load', function(){     $('#fp-nav').append('<div class="closed_nav"></div>'); });  $gallerycat.each(function(){     $(this).on('click', function(){         catid = $(this).data('cat');         order = $(this).data('order');         orderby = $(this).data('orderby');         if(!$(this).hasclass('first')){             $fullpage.toggleclass('galleryshow');         }         if (!$content.hasclass('galleryshow')) {             load_posts(catid, order, orderby);             $content_inner.scrolltop(0);         }          if ($content.hasclass('galleryshow')) {             $content.removeclass('galleryshow')         }      }); });  $(document).on('click', '#fp-nav', function(){     $content.removeclass('galleryshow');     $fullpage.removeclass('galleryshow'); });  function load_posts(currentcat, order, orderby){     var str = '&cat=' + currentcat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts';     $content_inner.html();     $.ajax({         type: "post",         datatype   : "html",         url: get_gallery_posts.ajaxurl,         data: str,         success: function(data){             var $data = $(data);             if ($data.length) {                 $content_inner.imagesloaded(function(){                     $content_inner.html(data);                     $content.toggleclass('galleryshow');                 });             }         },         beforesend : function(){             $loader.removeclass('loaded').addclass('loading');         },         error : function(jqxhr, textstatus, errorthrown) {             $loader.html(jqxhr + " :: " + textstatus + " :: " + errorthrown);         },         complete : function(){             $loader.removeclass('loading').addclass('loaded');         }     });     return false; } 

just remove classes. added additional on click event remove classes when click navigation between sections, added fullpage.js

:)


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -