Question

I have a 10000px DIV. Within this DIV I have various 500px DIV’s as below:

<div class="huge-div">
   <div class="some-div">
   <div class="some-div">
   <div class="new-div">
   <div class="new-div">
   <div class="new-div">
</div>

I need to find the first DIV with the class “new-div” and reposition the “huge-div” so it shows the first “new-div” to the left of the browser/view.

So far, I can find the first DIV, add it a new class (to change its color) but not sure how to tell it to line-up the “huge-div” to the left, based on the “new-div” first appearance.

$('.new-div').first().addClass('great').---line-up "huge-div" to the left---();

//

Answer 1

Like this?
http://jsfiddle.net/8WYpW/1/

Add a wrapper:

<div class="huge-div">
    <div class="wrapper">
       <div class="some-div">test</div>
       <div class="some-div">test</div>
       <div class="some-div great">great</div>
       <div class="some-div">test</div>
       <div class="some-div">test</div>
    </div>
</div>

Then position based on a negative margin:

$(function() {
    setTimeout(function() {        
        $('.huge-div').animate({marginLeft: -$('.great').offset().left});
    }, 1000);
});

Edit

To directly go there use css instead of animate:

$('.huge-div').css({marginLeft: -$('.great').offset().left});