SameWidth
A jQuery function to resize all the elements in a container to the same width calculated from the widest.
var maxw = Math.max.apply(Math, w);Download
The HTML
These are common buttons
The CSS
/*Default MOBILE*/
div.organize * {
display: block;
margin:5px 0;
width:100%;
}
/*Media query for tablet and pc monitor*/
@media screen and (min-width: 40em) {
div.organize *{
display: inline-block;
width:auto;
}
}
The Javascript
(function ( $ ) {
$.fn.getSameWidth = function (){
var w=[];
var selector = this;
$(selector).children().each(function(){
var val = $(this).outerWidth();
w.push(val);
});
var maxw = Math.max.apply(Math, w);
if($(selector).children().css('display')=='inline-block'){
$(selector).children().css('width', maxw);
}
$(window).resize(function () {
$(selector).children().removeAttr( "style" );
$(selector).getSameWidth();
});
};
}( jQuery ));
Call the plug-in
Call the function after jQuery and before the end of body.
<script src="js/samewidth.jquery.js"></script>
<script>$(document).ready(function(){
$('.same-width').getSameWidth();
});
</script>