Tuesday, January 18, 2011

HTML 5 logo unveiled by W3C

HTML5Imagination, meet implementation. HTML5 is the cornerstone of the W3C's open web platform; a framework designed to support innovation and foster the full potential the web has to offer. Heralding this revolutionary collection of tools and standards, the HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts.


W3C unveiled today an HTML5 logo, a striking visual identity for the open web platform. W3C encourages early adopters to use HTML5 and to provide feedback to the W3C HTML Working Group as part of the standardization process. Now there is a logo for those who have taken up parts of HTML5 into their sites, and for anyone who wishes to tell the world they are using or referring to HTML5, CSS, SVG, WOFF, and other technologies used to build modern Web applications. The logo home page includes a badge builder (which generates code for displaying the logo), a gallery of sites using the logo, links for buying an HTML5 T-shirt, instructions for getting free stickers, and more. The logo is available under "Creative Commons 3.0 By" so it can be adapted by designers to meet their needs.

Wednesday, January 5, 2011

Updating(Replace) anchor href values in a webpage

Using the jquery One can update attribute values of html elements in a simple steps .
The following jquery script will update the href value of all the anchor links those
 available in a web page to a static url http://www.tecrocks.com.

$('a[href]').attr('href', 'http://www.tecrocks.com');

This will be helpful for the situation like displaying the webpage content in a custom print preview page like so.
The following block will update all the href value in page without considering the element of the href value.

$('[href]').each(function () {
  $(this).attr('href', 'http://www.tecrocks.com');
});

Using *= filders with in [] we can filter the href url's.

Tuesday, January 4, 2011

Truncating(Clip) Excess text with Ellipsis in HTML5

      Text-overflow property in CSS gives the way to deal with the clipped text when the actual text content size is exceed the container box.
      'text-overflow' css attribute allows the text to be clipped when its exceed the allowed display area by setting text-overflow value as ellipsis, it will display ellipsis( three periods) following the clipped text.

.cliptext 
       {
            color: #eee;
            border: 1px solid #000000;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

To get this ellipsis effect when the content fall outside the box you may need to set the boxs overflow property to hidden or scroll and white-space  property to  'nowrap'.

If you have any comments or suggestions in setting ellipsis please leave a comment.