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 imho it will never die 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!

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!

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

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);