JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<link rel="stylesheet" href="http://www.saddleback.edu/faculty/tdedonno/cimw260/samples/eventTableTwilight.css">
<table style="width:90%;" border="1">
              <th colspan="4">Document events correspond to the entire document object - jsFiddle Document</th>
             </tr>
             <tr>
               <td colspan="4"><p class="testArea" id="document">Document  Test Area</p></td>
             </tr>
             <tr>
               <td>document.ready()</td>
               <td>Call CSS method so that every other row of this table has a light gray background (make sure it differentiates itself from eventTableTwilight.css)</td>
               <td>css</td>
               <td>&nbsp;</td>
             </tr>
             <tr>
               <td>document.scroll()</td>
               <td>On scroll set document test area, to <a href="http://api.jquery.com/scroll/">text scrolling using fadeout.</a></td>
               <td><a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein">fadeout</a></td>
               <td>&nbsp;</td>
             </tr>
             <tr>
               <td>window.<a href="http://api.jquery.com/unload/">unload()</a></td>
               <td>W3C <a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_unload">Unload example</a>. See what happens on IE exit the tab with eventTable.html loaded.  Chrome and Firefox updates both drop <a href="http://stackoverflow.com/questions/6063522/jquery-beforeunload">the unload event</a> this unload event only works on IE</td>
               <td>N/A</td>
               <td>N/A</td>
             </tr>
             <tr>
               <td>window.beforeprint</td>
               <td>Chrome 45 has <a href="https://bugs.webkit.org/show_bug.cgi?id=19937">a bug</a>,  does not detect beforeprint.</td>
               <td>alert</td>
               <td>Try File --&gt; Print</td>
             </tr>
 </table>

CSS

@charset "utf-8";
/* CSS Document */
body {
	background-color: #415D7A;
}

table {
	color : #222222;
	width : 90%;
	margin : auto;
	background-color : #eeeeee;
}

tr:nth-child( even ) { background-color: rgba( 200, 200, 200, 100 ); }

table, td, tr {
	border : medium solid #CECECE;
}

JavaScript

$(document).ready( function( ) {
    
    /* note on ready, this block for code is called
       we have been creating event handler, but you can execute code */
    $( "tr:odd" ).css( "background-color","rgba( 0, 150, 150, .5 )" );
    
    $( document ).bind( "scroll", function( e ) { 
        alert( "scrolling document eventObject:" + e 
              + "event Type:" + e.type );
        $( ".testArea#document" ).fadeTo( 'slow', 0.2 );
        //$( ".testArea#dcoument" ).fadeOut( 'slow' );
        /* note you can use location.reload( ); 
           to reload a document */
    } );
                       
	
/* 
	$(window).unload( function( ) {
		alert( "Sure you want to leave close this tab" );
	} ); */
	
	$( window ).bind( "beforeprint", function(e) { 
        alert( "hello before print" );
        e.preventDefault( ); //jsFiddle caused problems
    } );

	
} );//end of document.ready callback