Category: Javascript

Categories
Javascript Programming Web Development

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.