Is jQuery causing a break in layout?

JavaScript
1

Hi from wetherby UK :slight_smile:

I’m totally baffled as to why the frid layout breaks on this page:
http://www.davidclick.com/home.html & illustrated here:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/broken-grid-2_zps29ca466f.jpg

It should look like this:
http://i216.photobucket.com/albums/cc53/zymurgy_bucket/correct-grid_zps55abd5aa.jpg

If this is jquery not being called on Load please give advice at a beginners level, i’m a newb with jquery & i’m tinkering with code I paid for.

Thanks in advance,
David

2

Hi,

I assume you got this from here and if you look at the comments there seems to be the same issue you are mentioning. The author suggests adding the preloader script as in the demos.

Add this to the end of the html and see if it fixes it for you.


<script type="text/javascript">
			$(function() {
				var $container 	= $('#am-container'),
					$imgs		= $container.find('img').hide(),
					totalImgs	= $imgs.length,
					cnt			= 0;
				
				$imgs.each(function(i) {
					var $img	= $(this);
					$('<img/>').load(function() {
						++cnt;
						if( cnt === totalImgs ) {
							$imgs.show();
							$container.montage();
						}
					}).attr('src',$img.attr('src'));
				});	
				
			});
		</script>
3

Hi Paul… I am very happy you took time out to spot this! I actually paid another develop to do this so i have no idea where the template came from but thank you again for spotiing this. i’ll apply the fixes at the weekend.

Grazie tanto!

4

Hi Paul…

No worries if you have no time to reply to this but can you able to check if ive done everything right? Thing id the hoem page images when in firefox somethimes do not appear when your in another part of the site say http://www.davidclick.com/packages.html and then after a good 10 seconds navigate back top the home page:http://www.davidclick.com/index.html no images. Butthey appear when you do a hard refresh :frowning:

I know replies are volunary so if you have no time no worries, i’m chassing the developer who I’m sure will be able to fix it!

Thanks,
David

5

HI,

Try putting the extra script above the montage script.

e.g.


<script type="text/javascript">
			$(function() {
				var $container 	= $('#am-container'),
					$imgs		= $container.find('img').hide(),
					totalImgs	= $imgs.length,
					cnt			= 0;
				
				$imgs.each(function(i) {
					var $img	= $(this);
					$('<img/>').load(function() {
						++cnt;
						if( cnt === totalImgs ) {
							$imgs.show();
							$container.montage();
						}
					}).attr('src',$img.attr('src'));
				});	
				
			});
		</script>
<script type="text/javascript" src="SiteFiles/js/jquery.montage.min.js"></script>