asked on

moving div within another div

i have a div that is 500px wide and 500px height. this is my frame

in this, i need to have another div that is 500px height, but 2500px wide.

this inner div will have 5 images arrange horizontally. each image is also 500 x 500

when i click on a button below, the inner div should move to left and show the next image. it should be like a floating effect, smooth.

please show me the javascript/css/html etc. to achive this.

Important - browser window should NOT get any scrollbars because the inner div is so wide

Bardobrave

Well... let's see...

What you are asking for seems pretty much like an image carousel, you have hundreds of them free and ready to use on the internet.

I highly recommend you to use one of those instead of trying to reinventate the wheel.
Check some of them here:
http://www.pixelzdesign.com/blog_view.php?id=55

Julian Hansen

I believe this does what you want

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#next').click(function(e) {
    e.preventDefault();
    $('#slides').animate({left: '-=500px'}, 'slow', function() {
      $('#slides').append($('#slides div').first().detach()).css({left: '0px'})
    });
  });
  $('#prev').click(function(e) {
    e.preventDefault();
    $('#slides').css({left: '-500px'}).prepend($('#slides div').last().detach());
    $('#slides').animate({left: '+=500px'}, 'slow');
  });
});
</script>
<style type="text/css">
#container {
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
}
#slides {
  width: 2500px;
  position: absolute;
  left: 0:
  right: 0;
}
div.slide {
  width: 500px;
  height: 500px;
  float: left;
}
</style>
</head>
<body>
<div id="container">
  <div id="slides">
    <div class="slide" style="background: blue">
    </div>
    <div class="slide" style="background: red">
    </div>
    <div class="slide" style="background: green">
    </div>
    <div class="slide" style="background: yellow">
    </div>
    <div class="slide" style="background: gray">
    </div>
  </div>
</div>
<div>
  <a href="#" id="prev">&lt;&lt; prev</a> &nbsp; <a href="#" id="next">next &gt;&gt;</a>
</div>
<div id="test"></div>
</body>
</html>

Open in new window

It is quite simple to make it not cycle but I thought cycling is better.
There are many plugins to do this but it requires only a few lines of code and you avoid some bloat avoiding extra functionality you don't need.

RTKHOT

ASKER

julianH =>this seems to be perfect.

please help me with removing the cycling as i am not familiar with jscript.

it should end at the last color

i will award points tomorrow

thanks for early reply

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RTKHOT

ASKER

thanks

RTKHOT

ASKER

due to the nature of my page, i am not able to give it a position style. see below:

<article id="artUpper">
<div id="divContainer" style="height:100%;width:100%;outline:px fuchsia solid;overflow:scroll;">
<div id="divSlides" style="height:100%;width:200%;border: 2px blue solid;">
<table cellpadding="0" cellspacing="0" border="0" width="50%" height="100%" style="float:left">

here, i will have multiple tables that are the slides. because there is no position style, i am assuming that is causing it to fail. correct?

Julian Hansen

Not sure what you mean you can't have a position style?

Without your full code I can't see what you are referring to or how you have implemented your slides.

If you put yur slides inside divs it shouldn't matter what is in them as long as they are a fixed width?