javascript - Script to tile images not initialized until you resize the browser -


i have page supposed tile images this

enter image description here

but when first land on page see images stack behind each other

enter image description here

if resize browser @ shift position. @ on jquery makes happen

jquery

var colcount = 0; var colwidth = 300; var margin = 10; var spaceleft = 0; var windowwidth = 0; var blocks = [];  $(function(){   $(window).resize(setupblocks); });  function setupblocks() {   windowwidth = $(window).width();   blocks = [];    // calculate margin blocks evenly spaced within window   colcount = math.floor(windowwidth/(colwidth+margin*2));   spaceleft = (windowwidth - ((colwidth*colcount)+(margin*(colcount-1)))) / 2;   console.log(spaceleft);    for(var i=0;i<colcount;i++){     blocks.push(margin);   }   positionblocks(); }  function positionblocks() {   $('.block').each(function(i){     var min = array.min(blocks);     var index = $.inarray(min, blocks);     var leftpos = margin+(index*(colwidth+margin));     $(this).css({       'left':(leftpos+spaceleft)+'px',       'top':min+'px'     });     blocks[index] = min+$(this).outerheight()+margin;   });  }  // function min value in array array.min = function(array) {     return math.min.apply(math, array); };

i think there must not wrapping.

in html have on <body>

html

<body onload="setupblocks();">

my guess line causing problem this

$(function(){   $(window).resize(setupblocks); });

i google don't know called in there see other options. can me figure out gap in information.

edit: tutorial got works fine because had of items hand coded. in projects being loaded mustache template.

so though script load onload guess, how fire off both on load, , again when resized?

call setupblocks function after page loaded:

$(function(){     setupblocks();     $(window).resize(setupblocks); });

edit:

looking @ html page, looks creating elements dynamically after page loaded. try update code in html page:

$(function() {     $.getjson('img.js', function(data) {         var template = $('#imgtpl').html();         var html = mustache.to_html(template, data);         $('#image-list').html(html);         setupblocks();     }); });

Comments

Post a Comment

Popular posts from this blog

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

php - CakePHP HttpSockets send array of paramms -

i problem when make request (i can request). $link = 'http://uri/path/?param1=1&sid=2&sid=3&sid=4' $http = $httpsocket = new httpsocket(); $res = $httpsocket->get($link); if check request pr($http); i see : [line] => /url/path/?param1=1&sid%5b0%5d=2&sid%5b1%5d=3&sid%5b2%5d=4 http/1.1 and i'm getting empty response because server doesn't know parameters sid%5b0%5d=2 when try send parameters array : $data = array('param1' => '1', 'sid' => array('2','3', '4')); i see same changes %5b0%5d - additional indexes. how fix it? unfortunately , can not change server side, if send request in browser, i'll normal response in json format. when make request, can parameters this: $param1 = $_get['param1']; $sid= $_get['sid']; tip: use diferente names parameters. have multiples sid. use sid1, sid2, sid3... update: can parameters this:...
Read more