JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div id="holder"><a href="javascript:void(0);" id="main">Which ring?</a></div>

<div id="dropDiv">
  <pre> 
<img id="imgLISPLEC210" width="120" height="130" src="http://www.locusit.com/pmo/staffImages/maregowda.jpg">
 
The one ring to rule them all.
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hgggggggggggggggggggggggggggg
    ggggggggggggggggggggggggggggggg</pre>
</div>

CSS

#holder {
 position: absolute;
 top: 500px;
 left: 400px;   
}

#dropDiv {
 display: none;
 position: absolute;
 top: -40px;
 background: #ccc; 
}

JavaScript

var $dropDiv = $('#dropDiv');
$('#holder a').on('click', function() {
    // get position of the element we clicked on
    var offset = $(this).offset();

    // get width/height of click element
    var h = $(this).outerHeight();
    var w = $(this).outerWidth();

    // get width/height of drop element
    var dh = $dropDiv.outerHeight();
    var dw = $dropDiv.outerWidth();

    // determine middle position
    var initLeft = offset.left + ((w / 2) - (dw / 2));

    // animate drop
    $dropDiv.css({
        left: initLeft,
        top: $(window).scrollTop() - dh,
        opacity: 0,
        display: 'block'
    }).animate({
        left: initLeft,
        top: offset.top - dh,
        opacity: 1
    }, 5900, 'easeOutBounce');
});