JSFiddle - React, Tailwind, and code Playground

by dwaddell

HTML

<div id="ContainingDiv">
    
    <textarea id="TextareaOne"></textarea>
    
    <br/>
    <br/>
    
    <textarea id="TextareaTwo"></textarea>

<br/>
    <br/>
    
    <textarea id="TextareaThree"></textarea>
<br/>
    <br/>
    
    <textarea id="TextareaFour"></textarea>    
</div>


<div id="InformationDiv">
    <div>Information Div</div>
    <div id="CursorPositionInformation"></div>
    <div id="TextareaPositionInformation"></div>
    <div id="EventInformation"></div>
</div>

CSS

#ContainingDiv
{
 border-style:solid;
border-width:1px;    
}

#InformationDiv
{
 border-style:solid;
    border-width:1px;
    border-color:blue;    
}


.EventError
{
background-color:red;        
}

JavaScript

$('#ContainingDiv').on('click', function(event) {
    console.log('Clicking in the container..');
    console.log(event.target);

    $('#EventInformation').empty().append('<div class="InformationDetail">Clicked: '+event.target.id+'</div>');
});

$(document).mousemove(function(e) {
    $('#CursorPositionInformation').html("Cursor Position: " + e.pageY + ', ' + e.pageX);
});


var oOffsetOne = $('#TextareaOne').offset ();
var oOffsetTwo = $('#TextareaTwo').offset ();
var oOffsetThree = $('#TextareaThree').offset ();
var oOffsetFour = $('#TextareaFour').offset ();

$('#TextareaPositionInformation').append('<div>Textarea One Position: '+oOffsetOne.top +'</div><div>Textarea Two Position: '+oOffsetTwo.top +'</div><div>Textarea Three Position: '+oOffsetThree.top +'</div><div>Textarea Four Position: '+oOffsetFour.top +'</div>');

$('#TextareaOne')
    .on('mousedown', function(event) { $.ajax (
        { url : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
          async : true,
          complete : function () { console.log("AJAX COMPLETE"); }
         } );
         console.log("TextArea1 Mousedown");                             
        } )
    .on('click', function() {console.log("TextArea1 Click");});
        
$('#TextareaTwo')
    .on('mousedown', function(event) { $.ajax (
        { url : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
          async : false,
          complete : function () { console.log("AJAX COMPLETE"); }
         } ); 
         console.log("TextArea2 Mousedown");                              
        } )
    .on('click', function() {console.log("TextArea2 Click");});