Question

http://leaverou.github.com/animatable/

On this page, click a block and see the black box that appears. The black box will appear on either the left or the right of the numbered blocks, depending on which side of the block has more room. You can resize your browser window and the blocks will re-arrange so there’s only enough blocks on each line that will fit in the screen. So even when you re-size your browser window, the black box will still look to see which side of the block(that you clicked) has more room, and it will appear on that side.

I’m assuming this is done with jQuery, could someone describe the technique she used to do this? I couldn’t really find and understand it from looking at her code. I would like to learn the technique to do this, so a description of how to do this would be fine, an example even better. Thanks!

Answer 1

It seems pretty straightforward to me. She must bind to the onclick event and then find the distance between the left side of the element and edge of document and then right side of element and edge of document. Based on this she positions the box.

http://jsfiddle.net/uhHUM/1/

$('.box').click( function() {
    var leftEdge = $(this).offset().left;
    var rightEdge = leftEdge + $(this).width();
    var docWidth = $(document).width();

    $('#left span').html(leftEdge);
    $('#right span').html(docWidth - rightEdge);

    if ( leftEdge > (docWidth - rightEdge) ) { 
      //position left 
    }
    else { 
      //position right
    }
});