This question already has an answer here:
Hello everybody I'm having a big issue trying to solve this. I know that I have to use JavaScript but I just can't understand how to. This is my script:
<?php
$posts = query_posts('order=DESC&cat=-2');
$cols = 4;
$filas = array_chunk($posts, $cols);
$columnas = array();
foreach( $filas as $row => $articulos ) {
foreach( $articulos as $ix => $articulo ) {
$columnas[$ix] = isset($columnas[$ix]) ? $columnas[$ix] : array();
$columnas[$ix][] = $articulo;
}
}
?>
<?php foreach($columnas as $posts):?> etc, etc ... <?php endforeach; ?>
Where $cols value will be changing according user's window screen. I.E. = If the window screen is (some value) then $cols = (some value)
I will really appreciate any help on this.
Cheers!
</div>
You could do something like using an ajax script onload of page. This will make your site slower, but it should have the right effect:
HTML
<div class="container">
<!-- Place columns here -->
</div>
jQuery
$(document).load(function(){
var winWidth = $(window).width();
$.post('phpscript', {width: winWidth}, function(data) {
$('.container').html(data);
});
});
PHP
<?PHP
//Your PHP script to format your page in however many columns
//Have your script here take the width of your page
//Do do math to find how many columns
//Query whatever you need to get those columns
//Return the HTML
?>
This will allow you to return whatever column layout you want. Although, I'm sure it would just be easier to make some good CSS to make as many columns as needed.