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

Good Examples of HTML 5

Demos and examples of HTML 5 Tutorials

HTML 5 Examples

Prototype Performance test file - Dom

Prototype Performance test file
Dom
Element#getHeight 52 ms 31 ms 41 %
Element#getWidth 32 ms 30 ms 7 %
Element#geOpacity 13 ms 11 ms 16 %
Element#descendants 56 ms 40 ms 29 %
Element#ancestors 7 ms 4 ms 43 %
Element#previousSiblings 16 ms 13 ms 19 %
Element#nextSiblings 17 ms 13 ms 24 %

Easy color codes and Web animation tools

Here I have placed a website to find codes for every color of your choice.

http://www.2createawebsite.com/build/hex-colors.html


Also here for Web design tools

http://www.bellsnwhistles.com