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?
chestertbearAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AidiakapiCommented:
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.
1.

CSS:
<style>
  div.container
  {
    /* Normal styling of that element */
    overflow: hidden;
  }
</style>

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

------------
2.

HTML: see 1

CSS:
<style>
  div.container div
  {
    z-index: 1;
  }

  div.container div.onTop
  {
    z-index: 2;
  }
</style>

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.
  }
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.