Friday, November 12, 2010

Create counter using CSS and its benefits

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed on a page using the counter() or counters() function of the content property.
To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function.
<style type="text/css">tbody tr { counter-increment: rownum; }
 tbody { counter-reset: rownum; }
 table.name td.row:before { content: counter(rownum); } 
</style>
This code will apply counter to the table(class='name') and column (class='row')
Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing counters</title>
    <style type="text/css">
        tbody tr
        {
            counter-increment: rownum;
        }
        tbody
        {
            counter-reset: rownum;
        }
        table.name td.row:before
        {
            content: counter(rownum);
        }
    </style>
</head>
<body>
    <table class="name">
        <thead>
            <tr>
                <td>#</td>
                <td>Item</td>
                <td>Description</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="row"></td>
                <td>Mac</td>
                <td>Apple</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Windows</td>
                <td>Microsoft</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Ubuntu</td>
                <td>Linux</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Sun Solaris</td>
                <td>Sun</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 

Preview before sorting

Preview after sorting



Benefits
If you are using programmatic counters created using php or asp.net, and you apply table sorters the counter column also gets sorted. In some cases it does not matter but if it does then you can use the css counter because table sorters have no effect on them.
Posted by at No comments:

Clearfix for floats

When you use float on an element other styles like background color may not apply on it. So to workaround this problem we can create a class called clearfix. This class can be applied to all element containing floating elements.
for example consider this piece of xhtml code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing Clearfix</title>
    <style type="text/css">
 body
        {
            font: 13px/1.5em Tahoma;
        }
 
        .h-menu li
        {
            float: left;
            display: block;
            width: 100px;
        }
        .h-menu
        {
            background: Red;
        }
    </style>
</head>
<body>
    <ul class="h-menu">
        <li>Home</li>
        <li>Members</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</body>
</html> 

Well the background color of menu should be red but due to float the height of ul will be zero so we after clearfix to cancel the effect of floats and get the result we want.

/* ----- clear fix for floats ----- */
        .clearfix:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            display: inline-block;
        }
        /* hides clearfix from IE-mac \*/
        * html .clearfix
        {
            height: 1%;
        }
        .clearfix
        {
            display: block;
        }
        /* end hide from IE-mac */

After applying clearfix

<ul class="h-menu clearfix">
        <li>Home</li>
        <li>Members</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
 
Posted by at No comments:

Convert all HTML entities to their applicable characters in PHP

To convert  HTML entities to their applicable characters in PHP you can use the html_entity_decode function. It is easy to use function this is how it works
For example if you want to decode a variable

<?php
$orig = "I'll \"walk\" the <b>dog</b> now";
$a = htmlentities($orig); // To convert encode the string
$b = html_entity_decode($a); // To convert back

echo $a; // I'll &quot;walk&quot; the &lt;b&gt;dog&lt;/b&gt; now
echo $b; // I'll "walk" the <b>dog</b> now
?>
Posted by at No comments:
Subscribe to: Comments (Atom)