javascript - jQuery dynamic selector returning undefined -
i'm sure have overlooked something, confounding me.
starting html:
<div id="col-header-1"> ... </div>
using instafeed (js plugin) instagram images - working fine. outputs following correctly (within col-header-1):
<div class="instagram-headers" data-highres="http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg"></div>
this not work, url returns undefined:
function replacecssbackgroundwithimage(target){ var url = $('#' + target + ' > .instagram-headers').attr('data-highres'); $('#' + target).css('background-image','url(' + url + ')'); }
result
<div style="background-image: url('undefined');" id="col-header-1">
so gets target correctly.
stepping through in (firefox's) console yields correct result:
target = 'col-header-1' //=>"col-header-1" var url = $('#' + target + ' > .instagram-headers').attr('data-highres'); //=> undefined url //=> "http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg" $('#' + target).css('background-image','url(' + url + ')'); //=> [object object]
result
<div style="background-image: url("http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg");" id="col-header-1">
im @ loss, appreciated,
thanks!
update: instafeed constructor
function getmultiplefeeds(targets){ var feeds = []; var opts = {}; (var i=0,len=targets.length;i<len;i++){ if (targets[i].match('header')){ opts = { tagname: "tag", target: targets[i], limit: '1', get: 'tagged', user:'user', clientid:'clientid', template:'<div class="instagram-headers" data-highres="{{image}}"></div>', usehttp:true, before: replacecssbackgroundwithimage(targets[i]), }; ... feeds.push(new instafeed(opts)); } return feeds; } var myfeeds = getmultiplefeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']); for(var i=0, len=myfeeds.length; < len; i++) { myfeeds[i].run(); }
from looking @ instafeed documentation, want call replacecssbackgroundwithimagemethod
in after
callback, rather before
callback. try changing before after :
function getmultiplefeeds(targets){ var feeds = []; var opts = {}; (var i=0,len=targets.length;i<len;i++){ if (targets[i].match('header')){ opts = { tagname: "tag", target: targets[i], limit: '1', get: 'tagged', user:'user', clientid:'clientid', template:'<div class="instagram-headers" data-highres="{{image}}"></div>', usehttp:true, after: replacecssbackgroundwithimage(targets[i]), }; ... feeds.push(new instafeed(opts)); } return feeds; } var myfeeds = getmultiplefeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']); for(var i=0, len=myfeeds.length; < len; i++) { myfeeds[i].run(); }
the reason being element trying target hasn't been added dom @ point trying access it, returning undefined.
Comments
Post a Comment