Placeholder not cleared on focus to text field solution.

HTML 5 input field has not been cleared on focus to the text box. I faced this issue while developing blackberry applications. On focus to first time it will be cleared and second time placeholder has been considered as input string. So it is not been cleared. Actual Scenario: The placeholder is visible for the user and user has to delete in order to enter input string. Expected Scenario: Tapping on any input fields placeholder should be wiped out in order to enter user's input The same issue is also observed on IE 9. It happens due to older browsers JavaScript engines does not have the support to the placeholder. Look at the image here for the issue...

jQuery is having the fix for this issue. Here is the code to fix the placeholder issue with older browser.

 $('[placeholder]').focus(function() {  
  var input = $(this);  
  if (input.val() == input.attr('placeholder')) {  
   input.val('');  
   input.removeClass('placeholder');  
  }  
 }).blur(function() {  
  var input = $(this);  
  if (input.val() == '' || input.val() == input.attr('placeholder')) {  
   input.addClass('placeholder');  
   input.val(input.attr('placeholder'));  
  }  
 }).blur().parents('form').submit(function() {  
  $(this).find('[placeholder]').each(function() {  
   var input = $(this);  
   if (input.val() == input.attr('placeholder')) {  
    input.val('');  
   }  
  })  
 });  

Kknow more about the fix.

Ellipsis Text Message Using CSS

To add ellipsis into the long text use the below code. Mostly this will be useful in mobile development to fit the text in a small space. Ellipsis will be helpful in place of shrinking the text. Using CSS for Ellipsis will make your code simple and reusable in many places throughout your application. HTML Structure:
<ul data-role="listview" data-theme="f" data-dividertheme="g" data-inset="true" class=" listellipse " >
               <li data-role="list-divider"><span id="txt_paybill_msg"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
</ul>

CSS:

.listellipse li:not(:first-child){

     display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

}

.listellipse li:not(:first-child) span:first-child{

     width:45%;

     display:inline-block;

     white-space: pre;           /* CSS 2.0 */

     white-space: pre-wrap;      /* CSS 2.1 */

     white-space: pre-line;      /* CSS 3.0 */

     white-space: -pre-wrap;     /* Opera 4-6 */

     white-space: -o-pre-wrap;   /* Opera 7 */

     white-space: -moz-pre-wrap; /* Mozilla */

     white-space: -hp-pre-wrap;  /* HP Printers */

     word-wrap: break-word;      /* IE */

}

CSS Background Image

Background image using css

body{

                background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #f9e8d8),
color-stop(20%, #f9d8d1),
color-stop(40%, #f3bac1),
color-stop(60%, #ce7996),
color-stop(80%, #934b73),
color-stop(100%, #3f1b3f));
}


Good MobileUI Site

Ajax based CSS3 process icon

CSS3 ajax loading icon or processing image using CSS3

http://www.sitepoint.com/css3-ajax-loading-icon/#fbid=QJYTnoNrqwt