InfraHTML: Cross-browser

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.

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.

InfraHTML

Monday, January 6, 2014

jsTransform - Event Fixed (Version 1.0)

Wednesday, December 18, 2013

Javascript - console undefined

Thursday, December 12, 2013

jqTransform - Introduction

jQuery plugin - jqTransform

Introduction

Programming Principal

Monday, December 9, 2013

Javascript - parseInt

Sunday, December 8, 2013

Javascript - Array functions