Dec 242013
 
New Indian Rupee Symbol in HTML Websites

In this post I will explain how to display Indian Rupee symbol in HTML pages. Before that let’s go to history of  Indian Currency Symbol(₹).

The Union Cabinet approved Indian currency rupee symbol on 15 July 2010. And this Rupee symbol designed by Uday Kumar, Assistant Professor IIT Gauhathi.

It’s a combination of Devanagari Letter “र”(ra) and Latin Capital ‘R’ without vertical bar.(₹)

New Indian Rupee Symbol in HTML Websites

New Indian Rupee Symbol in HTML Websites

There are mainly two ways to display the Rupee Symbol I will explain One by One.

Just use  ₹ this code in HTML page to display Rupee Symbol. It will display symbol as shown below

One more method is by using Unicode Character of Indian Rupee Symbol.On August 10th 2010 Unicode Technical Committee accepted the Code position as U+20B9  Use the code ₹  in HTML page to display rupee symbol

But the problem with this method is Unicode will only be converted on the systems with Unicode version 6.0. The user with lower version of Unicode system may not able to see the Rupee symbol.

And more method is to use some third party Web API like Web Rupee. But I will not prefer to use this method as we have standard codes to display rupee symbol. It’s like for displaying ‘&’ in our webpages using some external library.

The above codes are widely accepted and used by many people around the world show Indian Rupee symbol(₹) in websites.

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me

And Finally Don’t Forgot to Join Our Reader List.

Apr 202012
 
In this post I will explain how to create a HTML table with fixed header & scroll-able body.
How we can Fix headers in a html table(Scroll Body). Here is the simple and nice solution. 


In Internet Explorer:
 
In IE we have a style option expression using this we can fix headers
Add following css code to tr tag in table (i.e.,th tag)
style=”position: relative; top: expression(this.offsetParent.scrollTop);”
But It will work only in IE 5+ . to fix headers in other browsers we have an alternate.

For all browsers:
This is actual table.
I have created two div inner,outer as shown below
(actual table)

< div class=”outer”>

< div class=”inner”>
< table> < thead> < /thead> < tbody> < /tbody> < /table>
< /div>
< div class=”Headers”>
< table> < thead> < /thead> < tbody> < /tbody> < /table> (dummy table)
< /div>
< /div>

And also I have created one dummy table as shown above with class Headers

In CSS I wrote following code.

.outer {
position:relative;//this is very imp
width:500px;
}
.inner {
height:150px;
overflow:auto;
}
.header {
position:absolute; //this is very imp
top:0;
left:0;
overflow:hidden;
}

In header we have position:absolute; when we declare position absolute it checks for it is parent tag ie., outer
If in outer if position is relative. Then
Where ever we write header div class in html document it always print relative to outer div class.
And top position is 0 in header ie., outer div header div overlap with each other.
Initially header div contain nothing

In jquery we are copying header from inner table to header table as shown below

$(document).ready(function() {
$(‘.header table thead’).html( $(‘.inner table thead’).html() );
$(‘.header’).css(‘width’, $(‘.inner table’).outerWidth() );
$(‘.header’).css(‘height’, $(‘.inner table thead’).outerHeight() );
});
 
If you have any doubt please free to contact me.
Optimization WordPress Plugins & Solutions by W3 EDGE