InfraHTML

Monday, January 6, 2014

jsTransform - Event Fixed (Version 1.0)

After some time for the development and look through the Stackoverflow to study for the need of difficulties, the jqTransform has many aspects needed to be fixed and modified.
However, i still give my first version now.

(I do not give a packed for the example because not one need it, no one wants it.)

jqtransform-dev-2.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/js/jqtransform/jquery.jqtransform.js"></script>

<link rel="stylesheet" href="/js/jqtransform/jqtransform.css" />
<link rel="stylesheet" href="/js/jqtransform/jqtransform-theme.css" />

<script type="text/javascript">
$(function(){
 $('form.jqtransform').jqTransform({imgPath:'/js/jqtransform/img/'});
});

function onFocusHandler(elem, e){
 elem = $(elem);
 console.log('onFocusHandler - id: ' + elem.attr('id'));
}
function onClickHandler(elem, e){
 elem = $(elem);
 console.log('onClickHandler - id: ' + elem.attr('id'));
}
function onChangeHandler(elem, e){
 elem = $(elem);
 console.log('onChangeHandler - id: ' + elem.attr('id'));
}
function onBlurHandler(elem, e){
 elem = $(elem);
 console.log('onBlurHandler - id: ' + elem.attr('id'));
}
</script>
</head>
<body style="padding:20px;">
<h1>jqTransform - enhancement</h1>

<br/>
<form class="jqtransform" id="form1">
 <div class="rowElem">
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>
 <div class="rowElem">
  <label for="nickname">Nickname:</label>
  <input type="text" id="nickname" name="nickname" value="Raymond" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>
 <div class="rowElem">
  <label>Gender:</label>
  <input type="radio" id="gender_m" name="gender" value="m" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="radiovalue" for="gender_m">M</label>
  <input type="radio" id="gender_f" name="gender" value="f" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="radiovalue" for="gender_f">F</label>
 </div>
 <div class="rowElem">
  <label>Interest In:</label>
  <input type="checkbox" id="programming" name="programming" value="programming" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="checkboxvalue" for="programming">programming</label>
  <input type="checkbox" id="hiking" name="hiking" value="hiking" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="checkboxvalue" for="hiking">hiking</label>
 </div>
 <div class="rowElem">
  <input type="button" id="button" value="Button" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>

 <div class="rowElem"></div>
</form>
<br/><br/><br/><br/>

<form id="form2">
 <div class="rowElem">
  <label for="fullname2">Full Name:</label>
  <input type="text" id="fullname2" name="fullname2" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>
 <div class="rowElem">
  <label for="nickname2">Nickname:</label>
  <input type="text" id="nickname2" name="nickname2" value="Raymond" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>
 <div class="rowElem">
  <label>Gender:</label>
  <input type="radio" id="gender_m2" name="gender2" value="m" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="radiovalue" for="gender_m2">M</label>
  <input type="radio" id="gender_f2" name="gender2" value="f" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="radiovalue" for="gender_f2">F</label>
 </div>
 <div class="rowElem">
  <label>Interest In:</label>
  <input type="checkbox" id="programming2" name="programming2" value="programming" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="checkboxvalue" for="programming2">programming</label>
  <input type="checkbox" id="hiking2" name="hiking2" value="hiking" checked="checked" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
  <label class="checkboxvalue" for="hiking2">hiking</label>
 </div>
 <div class="rowElem">
  <input type="button" id="button2" value="Button" onfocus="onFocusHandler(this,event);" onblur="onBlurHandler(this,event);" onclick="onClickHandler(this,event);" onchange="onChangeHandler(this,event);"/>
 </div>

 <div class="rowElem"></div>
</form>
<br/>
<br/>
</body>
</html>

jqTransformed form

Before jqTransform

The html contains two forms, and the input elements have HTML attributes for event. Onfocus, onclick , onchange and onblur gives a message log in the console of the browser.

And here is the jqTransform js file.
I wont give explanation this time, since it is not perfect. Some code may need big change in the future versions.

jsTransform - Select Box Repopulation

