About About Me Page

This page is all about I, me and myself.

Keywords: jQueryiPhonesujay narsaleiOSAccordianCSS RolloverEaster Eggs

The Code

There is no PHP gimmickry on this page. Its all about jQuery Glory. I didn't know much jQuery at all when I started off with this page. But by the end of it, I had become quite the expert! This page took the most time to create - by far!

The center piece of the show - the iPod - was the hardest to make. It took a lot of small effects to make it seem just a little like the iOS interface. The basic structure for the iPod is a jQuery Accordian look-alike, with a <span> for the content and a <h3> for the triggering button:

<span style="background-color:#C0F" class="ipodSlideWindow">
<div>
<div class="ipodHeader ipodHdrBlue">Misc</div>
<div style="padding:5px;">
  <table class="ipodIntro">
    <tr>
      <td><img src="images/AboutMe1/127410-simple-black-square-.png" 
        class="ipodBoxImage" alt="expert" /></td>
      <td>In a few words</td>
    </tr>
  </table>
  <table class="ipodForm" cellspacing="0">
    <tr>
      <td style="width:0%;"></td>
      <td style="text-transform:none; text-align:justify;">I am 
      currently working at TCS under a project for Genworth Wealth
      Management. This developer profile involves work in the latest 
      MS technologies. Very exciting stuff!<br />
        <br />
        SernLabs is just for TP so that I can stay in touch with 
        CSS, JS and Photoshop. It also provides good motivation to 
        try out new things.<br />
        <br />
        I read somewhere that its good to have your mug pasted on 
        your site....so here goes.</td>
    </tr>
  </table>
  <table class="ipodForm" cellspacing="0">
    <tr class="ipodLink" id="mugShot">
      <td class="ipodLabel"><img 
          src="images/AboutMe1/more_realistic_icons.jpg" width="20" 
          height="20" alt="photo" /></td>
      <td>My Mugshot</td>
    </tr>
    <tr class="ipodLink">
      <td class="ipodLabel"><img 
        src="images/AboutMe1/iossettings.png" width="20"
        height="20" alt="settings" /></td>
      <td>About Page</td>
    </tr>
  </table>
</div>
</div>
</span>
<h3 class="ipodNavButton"><a href="#"><span>Misc</span><img 
src="images/AboutMe1/ipodTabIcon_misc.png" width="83"
height="115" /></a></h3>

On the day I finished most of the functionality for this page, I found the jQuery iPhone UI. This does almost everything that I was aiming for and feels truely awesome! Only if I had met you earlier! But anyway, I did it my own way. Some basic jQuery took care of the sliding effect.

$(".ipodPane h3").click(function() 
{			
    $(this).addClass("viewing");
    $(".ipodPane h3").not($(this)).removeClass("viewing");
    refreshViewPane($(this).siblings().css('left') == 0 + "px" ? 0 : paneWidth);
});

function refreshViewPane(initLeft){
    $(".ipodPane h3.viewing").siblings().css('left', initLeft + "px");
    $(".ipodPane h3.viewing").siblings().animate({
        left: "0px"
    },'fast','swing');
    $(".ipodPane span.ipodSlideWindow").not($("h3.viewing").siblings()).animate({
        left: -paneWidth + "px"
        },'fast','swing');

    $(".ipodPane h3.viewing").find("img").css('margin-top', -tabImgHt / 2 + 'px');
    $(".ipodPane h3.viewing").find("span").css('color', '#FFF');

    $(".ipodPane h3").not(".viewing").find("img").css('margin-top', '0px');
    $(".ipodPane h3").not(".viewing").find("span").css('color', '#7c7c7c');
}

The Design

No prizes for guessing what this page design is inspired from. Its a lot cleaner than my desk in reality though! Some of the pics I got from a simple Google Search while others I clicked myself. The shadow effect images were created with Photoshop.

One trick that I use a lot is the Pure CSS Button Rollover. You can see this effect on the iPod main navigation buttons. This involves creating a image double the height of your intended button and having both the Mouseover and Mouseout graphics in the same image. Something like this:

CSS Hover Example image

Then we set the CSS to show only half the image and shift it cleverly on hover.

.ipodPane h3 {
    margin: 0 auto; 
    position:absolute;	
    width: 25%;
    height: 12%;
    bottom: 0px;
    overflow:hidden;
    background:url(../images/AboutMe1/ipodTabIcon_02.png) #000 repeat-x;
}
.ipodPane h3:hover img{
	margin-top: -55px;
}

A variation of this trick is to set the required image as the background-image and then shift the background-position accordingly. I like this effect because it involves no jQuery and will work on the most ancient browsers imaginable. For more details on this effect have a look at WebVamp's Graphical CSS Rollover Menu.

Also, this page is going to be home to a lot of Easter Eggs. I am not going to say more, because otherwise they would be just plain eggs. You don't want those!


External Links


About Page