TimeWaster’s Place

This is very much the first project i have done out of curiosity instead of boredom:

An HTML 5 video player with a nice tile repeation effect.

It is mostly a performance test for HTML5’s new Video and Canvas tags allowing you to manipulate pictures and other picture related sources like videos in real time with nothing more than HTML and Javascript!

YES, NO FLASH IS INVOLVED!!!

Please don’t get me wrong: I really like Flash and it will never die, that’s because it can do much more application like things than HTML5 (for instance: A real time Sequencer and Synthesizer or a complete Picture Editing Suite).

But seeing done such monitor filling animations in HTML5 is really nice.

So check it out and enjoy a whole new video experience on Viiideeeooo.de!

The most AJAX frameworks are bloated with many functions you’ll never use or need. Who wants 60 KB of JavaScript if your only need is to send and load data? I Don’t.

I have found somewhere a short howto for AJAX, and derived (rewritten) the smallest AJAX framework ever out of it:

var ajax = false;
if(window.XMLHttpRequest) ajax = new XMLHttpRequest();
else if(window.ActiveXObject) {
	try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); }
	catch (e) {
		try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }
		catch (e) {}
	}
}

function ajaxGetContent(type, url, parameter, output_function) {
	if(!ajax) eval(output_function + '(false);');
	ajax.onreadystatechange = function() {
		if(output_function != 'void' && ajax.readyState == 4) {
			if(ajax.status == 200) eval(output_function + '(ajax.responseText);');
			else eval(output_function + '(false);');
		}
	}
	if(type == "post") {
		ajax.open('POST', url, true);
		ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		ajax.send(parameter);
	} else {
		ajax.open('GET', url + ((parameter.length > 0)?"?":"") + parameter, true);
		ajax.send(null);
	}
}

That’s short, isn’t it?

To get the data you want you have to simply call the function and define a function which will be called after the data arrives:

ajaxGetContent('post', '/myURL/index.php', 'a=b', 'myDataCallBack');

function myDataCallBack(myContent) {
	if(myContent == false) {
		// something went wrong
	} else {
		// have fun with your data
	}
}

And if you want to send data only and don’t care of the answer, use this syntax:

ajaxGetContent('post', '/myURL/index.php', 'a=b', 'void');

Some explanation:
- type = How to send the data (Parameters). “post” or “get”.
- url = Where to send it to.
- parameter = URL-style parameters. Never use a question mark!
- output_function = The function which will be called after the data is received.

This Tool is tested in Opera 9+10, Firefox 2+3 and MSIE 7+8.

Have fun!

When you create a div layer with 100% width and height, the height is always only the height of the browser window, not of the page content (which can be much higher).

To solve this, give the layer div an id and use the following JS code inside the layer div:

<script type="text/javascript">document.getElementById("yourlayerid").style.height = document.getElementsByTagName("body")[0].offsetHeight + "px";</script>

The code is very simple, it gets the height of the content (the body element) and gives it the layer div.

Tested in Opera, Firefox and *barf* MSIE (8).

To swap or reload a picture on the fly is easy with Javascript. Just give the img tag a unique id and execute the following command in javascript:

document.getElementById("picture").src = "/img/cool-picture.jpg";

Now comes the glitch in (guess where) Internet Explorer: If you want to reload a picture that has changed on the server (let’s say you have overwritten the picture with a php gd-lib script in the background), the Internet Explorer (i call him msie, spoken “emsy”) always keeps the cached picture instead of reloading the picture from the server like opera and firefox do.
You can fix this behaviour with a simple cache-avoiding technique: Add a random number as a parameter, as shown in the following code, that’s it.

document.getElementById("picture").src = "/img/cool-picture.jpg?r=" + Math.floor(Math.random() * 1000);