When doing a select box using jqTransform, some people might want to receive the option items from a Ajax request and use the result as the new option items.

However, since the update in select's options will be automatically reflected to the jqTransform to respond, the updated option list seems not be able to be updated. In face, the updated is made, only to be hidden select box, but not to the jqTransform wrapper for select box.

Therefore, we need to revalidate the jqTransfromation on the dynamically updated select box.

I will modify the jquery.jqtransform.js, on the Select section:

original code is:


/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden')) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

Modify code is:


/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(isRefreshOptionList){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden') && isRefreshOptionList !== true) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  
  if (typeof isRefreshOptionList != 'undefined' && isRefreshOptionList === true){
   $parent = $select.parent();
   if ($parent.hasClass('jqTransformSelectWrapper')){
    $select.parent().children().not($select).each(function (){
     $(this).remove();
    });
    $select.removeClass('jqTransformHidden').unwrap($select.parent());
   }
  }
  
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

isRefreshOptionList parameter becomes a optional variable that controlling a select box to be revalidated.
After your Ajax request and put the new option list into the select box. You can call:


$('#select-box-id').jqTransSelect(true);

to repopulate the option list.

Javascript - console undefined

Console is not implemented in old browsers, e.g. IE 8 or below. So if your code contains console.xxx() , it gives error and terminates in your script.

Therefore, to give support of cross-browsers to your webpage, you can include a global javascript file which will probably being included in most of the html files. And put the following code to it.


/** for browsers does not have console to avoid error -- strat **/
if (!window.console && !console){
 var console = new MyConsole();
}

function MyConsole(){
 this.log = function log(str){}
}
/** for browsers does not have console -- end **/

Console in different browsers might have different functions, here is some general functions. You might add all to the MyConsole class.

"log", "info", "warn", "error", "debug", "trace"

There are several solutions to support console in the internet, you might check them out also.

Sunday, December 15, 2013

jqTransform - Problem(1) - Events

In this article, I will first give a HTML for demonstrating the jqTransform on a simple form with input elements including textfield, radio button , checkbox and button.
I also attach labels for those input elements, since jqTransform plugin also implement the label as what in html native label does.

For the select box, it is the most complicated part in jqTransform and it will be scheduled to be improved at the last stage.

For this stage, I focus on the event handled in jqTransfrom because this part is not fully implemented in the original source code.

Here is a testing HTML file to test the events(foucs , click , change and blur) handled in input elements (textfield, radio button , checkbox and button):

Test Demo

jqTransform - Introduction

jQuery plugin - jqTransform

Introduction

jqTransform is a jQuery plugin created by DFC Engineering which can beautify form input elements.

Visit author website http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ to have a first glance of the demo of this plugin, and the github here https://github.com/jcamenisch/jqTransform.

However, sadly, according to the github, this jqTransform project has been abandoned. The highlighted point is

Also, most of us have used it only for styling of select elements, and paid no attention at all to the rest of the code.

jqTransform is under GPL License which means we developers can modify jqTransform and use it freely.

Programming Principal

The principal of jqTransform is easy enough to understand and the source code are clean and readable.

For a certain element going to be styling by jqTransform, the plugin add a wrapper surrounding the input element and let the wrapper apply CSS with pre-written in .css file.

When it comes to CSS styling, it concerns about cross-browser problem in which most of the CSS problem is done by the author.

Javascript - parseInt

If using latest version of browser can see parseInt("012345") giving number 12345 as output.
However, in some old browser, e.g. IE 8 , if the string parameter starts with a "0", it uses octal radix(8) to convert the string.
In IE 8, parseInt("012345") gives number 5349 as output, where it uses 8 as radix instead.

Javascript - Array functions

var fruits = [ "apple" , "orange" , "lemon" , "berry"];
var fruits = new Array( "apple" , "orange" , "lemon" , "berry");

Both array instantiations are the same and correct, in which new Array(...) is a more formal way to do that.
Since Javascript is lose type language, it does not care the data type inside the array. Or even you could have a mixed data type with integer and string inside an array.