Showing posts with label width. Show all posts
Showing posts with label width. Show all posts

Monday 21 March 2016

H1 shows window width

I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
  $('h1').text($(window).width());
});

Tuesday 29 April 2014

jQuery equalise selector widths

Now for making the width of selectors the same. This gets slightly more complicated on 4 counts:
1. Firefox can't turn null values into zero, so you have to force it.
2. You also need to get margin, border and padding values to make your calculations. Including parent padding.
3. You have to handle the browser being resized.
4. You have to add a little contingency for browser rendering differences.
Let's start with the HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>equalise width</title>
    <link rel="stylesheet" type="text/css" href="style.css">  
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliud igitur esse censet gaudere, aliud non dolere. Ad eos igitur converte te, quaeso. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Ut optime, secundum naturam affectum esse possit. Videsne quam sit magna dissensio? Duo Reges: constructio interrete. Sed quanta sit alias, nunc tantum possitne esse tanta. At enim hic etiam dolore. Facile est hoc cernere in primis puerorum aetatulis.</p>
    </article>
    <article>
      <p>Summus dolor plures dies manere non potest? At ego quem huic anteponam non audeo dicere; Nemo nostrum istius generis asotos iucunde putat vivere. Pugnant Stoici cum Peripateticis. Istam voluptatem perpetuam quis potest praestare sapienti? Quid sequatur, quid repugnet, vident.</p>
    </article>
    <article>
      <p>Nihil opus est exemplis hoc facere longius. Quam illa ardentis amores excitaret sui! Cur tandem? Sic enim censent, oportunitatis esse beate vivere.</p>
    </article>
    <footer>
      <p>footer</p>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
    <script src="equalisewidth.plugin.js"></script>
    <script>
    (function()
    {
      $('article').equalisewidth();
      $(window).resize(function()
      {
        $('article').equalisewidth();
      });
    })();
    </script>
  </body>
</html>
Now for the CSS (style.css):
body
{
  font: 90%/1.618 sans-serif;
  padding-top:2em;
}
article
{
float:left;
margin:1em;
padding:1em;
background:red;
color:white;
}
footer
{
clear:left;
}
And finally the jQuery plugin (equalisewidth.plugin.js):
(function($)
{
  $.fn.equalisewidth = function()
  {
    var thisMargin = parseInt($(this).css('margin-left').replace(/px/,'')) + parseInt($(this).css('margin-right').replace(/px/,''));
    if(isNaN(thisMargin)) thisMargin = 0;
    var thisBorder = parseInt($(this).css('border-left').replace(/px/,'')) + parseInt($(this).css('border-right').replace(/px/,''));
    if(isNaN(thisBorder)) thisBorder = 0;
    var thisPadding = parseInt($(this).css('padding-left').replace(/px/,'')) + parseInt($(this).css('padding-right').replace(/px/,''));
    if(isNaN(thisPadding)) thisPadding = 0;
    var thisParentPadding = parseInt($(this).parent().css('padding-left').replace(/px/,'')) + parseInt($(this).parent().css('padding-right').replace(/px/,''));
    if(isNaN(thisParentPadding)) thisParentPadding = 0;
    var equalWidth = $(this).parent().width() / $(this).length;
    var spacing = (thisMargin + thisParentPadding) + (thisBorder + thisPadding) + 2;
    var widthResize = equalWidth - spacing;  
    $(this).each(function()
    {
      $(this).width(widthResize);    
    });
  }
})(jQuery);
Enjoy!