Last active
September 26, 2021 21:03
-
-
Save mistergraphx/828e1dbea6de29cb39e5 to your computer and use it in GitHub Desktop.
Responsive Columns with columnizer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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); | |
}); | |
}); | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this! :)