Find mr. blue

Find a position within a scoll box.

by Kees C. Bakker

HTML

<button id="AddBreak">Add break</button>
<button id="ClearBreaks">Clear breaks</button>
<button id="SwitchInnerHeight">Switch height</button>
<button id="ReadMrBlue">Read Mr. Blue</button>
<div id="spacer"></div>
<div style="height:100px; border:solid 1px black; overflow-y:scroll; position:relative;">
    Please scroll down...
    <br/>
    <div style="height:400px;" id="InnerHeight">
    </div>
    <br/>
    <div id="MrBlue" style="height:20px; background-color:blue; color:white">
        Mr. Blue
    </div>
</div>

JavaScript

//Find mr. Blue

$('#AddBreak').click(function(){   
    $('#spacer').append('<br/>');
});

$('#ClearBreaks').click(function(){   
    $('#spacer').html('');
});

$('#SwitchInnerHeight').click(function(){
    var h = $('#InnerHeight');
    if(h.height() == 400){
        h.height(100);
    }
    else {
        h.height(400);
    }
});

$('#ReadMrBlue').click(function(){   
    alert('jQuery: ' + $('#MrBlue').position().top);
    alert('Native: ' + $('#MrBlue')[0].offsetTop);
});