javascript - Hide social buttons until fully loaded from external source -
how can show buttons untill loaded external source. before loading buttons there gif preloader indicates loading in progress. code posted working show buttons loads 1 one , not @ same time.
my code is:
<div class="social-holder"> <div class="social-buttons-holder"> </div> </div>
when user hovers on div class "social-holder" buttons loaded external page named "social".
$('.social-holder').hover(function(){ if($(".social-buttons").length > 0){ $('.social-buttons-holder').show(); } else { $('.social-buttons-holder').addclass('preloader'); $('.social-buttons-holder').load('/social', function() { $('.social-buttons-holder').removeclass('preloader'); }); } }, function(){ $('.social-buttons-holder').hide(); });
structure of external page is:
<div class="social-buttons"> <div class="social-button"> </div> <div class="social-button"> </div> <div class="social-button"> </div> </div>
each div class "social-button" contains standard code social buttons wont post here. so, when user hovers on div class "social-holder", div class "social-buttons" loaded inside of div class "social-buttons-holder". if social buttons not loaded class "preloader" added div show preloader gif image. when jquery load loads external content, "preloader" class removed, buttons load 1 one in iframes, , want them load @ same time, because preloader should hide loading process
Comments
Post a Comment