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>