Bargraph as a CSS styled and JS counted table

Inspirated by article at Khmerang.com.

This version does not use images and height of graph columns is automaticly counted by javascript.

CSS Code:

body {
        background:#eee;
        color:#333;
}
a {
        color:#666;
}
a:hover {
        color:#000;
}
table {
        border-collapse:collapse;
        width:49em;
        font:.6em/2em Arial;
}
td {
        padding:0;
        margin:0;
        vertical-align:bottom;
        text-align:center;
        background:#eee;
}
th {
        background:#cdc;
        border-bottom:.1em solid #666;
}
span {
        display:block;
        border-right:.1em solid #666;
        border-top:.1em solid #ccc;
        border-left:.1em solid #fff;
        background:#cdc;
        width:4em;
        padding:0;
        margin:0 .2em;
}

JS Code

If you dont like javascript and want just use a css code you can uncomment line with span.innerHTML and script will help you to count, value of each span height.

function AutoBarGraph(){
var tr=document.getElementById('graph')
var td=tr.getElementsByTagName('td');
for(var i=0;i<td.length;i++){
span=document.createElement('span')
valHeight=parseFloat(td[i].childNodes[0].nodeValue)/6000;
setTitle=td[i].childNodes[0].nodeValue;
span.setAttribute('title',setTitle);
//span.innerHTML='style=\"width:'+Math.round((setTitle/6000)*100)/100+'em\"';
span.style.height=valHeight+'em';
td[i].appendChild(span)
}}
if(document.childNodes){window.onload=AutoBarGraph};

Example:

Test it on working example.

Tested in Firefox 0.7+, IE 5+, Opera 7.23+

Use script and style as you want.

Clear all inputs value on focus

This small function help you to clear predefined value of all inputs on your website

Code:

function init(){
var inp=document.getElementsByTagName('input');
for(var i=0;i<;inp.length;i++){
if(inp[i].type=='text'){
inp[i].setAttribute('rel',inp[i].defaultValue)
inp[i].onfocus=function(){
if(this.value==this.getAttribute('rel')){this.value='';}
else{return false;}}
inp[i].onblur=function(){
if(this.value==''){this.value=this.getAttribute('rel');}
else{return false;}}
inp[i].ondblclick=function(){this.value=this.getAttribute('rel')}
}}}
if(document.childNodes){window.onload=init}

You can use any onload event which suite to your needs. I am using this one:

if(document.childNodes){window.onload=init}

, because it will works only when function is supported. It is just small prevention of error in MSIE 4

Example:

Test it on styled working example. To view it in action just give some input focus.

Tested in Firefox 0.7+, IE 5+, Opera 7.23+

Use script and style as you want.

JS Generated print header content MSIE

function genCon(){
var obl=document.getElementById('obal')
var h1=obl.getElementsByTagName('h1')
for(var i=0;i<h1.length;i++){
var gen=document.createElement('pre');//impossible to create <br> with \n in span, that is why <pre>
var textik=new Array('Pavlova 123/4 160 00 Praha 6 - Dejvice','tel:123 456 789','info@neco.cz','www.neco.cz');
gen.appendChild(document.createTextNode(textik.join("\n")));
gen.style.font='normal normal bold 12pt 2px \'Trebuchet MS\', \'Geneva CE\', lucida, sans-serif';
gen.style.display='none';
gen.className='iegen';
h1[i].appendChild(gen);
}}
if(document.childNodes&&document.uniqueID){window.onload=genCon;}

Generated Generated print header content Gecko and Opera: CSS

body{background:#fff !important;font-size:12pt;}/*every Opera version has different bug, opera 9 do not remove background in print style*/
#navi,.obr,#patka{display:none;}
#obsah,h1{width:auto;margin:0 5%;padding:0;border:0;float:none !important;color:black;background:transparent none;}
div#obsah{margin-left:10%;padding-top:1em;border-top:1px solid #000;}
a:link, a:visited{color:#444;background:transparent;font-weight:bold;text-decoration:underline;}
#obsah a:link:after, #obsah a:visited:after{content:" (" attr(href) ") ";font-size:90%;}
h1:after{content:'Pavlova 123/4 160 00 Praha 6 - Dejvice \00000a  tel:123 456 789 \00000a  info@neco.cz\00000a  www.neco.cz' !important;display:block;white-space:pre;font-size:12pt;}
:before,:after{white-space:pre-line;}
option{display:block;}
h1 a{text-decoration:none !important;border:none;font-size:18pt;color:#000;}
.iegen{display:block !important;}

Result:

This will add to print header just under <h1> this:

Pavlova 123/4 160 00 Praha 6 - Dejvice
tel:123 456 789
info@neco.cz
www.neco.cz

Example:

Test what is this good for, on bit styled working example. To view it in action just choose print preview in your browser.

Tested in Firefox 0.7+, IE 5+, Opera 7.23+

Use script and style as you want, don't steel design.