jQuery and 960.gs crash course

It’s time for a crash course in animation with jQuery and managing the elements on your site with a grid system. As it is one of the most famous ones I here used 960.gs.

View Demo

Download Source

I don’t just want to throw that demo at you all, I want to explain a little what I did. As many people answered jQuery/JavaScript on the poll on the facebook page, I’ll focus on the jQuery code used to make this happen. The full source is downloadable too. I build an animated menu with jQuery and also build the elements on the page with the 960 grid system.

For the non-coding people, please leave a comment if the concept works or not, or if you like the look or not, because now the code-pasting starts 😉

HTML structure and 960.gs

Here you see the class grid_4, which is part of the 960 framework. It means: make this element four columns of the overall 24 columns on this page wide. One column represents one 24th of 960 pixel, 40 pixel. When gotten used to, CSS frameworks with their extensive reset files and their grids, make it a lot easier to structure complex content into columns, devide pages and keep proximity between elements as desired. Apart from the grid_x class where x is a value between 0 and your maximum column width, there are more useful classes in the 960.gs for example alpha and omega, prefix_x and suffix_x and of course clear.

Below I pased the HTML structure of this page, highlighting the grid system classes:

<div class="container_24">
     <div class="alpha grid_6" id="logo"></div>
     <ul class="prefix_6 grid_12" id="menu">
  <li class="alpha grid_4 menu_entry">
      <a class="active" href="#content1">What</a>
      <p>is this?</p>
  </li>
  <li class="grid_4 menu_entry">
      <a href="#content2">Who</a>
      <p>did this?</p>
  </li>
  <li class="omega grid_4 menu_entry">
      <a href="#content3">Why</a>
      <p>did he do it?</p>
  </li>
     </ul>
     <div class ="grid_20 prefix_2 suffix_2">
  <div id="content1" class="content">
      <h1>What is this?</h1>
  </div>

The alpha and omega classes are equivalents to blueprintcss first and last classes. Can you see you can pretty much do a great deal of the positioning with the grids? Taking the first line, we have one fourth logo, one fourth free space and a half of menu. In the menu the space is devided into three equal parts. All by writing very few CSS classes.

jQuery menu animation and exchanging content


$(document).ready(function(){
    $('.menu_entry').click(
    function(){
	$('.menu_entry').children('a.active')
	.slideUp('250', function(){
	    $(this)
	    .removeClass('active')
	    .addClass('inactive')
	    .slideDown();
	    linked_content = $(this).attr('href');
	    $(linked_content).fadeOut();
	})
	$(this).children('a')
	.delay('400')
	.slideUp('250', function(){
	    $(this)
	    .removeClass('inactive')
	    .addClass('active')
	    .slideDown()
	    linked_content = $(this).attr('href');
	    $(linked_content).fadeIn();
	})
    });

    $('.content').hide();
    $('#content1').show();
});

Let’s start at the bottom with this, because it actually does something very intentionally, that also could have been resolved through pure CSS.


    $('.content').hide();
    $('#content1').show();

I did this with JavaScript, to take care of the case, that a browser comes along with disable JavaScript functionality or an aggressive ad-blocker. Another reason is SEO, so try to keep everything readable, without expecting JavaScript to be run on the client side.

#content1 is shown, because it in this case represents the first content, that should be visible. The active class is also added to the a element by default and is removed, when another link is clicked. You can replace these with your default content or decide to have no default content at all.

The li item in my navigation is the one that is targeted on click and the child a element gets changed

first we check if there is another active menu link

$('.menu_entry').children('a.active')

slide it up

.slideUp('250', function(){

exchange the classes active and inactive

.removeClass('active')
.addClass('inactive')

and slide it down again

.slideDown();

After that we fade out the content div, that the link points at.

linked_content = $(this).attr('href');
$(linked_content).fadeOut();

To then show the right content and make the link appear as it should, we just swap the functions for showing and hiding, removing and adding classes.

Now if we look at the HTML code for the list of links:

<li class="grid_4 menu_entry">
      <a href="#content2">Who</a>
      <p>did this?</p>
</li>

you can see the structure I just described. I chose to make the smaller text “did this?” under the link not attached to the a element, but you could also style it within it.

These are the CSS classes, that are swapped with addClass() and removeClass():

a.active{
    background: black;
    color: white;
}

 

a.inactive{
    background: white;
    color: black;
}

The Fonts

In this example I again used fonts from the brilliant fontsquirrel repository, StMarie and Bevan.

Leave a Reply

Your email address will not be published. Required fields are marked *