• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 255
  • Last Modified:

Simple Javascript Animation

Hi All,
I'm not very strong on JavaScript, but I need to dabble in a little simple animation.  What started out as seemingly simple is perhaps going to be a little more complicated than I thought.

What I want to do is have 5 <div>s displayed in a fixed position on my page. The divs will contain text and pictures. Only one div is displayed at a time, and every 5 seconds, the next div slides over the top of the current div (from right to left) until it is completely obscured. At the conclusion of the fifth, it starts again with number 1.

I think I can handle the actual movement, using setTimeout and manipulating the position of the div with document.getElementById('mydiv').style.left = [some number], looping through to move it from position a to position B.  (Feel free to suggest an alternative)

There are two issues I don't have a solution for.

The first is, how do I hide the part of the sliding div that falls outside the fixed div area?
and second, how do I manipulate the relative stacking of the sliding div so that it's now on top of the others?

Any suggestions?
1 Solution
The answer to you first question is that you need it to be in a container which has the property overflow:hidden;
That property cuts of every overflow, and also disables scrollbars. (The image will be clipped.)

Then place the div's in it. Example is in the codebox at number one.

For your second question you need to use the z-index, a higher z-index means that it's on top.
I recommend using JQuery, it's very powerful and flexible, check it out at http://www.jquery.com/
I learned to use JQuery in less then 2 hours (including effects and stuff), check out: http://docs.jquery.com/Tutorials:How_jQuery_Works
You find the code under 2.

    /* Normal styling of that element */
    overflow: hidden;

<div class="container">
  <div id="item1"><!-- CONTENT HERE --></div>
  <div id="item2"><!-- CONTENT HERE --></div>
  <!-- MORE HERE -->


HTML: see 1

  div.container div
    z-index: 1;

  div.container div.onTop
    z-index: 2;

JavaScript (using JQuery):
<script type="text/javascript">
  function putOnTop(id)
    $("div.container div.onTop").removeClass("onTop"); // Make them all normal again
    $("div.container div#" & id).addClass("onTop"); // Make that one onTop.

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now