To Infinity!

I’ve had several people ask me how I made the sliding effect on my portfolio. It’s done using a Javascript library called jQuery, a framework that generally has made life web development a whole lot easier. It’s a lot easier to learn than Javascript is, and also lets you get away with much fewer lines of code than you otherwise would.

Thorough documentation for jQuery can be found at the website, jquery.com. However, I’m going to be covering some of the basics here. :) You should have an elementary understanding of HTML and CSS, though, and possibly also of general programming language structure. If not, you’re probably going to be really confused.

jQuery is based on CSS-like selectors with actions chained to them. The following code is taken from the jQuery website, and it should be easy to tell what code like that does - $("p.surprise").addClass("ohmy").show("slow"); - it first adds the class .ohmy to the p element with an existing .surprise class, then shows the whole p slowly. Difficult? Not particularly.

We’d do something like the following code in order to use this example.
 
<script type="text/javascript">
$(document).ready(function(){
    $("a#button").click(function(){
        $("p.surprise").addClass("ohmy").show("slow");
    });
});
</style>

You can ignore the first and last lines of Javascript - they always have to be in place in order for it to work. The meaning of the other addition, $("a#button").click(function(){, shouldn’t be difficult to make out - it simply tells us that “when when the link with the id #button is clicked, do the following”.

Now that we’ve covered the general syntax, here’s the code I used for the sliding effect on my website:
 
<script type="text/javascript"<
$(document).ready(function(){
    $("a.right").click(function(){
        $("#wrapper").animate({
            marginLeft: "-908px"
        }, 1000);
    });
 
    $(”a.left”).click(function(){
        $(”#wrapper”).animate({
            marginLeft: “+908px”
        }, 1000);
    });
});
</script>

To better illustrate how the page is set up, I also drew this. Click the image to see it in action, from where you can also take a look at the source code. (not that it’s not entirely accurate in the animation, though. The borders messes the measures up.

Now, what happens, is that everything outside of the #works div is hidden using overflow: hidden. The #wrapper tag’s width is set to over 10000px, in order to make it long enough to fit all the .project divs. However, only 908px is shown at once - the #works div takes care of that.

When the Older » link is clicked, #wrapper’s margin-left is decreased by 908px, effectively shifting the view to the project to the one on the right. When the « Newer link is clicked, we do the opposite: #wrapper’s margin-left is increased by 908px instead. The animation is all handled by jQuery’s handy animate() function, so all we have to worry about, is getting the correct numbers.

For the full code and live example, click either that link, or the image above.