Where the awesome is

Code in depth

Here, I will take some time to explain my jQuery/JavaScript code.

There's a lot of it, so hang tight and read through what you want. I'll do my best to explain everything I've done in a structured way.

I have turned my selectors into reference variables. This way I can use the reference variables instead of repeatedly having jQuery traverse the DOM and slowing down my page.

Click on the topics below to get an expanded view of why I coded these features the way I did:

Powered Animation

The following code demonstrates what happens when you click on the "Powered" text at the bottom of the screen (line by line):

  1. Search for the "power" id in the html document and attach a click handler to it.
  2. Search for that same "power" id and then fade it out at a speed of 500 milliseconds.
  3. Use "this" to represent the '#power' section in the previous function, and then fade it in "slow".
  4. Search for "p" tag with an id of "second" and replace that with your own custom html.
  5. Search for the same id and fade it out.
  6. Close the function with $(this) at the start.
  7. Close the second $('#power') function.
  8. Use "return false" so that you when you click it doesn't bring you to the top of the page (which it would normally do).
  9. Close out the original $('#power') function.

      $('#power').click(function() {
        $('#power').fadeOut(500, function() {
          $(this).fadeIn('slow', function() {
            $('p#second').replaceWith('<p id="second"><b class="highlight">Animation complete!</b></p>');
        return false;

Header Fadein

When the page loads, the header fades in.

  1. Search for the "header" id in the html document, set its initial css display state to none, then fade it in.

      $('#header').css("display", "none").fadeIn(3000);

I have chained this line together. When I first created it I had the following:


When I did it this way, I also had the "header" id's css set to: display: none;

I realized though that when someone has JavaScript turned off in their browser, they couldn't see a header at all.

By chaining this code together, I can set the css property to 'none' through jQuery and then fade it in. This way, everyone can see the header and JavaScript users get an added treat.

Updated content coming soon...


Enter your name

YourName | 2011

Powered by YourName