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:

As you may have already guessed, moving an HTML element across the screen horizontally is only a question of triggering an animation that manipulates the element’s “left” property. As I said in the preceding segment, this can be done by calling a specific method provided by the GX library, but in this particular case I’ll show you how to accomplish this in a more traditional way, by using the familiar “gx()” method.

In consonance with this idea, below I've coded a brand new example that demonstrates how to move the previous div to the right by assigning a new value to its “left” coordinate. Here it is:

<!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 left coordinate of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'left': 600}, 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 left 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>

The above code fragment is self-explanatory, isn’t it? As you can see, in this case the “gx()” method will assign a final value of 600px for the “left” property of the selected div, which obviously will make the element move to the right of the screen. If you need to shift the element back to the left, then assigning a negative value to the property in question will do the trick nicely. The only detail worth nothing here is that the div has been positioned absolutely with reference to its parent; keep this requirement in mind when manipulating an element’s “top” and “left” coordinates.

So far, so good. At this stage you saw how easy it is to move an HTML element horizontally on the browser using the classic approach with the “gx()” method. However, the earlier example would be incomplete if I didn’t show you how to displace the element vertically. To address this issue, in the next section I’ll be coding a final hands-on example that will demonstrate how to implement this animation in a few basic steps.

Now, click on the link below and read the lines to come.

Next: Moving divs up and down >>