jQuery as you are probably aware is sometimes billed as javascript for designers. I don't pretend to be a javascript expert by any means, but what I love about jQuery is that it's possible to cobble together some simple code that will work around some design constraint without needing to have an indepth working knowledge of core javascript principles. Seasoned developers may take issue with this but ultimately I think it encourages people to use javascript first and then slowly begin to learn the deeper foundations of its logic.

I've used fixed elements in some of our templates (most notably the Insideout Joomla template) and you will notice I've attached position: fixed to the left sidebar on this blog as well. One of the limitations of the fixed elements is that they often don't play well with small screen resolutions and so this is where jQuery comes in.

The snippet below is really simple and basically just tests the screen size that the user is viewing the site with and then makes a change to the css dynamically. If you resize the height of your browser window so that the bottom of the browser moves closer to the bottom of the left sidebar you will notice that when you scroll, rather than staying in place the sidebar will move with the rest of the main content - effectively the javascript is switching the position attribute on the #leftCol div from fixed to relative.

Here is the code:

{codecitation}

jQuery(document).ready(function() {

jQuery(window).resize(function() {

if (jQuery(window).height() < 700) {

jQuery("#leftCol").css('position', 'relative');

}

else {

jQuery("#leftCol").css('position', 'fixed');

}

});

});

{/codecitation}

If you want to play around with this code in a Zen Grid Framework based template you just need to copy the code above into the js/template.js file of your template. If you already have the document ready syntax in that file then you can remove the first and last lines of the snippet.

The key elements are the height that you want to trigger the change from and the element you want to target. In the example above the screen size is set by the "700" value and the div that gets targeted is the #leftCol.

For a full run down of the css attribute in jQuery its well worth checking out the jQuery documentation and remember that you need to have the jQuery library loading on the page but if you have the JB LIbrary installed then that will be doing that already.

blog comments powered by Disqus