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

Post a Comment

Popular posts from this blog

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

-
i looking @ how website designed using inspector in chrome. can use firefox developer tools or firefox web developer add-on or chrome web developer extension. so website has slide-show , using jquery it. looking @ markup , css in inspector, i see 2 things constantly changing slides change: one opacity css property understandable, i'd see changing values, changes fast see read anything. second- a div added in div slides change momentarily , moment when appears short notice except div . so question is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? where can inspect div element gets added such short moment , , gets removed? , can see changes in value of opacity takes place? is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? if opacity animated css transition or animation,
Read more

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

-
my app showing empty select field first entry. have read other solution given , tried still not working. my controller code is: .controller('usercreatecontroller', function(user,profile,auth) { alert("hello"); var vm = this; vm.type = 'create'; profile.all() //this service fetch profiles shown in select field .success(function(data){ vm.profile = data; }); vm.userdata.profile = vm.profile[0]; //here have set default value select field and html page is: <label class="col-sm-2 control-label">profile</label> <div class="col-sm-8"> <select ng-model="user.userdata.profile" ng-options="person._id person.profilename person in user.profile"> </select> </div> hierarchy of vm.profile { "_id": 46, "profile": objectid("5516498e95b84548156db754"), "isactive": true, "password": "$2
Read more

php - Cloud9 cloud IDE and CakePHP -

-
i attempting cakephp running on cloud9, cloud based ide. unaware, cloud collaboration ide intermixes services such bitbucket. site gives sudo rights, , installed cakephp using these instructions: https://www.digitalocean.com/community/tutorials/how-to-install-cakephp-on-an-ubuntu-12-04-vps when attempt run database exported machine cakephp installed, error message "url rewriting not configured on server." attempted solve issue using official guide cakephp: http://book.cakephp.org/2.0/en/installation/url-rewriting.html but no cigar, same error message. has gotten cakephp working, or aware of cloud ide free/low cost cloud9 support cakephp? here's how got working now: sudo apt-get update sudo apt-get install php5-intl curl -ss https://getcomposer.org/installer | php -- --filename=composer ./composer create-project --prefer-dist cakephp/app this creates project in /app default. move workspace docroot: mv app/* ./ mv app/.* ./ rm -rf app then de
Read more