JS Playground

14.12.08

How to make div clickable

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

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

5.2.07

Scriptswitcher in action

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>

29.12.06

Why people don´t make scriptswitcher

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:



  1. site work completely without script

  2. script is in your head section

  3. if you are clever all are in one script


  4. 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

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

12.9.06

Email to unicode bookmarklet

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

7.9.06

Universal sudoku solver bookmarklet

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.

15.8.06

Gallery bookmarklet

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.

14.8.06

Simple unobtrusive DOM driven Autoplay gallery script

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