JAVASCRIPT

Moving Elements Vertically and Horizontally with the GX JavaScript Animation Framework

In this fifth part of a series on the GX animation library, I develop a couple of basic examples that demonstrate how to move a div either vertically or horizontally. You'll see that it's a simple process of manipulating the div’s “top” and “left” properties.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

January 27, 2010

TABLE OF CONTENTS:

To be frank, I'm demonstrating how to move a div vertically only for the sake of completeness, as the process is nearly identical to displacing the element horizontally. Essentially, creating an animation like this requires only that you assign a final value to the “top” property of the selected element, and nothing else. It’s that simple, really.

However, the best way to grasp the logic driving this process is by example, so below I coded one for you. Look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// change the top coordinate of the targeted div element

$(document).ready(function(){

$('#container').click(function(){

$('#container').gx({'top': 450}, 1000, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header {

padding: 30px;

}

#content {

padding: 30px;

position: relative;

}

#footer {

padding: 90px 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

position: absolute;

top: 120px;

left: 30px;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Changing the top coordinate of the targeted div element</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Didn’t I tell you just a moment ago that moving a div vertically was a breeze with the GX library? Well, the above code fragment shows that in a nutshell. At the risk of being repetitive, it’s valid to stress again that the target div has been absolutely positioned with reference to its parent container, so if you need to create an animation similar to the one above, make sure that your target HTML element has been placed out of the normal rendering flow followed by the browser. This tiny detail can save you many headaches when implementing this kind of animation with GX, believe me.

Final thoughts

In this fifth chapter of the series, I developed a couple of basic examples to demonstrate that moving a div either vertically or horizontally using the GX library is indeed a no-brainer process, thanks to the simple manipulation of the div’s “top” and “left” properties.

But wait a minute! What if you need to change those properties at the same time? Well, GX will let you do that in a painless fashion as well, and in the course of the following part I’ll be explaining how to accomplish that. As usual, I'll include some functional code snippets.

Don’t miss the next tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.