Bring placeholder support to older browsers

Placeholder is definitely a really handy thing from HTML5 specs. Its support is today pretty good, including more or less every browser around except IEs.

Here is a snippet to detect if placeholder is supported by user browser, and support it via Javascript. I put it aside since you probably already have something similar if you’re not using JS llibs like MooTools or JQuery.

function placeHoldMe(e) {
	addEvent(e, "focus", function() {
		if(e.value==e.getAttribute('placeholder')) e.value = '';
	}, false);
	addEvent(e, "blur", function() {
		if(e.value=='') e.value = e.getAttribute('placeholder');
	}, false);
};

addEvent(window, "load", function()
{
	if (!("placeholder" in document.createElement("input")))
	{
		var inputsToPlaceHold = document.getElementsByTagName('input');
		var itphNum = inputsToPlaceHold.length;
		for(var i=0;i<itphNum;i++)
		{
			if(
				inputsToPlaceHold[i].type!='submit' &&
				inputsToPlaceHold[i].type!='radio' &&
				inputsToPlaceHold[i].type!='checkbox'
			) {
				placeHoldMe(inputsToPlaceHold[i]);
			}
		}
		inputsToPlaceHold = itphNum = null;
	}
});

Please note that this code require this other one, which choose the supported event listener for your browser

var addEvent = function(elem, type, eventHandle) {
    if (elem == null || elem == undefined) return;
    if ( elem.addEventListener ) elem.addEventListener( type, eventHandle, false );
    else if ( elem.attachEvent ) elem.attachEvent( "on" + type, eventHandle );
};

Both minified: (620 bytes)

function placeHoldMe(a){addEvent(a,"focus",function(){if(a.value==a.getAttribute("placeholder"))a.value=""},false);addEvent(a,"blur",function(){if(a.value=="")a.value=a.getAttribute("placeholder")},false)}function addEvent(a,b,c){if(a==null||a==undefined)return;if(a.addEventListener)a.addEventListener(b,c,false);else if(a.attachEvent)a.attachEvent("on"+b,c)}addEvent(window,"load",function(){if(!("placeholder"in document.createElement("input"))){var a=document.getElementsByTagName("input");var b=a.length;for(var c=0;c<b;c++){if(a[c].type!="submit"&&a[c].type!="radio"&&a[c].type!="checkbox"){placeHoldMe(a[c])}}a=b=null}})

Of course, code could be smaller using JQuery or others but the goal here is not to download / init JQuery + Modernizr just for a placeholder… Visitors on a bad 3G signal should appreciate

Ikea France uses YouTube interactive videos to link collection 2011/12 products

Ikea France shows off its new 2011/12 collection via an interactive YouTube video. Nothing new, but a cool use of YouTube bubbles, that now work fine in the HTML5 player too!

source amandinedek.com

Create a 3D block with CSS3

A lot of example already exist and 3D with CSS3 is nothing new. What i wanted to try here was to provide 3 different rendering modes of a cube without using any javascript, keeping the DOM untouched. Just plain CSS3.

So first, 3 modes: 2D, flat 3D (isometric view) & real 3D. Of course, real 3D only works with browsers that support preserve-3D css3 transform mode (only Safari, Mobile Safari & desktop Chrome atm).

<div id="box" mode="2d"></div>

<div id="box" mode="flat3d"></div>

<div id="box" mode="real3d"></div>

.

Without any DOM modification, my only option is using some not-well-known CSS3 selectors: ::before & ::after. See css3-3d-block or css3-3d-block-minecraft for demo / code.

Here is how it works for the flat3D, which you shoud be able to see properly on any modern web browser

#box[mode="flat3d"] {
top: 120px;
left: 50px;
width: 150px;
height: 150px;
-webkit-transform: translateY(50%) skewY(30deg) scaleY(1.1);
-moz-transform: translateY(50%) skewY(30deg) scaleY(1.1);
-o-transform: translateY(50%) skewY(30deg) scaleY(1.1);
}
#box[mode="flat3d"]::before {
content: "";
top: 0px;
left: 150px;
width: 150px;
height: 150px;
background-color: rgba(0,255,0,.4);
-webkit-transform: skewY(-50deg) translateX(0%) translateY(-60%);
-moz-transform: skewY(-50deg) translateX(0%) translateY(-60%);
-o-transform: skewY(-50deg) translateX(0%) translateY(-60%);
}
#box[mode="flat3d"]::after {
content: "";
top: 0px;
left: 150px;
width: 150px;
height: 150px;
background-color: rgba(0,0,255,.4);
-webkit-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
-moz-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
-o-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
}

Real 3D need some code on the parent element of the one in 3D. Here, it’s simply <body>

body {
-webkit-perspective: 1000px;
-moz-perspective: 75;
-o-perspective: 1000px;
-webkit-perspective-origin: 200px -150px;
-moz-perspective-origin: 200px -150px;
-o-perspective-origin: 200px -150px;
}

#box[mode="real3d"] {
top: 120px;
left: 70px;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateX(-20%) rotateY(-45deg);
-moz-transform: translateX(-20%) rotateY(-45deg);
-o-transform: translateX(-20%) rotateY(-45deg);
}
#box[mode="real3d"]::before {
content: "";
top: -100px;
width: 200px;
height: 200px;
background-color: rgba(0,0,255,.4);
-webkit-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-moz-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-o-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
}
#box[mode="real3d"]::after {
content: "";
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(0,255,0,.4);
-webkit-transform: rotateY(90deg) translateX(50%);
-moz-transform: rotateY(90deg) translateX(50%);
-o-transform: rotateY(90deg) translateX(50%);
}

Tesco HomePlus virtual store in Seoul subway

Stunning Mobile Commerce campaign from Tesco Home Plus using QRCodes in Seoul subway stations, South Korea.

via @mthiriez

Mini + Facebook + Google Maps = MiniMaps

Mini France release today one of the most breath-taking Facebook branded game i’ve never seen: Mini Maps.

mini-maps

Drive the Mini Cooper of your choice in any place on earth (well, any place having Google Maps of course), challenge random person to be the #1 in town, create your own tracks and play with friends them multiplayer, … so much to do!

Barney says: “It’s Amazulous!”