chrome browser width error

**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

Code:

<!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>

**ggalan** · 10-18-2011, 07:52 PM

heres a sample json file

Code:

{"data":[
	{"index":14,"text":"","img":"http://seabass.gsfc.nasa.gov/seabass/images/NASA_Logo.gif"},
	{"index":13,"text":"","img":"http://eoimages.gsfc.nasa.gov/ve/2429/globe_east_2048.jpg"},
	{"index":12,"text":"","img":"http://www.wallpaperpimper.com/wallpaper/Landscape/Space/Columbia-Shuttle-NASA-1-U24P26TUBN-1024x768.jpg"},
	{"index":11,"text":"","img":"http://apod.nasa.gov/apod/image/0403/x43a2_nasa_big.jpg"}
]}

Thread: chrome browser width error

Thread Tools

Search Thread

chrome browser width error

Bookmarks

Bookmarks

Posting Permissions