Hi there, I have been using Jquery successfully for months now but
have found an interesting quirk, I have a gallery page (http://
www.philford.clearwaterdesign.co.uk/gallery/empty-beaches-project)
which cycles through all the images and calculates the correct margins
to use in order for the images to be flush with the left and right.
The odd thing is when the page is first loaded, or after a delete
cache, the script doesn't work right, it is calculating different
margins and messing the layout up. If you visit the page again, all
works fine.
I have changed the code quite a lot to see where the problem comes
from but still can't see the issue. My javascript is below, anyone
else come across this? Or know a solution?
Cheers
function adjustMargins(){
// cycle through each image and total the image widths
$(".catItem").each(function(i){
var imgWidth = $(this).width();
if(row1Widths + imgWidth +30 < pageWidth)
{
row1Widths = row1Widths + imgWidth;
row1Num++;
$(this).addClass("row1")
}
else
{
row2Widths = row2Widths + imgWidth;
row2Num++;
$(this).addClass("row2")
}
});
// calculate the margins between the images
row1Margin = (pageWidth - row1Widths) / (row1Num-1);
row1Margin = Math.floor(row1Margin);
row2Margin = (pageWidth - row2Widths) / (row2Num-1);
row2Margin = Math.floor(row2Margin);
$(".row1").each(function(i){
$(this).css("margin-right", row1Margin+"px");
});
$(".row2").each(function(i){
$(this).css("margin-right", row2Margin+"px");
});
$(".row1:last").css("margin-right", "0px");
$(".row2:last").css("margin-right", "0px");
}
$(document).ready(function()
{
row1Widths = 0;
row2Widths = 0;
row1Num = 0;
row2Num = 0;
pageWidth = $("#wrapper").css("width");
pageWidth = pageWidth.replace("px", "");
adjustMargins();
});
|
