codepaq: Javascript

Showing posts with label Javascript. Show all posts

Thursday, April 13, 2017

Quick Javascript Timer

Example of a quick hh:mm:ss timer

<!doctype html>
<html>
<head><title>Timer After 10 seconds</title>
<style>
body{font-family: Arial; line-height: 1.5em; color: #333;}
.timer{font-size: 100px; line-height: 120px;}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
</head>
<body>
<h1>Hour Min Timer Example</h1>
<p>
<ul>
 <li>Timer should appear after 10 seconds of lapse of user inactivity with mouse and keyboard</li>
 <li>Timer format can be hh:mm:ss or hh:mm.
 <li>Second value that is updated at every second is an intuitive indicator that this is a timer.
</ul>
</p>
<div class="timer">
 <span class="timeOutput" id="timeOutput"></span>
</div>
<script>

// Reset and tick every second
var my = my || {};

my.friendlyTime = function( sec ){

 this.ss = "0" + (sec % 60);
 this.ss = this.ss.substring( this.ss.length-2, this.ss.length );
 this.mm = "0" + Math.floor( sec / 60 ) % 60;
 this.mm = this.mm.substring( this.mm.length-2, this.mm.length );
 this.hh = "0" + Math.floor( sec / 3600 );
 this.hh = this.hh.substring( this.hh.length-2, this.hh.length );
};

my.display_time_since_pageload = function( initial_delay_sec, display_format, display_selector){
 /*
  initial_delay_sec: seconds to wait to display the ellapsed time
  display_format: "hh:mm:ss" or "hh:mm"
  display_selector: location to display the elapsed time. must be jQuery-format selector
 */
 var totalSec = 0;

 setInterval(function(){
 
  totalSec++;
  //console.log( "totalSec = " + totalSec );
  
  if( totalSec >= initial_delay_sec ){

   var t = new my.friendlyTime( totalSec );

   if(display_format == "hh:mm:ss") {
    $(display_selector).html( t.hh + ":" + t.mm + ":" + t.ss );
   }
   if(display_format == "hh:mm") {
    $(display_selector).html( t.hh + ":" + t.mm );
   }
   //console.log( "t.hh = " + t.hh + ", t.mm = " + t.mm + ", t.ss = " + t.ss ); 
  }
  
 }, 1000);
};

$(function(){
 my.display_time_since_pageload( 10, "hh:mm:ss", "#timeOutput" );
});

</script>


</body>
</html>

Wednesday, August 20, 2014

onclick event handler - get reference to the clicked element

There are a couple of ways to get the reference to the clicked element, which has onclick event on itself.

Method 1

<input type="button" id="btn1" value="Remove" onclick="removeSelf(event)" />

<script type="text/javascript">
  function removeSelf(e){
    var target = (e.target) ? e.target : e.srcElement // IE uses srcElement
    target.style.display = 'none'; 
    target.parentNode.removeChild( target ); // to remove the element
    $(target).remove(); // to remove the element using jQuery
  }
</script>

In Method 1, event is used as parameter. An Event object is created automatically whenever an event is fired, i.e., via user action, key press, mouse movement, etc. To find the source where the event occurred, the property name is either target or srcElement (in IE).

Method 2

<input type="button" id="btn1" value="Remove" onclick="removeSelf(this)" />

<script type="text/javascript">
  function removeSelf(object){    
    object.style.display = 'none';
    target.parentNode.removeChild( target ); // to remove the element
    $(target).remove(); // to remove the element using jQuery
  }
</script>

Saturday, February 15, 2014

jQuery UI dialog jump issue workaround

When jQueryUI Dialog is used with "draggable = on", it would jump down by the scroll offset of parent page when the Dialog is being dragged via mouse. One of the nice workarounds to keep the draggable jQuery UI dialog in proper position without "jumping down" would be to set the dialog's parent position to 'fixed'. (By the way, this is the default behavior of Bootstrap's default modal window behavior, too.)

Below is a simple example to implement this workaround to a jQuery UI dialog. This works equally well for both modal and non-modal dialogs.

$(function(){
  $('#dialog_1').dialog({
    autoOpen: false,
    create: function( event ){  
      // set dialog's parent position to 'fixed' under the create event    
      $( event.target ).parent().css( 'position', 'fixed' );
    }
  });
  $('#btn_1').click(function(){
    // to reposition the dialog to the center when re-opened
    $('#dialog_1').dialog( 'option', 'position', 'center' );
    $('#dialog_1').dialog( 'open' );
  });
});

Hopefully, this workaround will provide better user experience on top of all the great features in jQuery UI library.

Thursday, November 15, 2012

Check if Enter Key has been pressed

I keep forgetting the simple way to check if the Enter Key has been pressed while filling out a form. All too often, users assume the presence of default button for the Enter Key next to textboxes that they fill out...

/*
1. Check if Enter Key has been pressed
2. If Enter Key has been pressed, 
   bind click event with a handler to the default button among siblings.
3. Trigger click() event
*/
$('input[type=text]').bind({   
  keypress: function( event ) {
    if( checkIfEnterKeyPressed() ){ //1.Check if Enter Key has been pressed
      var message = 
        'Enter key has been pressed while in ' + $(this).attr('id') + '.';
      $(this).siblings('.defaultButton').bind( //2. Bind click event handler
        'click', 
        { msg: message }, 
        function( event ){
          alert( event.data.msg + '\n' + $(this).val() + ' has been clicked()' );
        }
      ).click(); //3. Trigger click event
    }
  }
});

function checkIfEnterKeyPressed() {  
  var keycode = ( event.keyCode ? event.keyCode : event.which ); 
  return ( keycode == '13' ? true : false );
}