CODEWITHSUNDEEP
javascriptjquerycsshtmlposition
robotturtle
robotturtle

Reputation: 71

Output sibling divs next to each other using jQuery

I'm trying to create the thumbs next to each other but it's not working. It appears to be outputting them on top of each other. I want them to be 5px apart.

--- I need positioning to be absolute. I need that so that after I get them all next to each other, I want the one that's clicked to grow, and all the ones to the left should disappear to the left, all those right should go right. Absolute Positioning is needed so that I can control that.

HTML

<div class="portItem">
    <div class="itemContent-wrap">
        <div class="itemContent">
            <div class="container">
                <div class="thumbWrap">
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.thumb {
  height: 200px;
  width: 450px;
  position: absolute;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
  transition: all 1s ease-in-out;
  top: 0;
  left: 0;
}

Javascript

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $('.thumb', this).each(function(i) {
              $('.thumb').css('left',40*i);
         }).appendTo('.body');
     });
});

Fiddle: http://jsfiddle.net/nTHDk/11/

Solution!: http://jsfiddle.net/nTHDk/14/

Thank you in advance!

Upvotes: 0

Views: 1294

Answers (4)

Jamal Khan
Jamal Khan

Reputation: 471

First of all add jQuery to your fiddle, and you are actually moving all the .thumb elements in the inner each loop, you have to use $(this), like this:

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $(this).find('.thumb').each(function(i) {
              $(this).css('left',50*i);
         }).appendTo('.body');
     });
});

This is the new Fiddle

Upvotes: 0

Jasper
Jasper

Reputation: 76003

$('.thumb').css('left',40*i); should be $(this).css('left',40*i);. You were selecting all .thumb elements in the DOM but you've already selected the correct one at that point.

http://jsfiddle.net/nTHDk/8/

Upvotes: 1

avrahamcool
avrahamcool

Reputation: 14094

you have a lot of typos in your code:

see this updated Fiddle

  1. you didn't add Jquery to your fiddle.
  2. in the fiddle you don't need to write the document.ready
  3. for each selection use $(this).css('left',40*i +"px"); //notice this and px
  4. you'r box sizes were too big to notice the movement, I reduced them.
  5. I removed the appendTo, the elements are already located in your DOM (did you wish to move them?)
  6. if you wish to use the appenedTo function, fix the selector to $('body')

Upvotes: 2

Chris Rockwell
Chris Rockwell

Reputation: 1852

Change position:absolute to position:relative and $('thumb').css('left', 40*i) to $(this).css('left',40*i);

The change to JavaScript isn't necessary, but they way you are doing it is redundant. The change to CSS will get your spacing. When you use position:absolute they are all positioned on top of each other.

Upvotes: 0

Related Questions