Friday, August 11, 2006

Cool Focus Blackout

I noticed lately that a lot of sites try to mimic windows focusing by bluring out the website and placing a focused window ontop. To see what i mean goto

http://www.on10.net and click login

this can be achieved quite easily.


put the following div in your page (where "testing123" can be changed)

<div id="testing123" style="filter: alpha(opacity=0); -moz-opacity:.0; background-color:Black;width:10px; height:100px;">

focused content here

</div>

next use this function to set the focus

function blankscreen()
{
document.getElementById("testing123").style.width=screen.width+"px";
document.getElementById("testing123").style.height=screen.height+"px";
document.getElementById("testing123").style.position="absolute";
document.getElementById("testing123").style.left="0px";
document.getElementById("testing123").style.top="0px";
document.getElementById("testing123").style.zIndex="10000";
}

to unfocus use something like

document.getElementById('testing123').style.display="none";

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home