Skip to content

Instantly share code, notes, and snippets.

@mistergraphx
Last active September 26, 2021 21:03
Show Gist options
  • Save mistergraphx/828e1dbea6de29cb39e5 to your computer and use it in GitHub Desktop.
Save mistergraphx/828e1dbea6de29cb39e5 to your computer and use it in GitHub Desktop.
Responsive Columns with columnizer
<article class="list-thema js-fixie">
<h2></h2>
<ul class="js-columnize">
<li><a href=""><i class="icon-chevron-right"></i></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<a href="" class="btn-primary"></a>
</article>
/**
* @function
* @name getWidth
*
*/
function getWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
/**
* @function
* @name adaptative_columns
* @see https://github.com/adamwulf/Columnizer-jQuery-Plugin
*/
function adaptative_columns (screenWidth) {
if (screenWidth > '940') { // breckpoint Desktop
console.log("Mode Desktop : "+screenWidth);
$('.column > *').unwrap();
$('.js-columnize').columnize({
columns:2,
buildOnce:false,
lastNeverTallest:true
});
}
if ((screenWidth < '939') && (screenWidth > '640') ) { // breckpoint tablet
console.log("Mode tablette : "+screenWidth);
$('.column > *').unwrap();
$('.js-columnize').columnize({
columns:2,
buildOnce:false,
lastNeverTallest:true});
}
if (screenWidth<'639') { // Breakpoint Phone
console.log("Mode Phones : "+screenWidth);
$('.column > *').unwrap();
$('.js-columnize').columnize({
columns:1,
buildOnce:false,
lastNeverTallest:true});
}
}
// Dom Ready
(function($){
$(document).ready(function(){
// Columnize
// https://github.com/adamwulf/Columnizer-jQuery-Plugin
var screenWidth = getWidth();
//
adaptative_columns(screenWidth);
//
$(window).resize(function(){
var screenWidth = getWidth();
adaptative_columns(screenWidth);
});
});
});
@NaturalDevCR
Copy link

Thanks for this! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment