1 answer

The code posted above is invalid mark-up - there is no closing <div> on the second box. This may just be a transcript problem and so not an actual problem on your page, but if the problem was evident on the page I'm sure it wasn't helping.

I don't know what the exact cause of the issue was, but I have altered the page and it now appears to be working as it should in both safari and firefox.

I made a number of changes to the JS, here is the complete working page (I changed the script reference to jQuery to match my local setup...):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grid layout</title>
<style type="text/css">
body {
position: relative;
width: 100%;
}
.box {background-color:#063;}
</style>
</head>
<body>
<div class="box">
<img class="image_post" src="images/image.jpg" alt="Imagem">
<h3><a href="report.php">REPORT</a></h3>
<p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
</div>
<div class="box">
<img class="image_post" src="images/image.jpg" alt="Imagem">
<h3><a href="report.php">REPORT</a></h3>
<p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function($) {
var myFluidGrid = {
COLNUMBER : 2, // Minimum column number.
COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
COLWIDTH : 240, // Fixed width of all columns.
};
function doLayout() {
var pointer = 0, arr = [], columns = Math.max(myFluidGrid.COLNUMBER, parseInt($('body').innerWidth() / (myFluidGrid.COLWIDTH + myFluidGrid.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', myFluidGrid.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (myFluidGrid.COLWIDTH + myFluidGrid.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + myFluidGrid.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
doLayout();
$(window).resize(function() {
doLayout();
});
})(jQuery);
</script>
</body>
</html>

Firstly, why are you using the Transitional DOCTYPE? The xhtml 1.0 spec (with its accompanying DOCTYPES) in 2000. The transitional DOCTYPE was added so that developers could migrate their code easily. That was a decade ago!

I moved your script's to the bottom of the page as this is generally better for performance.

I also moved your code into a closure and passed in the jQuery object as an argument to alias the $ character in a safe way. This, and the fact that the script is at the bottom) means you don't need to subscribe to the window.ready event. I have moved the function out of the object into a proper function and simply call this after the function decalration. It can then be called again when the resize event fires. I also tidied up some of your variable declarations, and removed the self = this variable as the function is no longer part of the object.

Thnak you very much for your help. Ill give it a try.
Also Im oblivious to Doc-type it is default in my Dreamweaver.
My JS isnt the best arround because I uderstand very little of it and usually its just an adaptation.
Thnak you. — marvy almost 9 years ago