Hi! I’m Brad!

I’m an award-winning software developer from Laramie, Wyoming.

Month: July 2013

  • jQuery Goodies!

    I started a new GitHub repo to fill with jQuery utilities and behaviors.

    The initial commit is filled with viewport sizing utilities.  The utilities make it easy to use viewport-relative sizing in situations where browsers do not support VW and VH.

    Something that I use a lot is the Letterboxing module.  Simply by adding .jq-letterbox, you can strictly enforce an element to have a widescreen aspect ratio.  This is very handy for sites that show lots of YouTube movie trailers.

    Grab the Repo

    https://github.com/bradkovach/jqUtilities

    Installation

    1. Import a recent version of jQuery

    Note: script tags do not need type=”text/javascript” when using HTML5.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    2. Import the utilities AFTER jQuery

    <script src="jqUtilities.viewport.js"></script>

     Usage

    Full usage information is available at the head of the jqUtilities.viewport.js file.

    /*
    .js-vh: Viewport Height positioning
    	required classes:
    		js-vh
    	required attributes:
    		data-vh: a numeric value greater than 0 (zero).  1vw is 1% of the viewport's height.
    	example:
    		<div class="js-vh" data-vh="50"
    			<!-- this will be half the height of the viewport -->
    		</div>
    	output:
    		via jqu_log: reports new height in vh
    		via jqu_log: reports when requested vh is invalid
    */

    Help

    By default, these utilities log errors to the console.

    Known Limitations

    • Mixed markup and style information.  Style information is hard-coded into HTML markup.  This might be undesirable.
    • This is not a polyfill.  It is a workaround.  Nice polyfills exist, and that might be a better option for you.