JS Playground

How to make div clickable

2008-12-14T12:49:00.002Z

I saw on some websites, that they don't know how to make div's clickable. So here is a simple solution.



function makeClickable(id){
    var elm=document.getElementById(id);
    if (elm){
        var ahref=elm.getElementsByTagName('a');
        for (var j=0;j<ahref.length;j++){
            var href=ahref[j].href;
            elm.onclick=function(){
                window.location=href;
                return false;
            };
        }
        var every=elm.childNodes;
        for (var i=0;i<every.length;i++){
            if (document.uniqueID){
                every[i].style.cursor='hand';
            }
            else{
                every[i].style.cursor='pointer';
            }
        }
    }
}
window.onload=function init(){
    makeClickable('yourId');    //edit here
    makeClickable('anotherId'); //another id here
};

This script will find id in div and make parent div clickable. That is all.

Russian transcriptor

2008-12-14T12:35:00.005Z

It is already long time from last post. So just quick post. I have made a bookmarklet based on Martin Žantovský Transkriptor founded on web. It is not online already so here is a my bookmarklet version of that script. It is very helpfully on russian forums. In new blogger it seems impossible to add bookmarklet, so you will find it here Transcriptor

Scriptswitcher in action

2007-02-05T21:51:00.000Z

Maybe I was not able to clearly explain what I mean in my last post about scriptswitcher. Last few days I worked on new website, where you can check real example of this scriptswitcher method. Site is here Kongresové služby, scriptswicher is in left column under menu.
Due to comment in previous post I change code little bit. Switcher was not very friendly. But I am not php coder, so there may be something wrong. Here it is:

<?php session_start();
if(empty($_GET['scriptsrc'])){
if(empty($_COOKIE['scriptsrc'])){$js_name="scriptloader";}
else{$js_name=$_COOKIE['scriptsrc'];}
}
else{$js_name=$_GET['scriptsrc'];}
setcookie("scriptsrc", $js_name, time()+(60*60*24*30), "/", ".kongresove-sluzby.cz");
$_GET['scriptsrc']=$js_name;
?>
<script type="text/javascript" src="<?php echo $js_name?>.js"></script>
        <form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="get">
        <fieldset id="switcher">
            <legend>Javascript switcher</legend>
            <input type="hidden" class="hide" name="scriptsrc" <?php if($js_name=="scriptloader"){echo" value=\"none\"";}else{echo" value=\"scriptloader\"";}?> />
            <input type="submit"<?php if($js_name=="scriptloader"){echo" value=\"Switch off javascript\"";}else{echo" value=\"Switch on javascript\"";}?> />
        </fieldset>

Why people don´t make scriptswitcher

2006-12-29T16:57:00.000Z

A lot of people is talking about an unobtrusive javascript. OK, but I don't understand why they have not came with idea to add users some possibility to switch off javascript on sites. It shouldn't be to complicated, if your scripts are really unobtrusive.

In case that of onobtrusive js:

site work completely without script

script is in your head section

if you are clever all are in one script
even if you need script at the end of your body tag you can add it into one single script

Anyway you can never know, that in some end user browser is problematic with your script. So why donť let user to simple switch them off without complicated browser settings.

How to add script to another script

Bellow is simple example how to include scripts in another header script


function loadAnotherScript(){
AnotherScript=document.body.appendChild(document.createElement('script'));
AnotherScript.type='text/javascript';
AnotherScript.src='script-file-url.js';
AnotherScript.setAttribute('defer','defer')
}
//use some onload event

This technic will allow you to keep all the scripts in one file and in combination with php you can any time send maximum two scripts for a site. One header script and one through this header script.

How to send php as js?

Again very simple thing.


<?php
header("Content-type: text/javascript");
?>

Why to send php as js? Because than you can split javascript to small snippets a put them together on final site. Try to study this keywords dynamic css with php on Google to see what I mean, because it again seems no one do such things with js.

Final Scriptswitcher, what I am talking about.

My php and english language are not good, so sorry for that. For this reason I change someone else styleswitcher code, which looks very simple for this demonstration and can be found at a lot germans phorums. So code is here:


