jquery - Isotope gutter/spacing on page load, no gutter/spacing on window resize -


on page load, isotope adds gutter between isotope items. when resize window, 1px, fix layout.

i've been racking brain why isotope adding spacing between images. on 1 page, , code identical other pages, exception being i'm loading in larger jpg images page.

i've created codepen code/dependencies you'll see works there. if have tips on improving code, please let me know.

here's isotope function:

/**  * item filter  *  */ itemfilter: function(isocontainer, $isoselector) {     var itemgroup;     var viewbyselect;     var namefilter;     var buttonfilter;     var usednames = {};      var $isocontainer = $(isocontainer);      var $win = $(window);     // lazy load w/ sorting/filtering enabled     var $imgs = $('.lazy');     // init isotope     var $container = $isocontainer.isotope({         itemselector: $isoselector,         layoutmode: 'fitrows',         animationengine: 'best-available',         getsortdata: {             name: '.name'         },         filter: function() {             var $this = $(this);              var itemgroupresult = itemgroup ? $this.is(itemgroup) : true;             var viewbyselectresult = viewbyselect ? $this.is(viewbyselect) : true;             var namefilterresult = namefilter ? $this.is(namefilter) : true;             var buttonresult = buttonfilter ? $this.is(buttonfilter) : true;              return itemgroupresult && viewbyselectresult && namefilterresult && buttonresult;         }     });      // fixes layout issues when images still loading.     $container.imagesloaded().progress(function() {         $container.isotope('layoutitems');     });      // load images when filtering initiated ,      // have new html layout lazyload on.     $container.isotope('on', 'layoutcomplete', function () {         features.loadvisible($imgs, 'lazylazy');     });      // load images on scroll event lazylazy.     $win.on('scroll', function () {         features.loadvisible($imgs, 'lazylazy');     });      // initialize lazyload fadein effect , failure_limit.     // listening on event 'lazylazy'     $imgs.lazyload({         effect: "fadein",         failure_limit: math.max($imgs.length - 1, 0),         event: 'lazylazy'     });      // select filtering - role     $('.view-by-select').on('change', function() {         viewbyselect = $('option:selected', this).data('filter');         $container.isotope();     });      // filtering - profile name     $('.filter-title').on('click', 'span', function() {         namefilter = $(this).hasclass('name');         $container.isotope({ sortby: namefilter });     });      // reset filtering     $('.filter-reset').on('click', function() {         $('.view-by-select').val('default').trigger('change');         buttonfilter = $(this).data('filter');         $container.isotope();     });      // remove duplicate roles select list     var $selectlist = $('select.view-by-select > option');     $selectlist.each(function () {         if(usednames[this.text]) {             $(this).remove();         } else {             usednames[this.text] = this.value;         }     });  }

here's image of issue i'm experiencing:

image gutters present when shouldn't be

well.. solution dirty @ best:

itemfilter: function(isocontainer, $isoselector) {     var $win = $(window);     $win.load(function() {         var itemgroup;         var viewbyselect;         var namefilter;         var buttonfilter;         var usednames = {};          var $isocontainer = $(isocontainer);           // lazy load w/ sorting/filtering enabled         var $imgs = $('.lazy');          // init isotope         var $container = $isocontainer.isotope({             itemselector: $isoselector,             layoutmode: 'fitrows',             animationengine: 'best-available',             getsortdata: {                 name: '.name'             },             filter: function() {                 var $this = $(this);                  var itemgroupresult = itemgroup ? $this.is(itemgroup) : true;                 var viewbyselectresult = viewbyselect ? $this.is(viewbyselect) : true;                 var namefilterresult = namefilter ? $this.is(namefilter) : true;                 var buttonresult = buttonfilter ? $this.is(buttonfilter) : true;                  return itemgroupresult && viewbyselectresult && namefilterresult && buttonresult;             }         });         $container.isotope('layout');          // fixes layout issues when images still loading.         $container.imagesloaded().progress(function() {             $container.isotope('layoutitems');         });          // load images when filtering initiated ,          // have new html layout lazyload on.         $container.isotope('on', 'layoutcomplete', function () {             features.loadvisible($imgs, 'lazylazy');         });          // load images on scroll event lazylazy.         $win.on('scroll', function () {             features.loadvisible($imgs, 'lazylazy');         });          // initialize lazyload fadein effect , failure_limit.         // listening on event 'lazylazy'         $imgs.lazyload({             effect: "fadein",             failure_limit: math.max($imgs.length - 1, 0),             event: 'lazylazy'         });          // select filtering - role         $('.view-by-select').on('change', function() {             viewbyselect = $('option:selected', this).data('filter');             $container.isotope();         });          // filtering - profile name         $('.filter-title').on('click', 'span', function() {             namefilter = $(this).hasclass('name');             $container.isotope({ sortby: namefilter });         });          // reset filtering         $('.filter-reset').on('click', function() {             $('.view-by-select').val('default').trigger('change');             buttonfilter = $(this).data('filter');             $container.isotope();         });          // remove duplicate roles select list         var $selectlist = $('select.view-by-select > option');         $selectlist.each(function () {             if(usednames[this.text]) {                 $(this).remove();             } else {                 usednames[this.text] = this.value;             }         });      }); }

i wrapped entire isotope script in $(window).load() function. fixes layout issue on page load. have better solution?


Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more