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

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
0
RTKHOT
Asked:
RTKHOT
  • 3
  • 3
1 Solution
 
BardobraveCommented:
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
0
 
Julian HansenCommented:
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.
0
 
RTKHOTAuthor Commented:
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
Sure - here is the same code with two extra links and two extra functions showing a non-cycling approach
<!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() {
  $('#nextnc').click(function(e) {
	e.preventDefault();
    if ($('#slides').css('left') != '-2000px') {
      $('#slides').animate({left: '-=500px'}, 'slow');
	}
  });
  $('#prevnc').click(function(e) {
	e.preventDefault();
    if ($('#slides').css('left') != '0px') {
      $('#slides').animate({left: '+=500px'}, 'slow');
	}
  });
  $('#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>
  <a href="#" id="prevnc">&lt;&lt; prev No Cycle</a> &nbsp; <a href="#" id="nextnc">next No Cycle &gt;&gt;</a>
</div>
<div id="test"></div>
</body>
</html>

Open in new window

0
 
RTKHOTAuthor Commented:
thanks
0
 
RTKHOTAuthor Commented:
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?
0
 
Julian HansenCommented:
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?
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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