ggalan
10-18-2011, 07:39 PM
i have this from yesterday, and it reads the width on ALL browsers including IE but chrome is having an issue
when i load a fresh view or after cache clear, everything is fine.
but when i hit F5 refresh the width does not read on every other item, any help please spent all day on it
<!DOCTYPE html>
<html>
<head>
<style>
#recieve{margin:0; }
#recieve ul { margin:0; float:left; position:relaitve; }
#recieve li { list-style:none; float:left; margin:0; }
#recieve img {position:relative; z-index:-1; }
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.onImagesLoad.min.js"></script>
<script>
var surl = "data.json";
var num = 0;
var totalW = 0;
var firstW = 0;
$(document).ready(function(){
$("body").prepend('<div id="output"></div>');
$.getJSON(surl, function(rtnData) {
var total = rtnData.data.length - 1;
function loader(num){
var loadedPic = rtnData.data[num].img;
var markup = ('<li><img class="loadedImg' + num +
'" style="display:none;" src="' + loadedPic +
'" /></li>');
$("#recieve ul").append(markup);
$(markup).onImagesLoad({
selectorCallback: function(){
var imgOn = $('.loadedImg' + num);
imgWidth = imgOn.width();
$("#output").append( imgWidth + ", ");
totalW += imgWidth;
pad = totalW + 50;
$("#recieve").css({"width":pad + "px"});
imgOn.fadeIn(100);
if(num == total){
totalW += 50;
}else{
num++;
loader(num);
}
}//selector
});
};//loader
loader(num);// start the loading
});//getJSON
});//document
</script>
</head>
<body>
<div id="recieve"><ul></ul></div>
</body>
</html>
when i load a fresh view or after cache clear, everything is fine.
but when i hit F5 refresh the width does not read on every other item, any help please spent all day on it
<!DOCTYPE html>
<html>
<head>
<style>
#recieve{margin:0; }
#recieve ul { margin:0; float:left; position:relaitve; }
#recieve li { list-style:none; float:left; margin:0; }
#recieve img {position:relative; z-index:-1; }
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.onImagesLoad.min.js"></script>
<script>
var surl = "data.json";
var num = 0;
var totalW = 0;
var firstW = 0;
$(document).ready(function(){
$("body").prepend('<div id="output"></div>');
$.getJSON(surl, function(rtnData) {
var total = rtnData.data.length - 1;
function loader(num){
var loadedPic = rtnData.data[num].img;
var markup = ('<li><img class="loadedImg' + num +
'" style="display:none;" src="' + loadedPic +
'" /></li>');
$("#recieve ul").append(markup);
$(markup).onImagesLoad({
selectorCallback: function(){
var imgOn = $('.loadedImg' + num);
imgWidth = imgOn.width();
$("#output").append( imgWidth + ", ");
totalW += imgWidth;
pad = totalW + 50;
$("#recieve").css({"width":pad + "px"});
imgOn.fadeIn(100);
if(num == total){
totalW += 50;
}else{
num++;
loader(num);
}
}//selector
});
};//loader
loader(num);// start the loading
});//getJSON
});//document
</script>
</head>
<body>
<div id="recieve"><ul></ul></div>
</body>
</html>