<?php
if(empty($_GET['scriptsrc'])){
if(empty($_COOKIE['scriptsrc'])){$js_name="site";}
else{$js_name=$_COOKIE['scriptsrc'];}
}
else{$js_name=$_GET['scriptsrc'];}
setcookie("scriptsrc", $js_name, time()+(60*60*24*30), "/scriptswitcher/", ".xy.wz.cz");
$_GET['scriptsrc']=$js_name;
echo "<?xml version=\"1.0\" encoding=\"windows-1250\"?>\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<title>Scriptswitcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<script type="text/javascript" src="<?php echo $js_name?>.js"></script>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="get">
<fieldset>
<select name="scriptsrc">
<option value="site" selected="selected">Default</option>
<option value="none">None</option>
</select>
<input type="submit" value="Switch Script" />
</fieldset>
</form>
<h1>Scriptswitcher</h1>
<ul>
<li><a href="index.php?scriptsrc=<?php echo $js_name?>" title="Script switch">Script switch</a></li>
</ul>
</body>
</html>

Example:

Javascript Scriptswitcher

So I thing here is a long way for scripters to make they site really unobtrusive, and I hope someone more experienced in js, php and english will rewrite this idea to real english and explain everything what I forget to.

Some select replacement

2006-12-29T16:48:00.000Z

Just short post. I was trying to find out some simple unobtrusive select replacement, but I was not succesfull. Just some using to big libraries for such simple thing. So I decide to make one. You can find my solution here Simple select replacement

Email to unicode bookmarklet

2006-09-12T06:50:00.000Z

Yesterday I obtain an e-mail with bugreport for some old script. So when I found out, that someone using it, I decided to create an bookmarklet for email conversion. It prevents a spam well. Email to Unicode bookmarklet

Universal sudoku solver bookmarklet

2006-09-07T09:52:00.000Z

After two weeks I will post something new here. Few days ago I found at server linkuj.cz very interesting link: My fight with Hollanders. It is in czech language about the fight with excellent Neederland sudoku solver. This article persuade me to try make something more universal. First I search on web some good solver script, which is small and quick enough. I decided to use this sudoku solver. Then I build a skeleton of sudoku table, written as dom generated and css styled table. I add some features, like opacity changer, resizer and use one famous very old script for drag support. Then I develop something like next tabindex focus, it means, that when you write a nuber, it's automaticly goes to next cell. When you fill up the input with space it's move to next also. So you dot't have to use mouse to move in sudoku grid. For resizing I use a small script developed by Habendorf at czech discussion board Diskuse Jak Psát Web. So I hope I don't forget some credits and here is whole think Universal sudoku solver bookmarklet. Just add to your favorites, use at some sudoku site, drag across the sudoku grid there, resize it to suite to sudoku size, fill it up, make it opaque to control it and press solve. Sometimes you will have to allow script to makes website run slow, because it countings a lot, but it's matter on your computer. When it is solved, just make it again opaque, drag it to side and fill the original grid. But don't forget, that using your own brain is the best investment to your feature. Well this is my script just very partly, I just use few scripts founded on www and put them together as a puzzle. So thanks to all people, who made those parts.

Gallery bookmarklet

2006-08-15T09:19:00.000Z

Yesterday I send here a script for simple DOM gallery. But I decided to upload another one, because this one is much more easier. And why bookmarklet? Just test this link gallery and you will see. You can try it also at this address, that implementation is made with no javascript alternative link. Whole source code including images, css, js and html is zipped for download here.

Simple unobtrusive DOM driven Autoplay gallery script

2006-08-14T13:09:00.000Z

I decided to rewrite my old Autoplay gallery script. Now is it quiet configurable, just one thing
for correct work is important. All used images has to be in one file with the same prefix and numbered
star 1. For example file name: images, prefix: big, filetype:jpg. You can test it here,
or download zipped html + css + js

2006-06-08T06:03:00.000Z

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

2006-06-07T13:15:00.000Z

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.

2006-06-06T11:17:00.000Z

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.