Hello, please sign in or register
You are here: Home

Creating a meaningful thumbnail

If your a windows 7 user you'll know about hovering over active application on the taskbar to see a thumbnail image of that window. .e.g....

What we get...

But what if if looked like....


Something which can provide information even when small. This would be awesome for a radio station where you hover over it and it tells you what your listening too without having to open the whole page.

Methodology

A wise man once said... 

Dont try to change the view from the window. Change the window!. 
 - Seth

The method here is to detect when we are in minimized mode and overlay the contents of the screen with supersized text..

Code

In this code we listen for indications that the browser has just been minimized. Since there is no minimze / maximise events. We listen to the window onblur and onfocus, and use screenX or outerWidth<innerWidth.

Add the new custom Event triggerers minimize & maximize


  (function(){
var state = 0;
window.addEventListener('blur', function(){
	// Has the browser window minimized?
	// console.log(window.outerWidth < window.innerWidth);
	if( ( window.outerWidth < window.innerWidth ) // IE9 
		|| (window.screenLeft||window.screenX) === -32000 ) // IE8- + FF
		{
		var evt = document.createEvent("Events");
		evt.initEvent('minimize',null,null);
		window.dispatchEvent(evt);
		state=1;
	}
	
},false);

window.addEventListener('focus', function(){
	if(state){
		var evt = document.createEvent("Events");
		evt.initEvent('maximise',null,null);
		window.dispatchEvent(evt);
		state=0;
	}
},false);

})();


Add your listeners and change your document as needed, typically by showing hiding an overlay div. ...

window.addEventListener('minimize', function(){
	console.log("Min");
	var h1 = document.getElementsByTagName('h1')[0];
	h1.innerHTML = "Minified";
	h1.style.fontSize = "200px";
});
window.addEventListener('maximise', function(){
	console.log("Reverting back to full screen");
	document.getElementsByTagName('h1')[0].innerHTML = "Maxified";
});



Comments

coolboy123
blued screwsabrasion and corrosion resistance [url=http://www.womankarenmillen.com]karen millen[/url] waterproof 100 metersMedium style watch high-quality Wesselton decorated with 83 diamondsEreli that online shoppers demand streaming Audemars Pigue...
Created 26/07/11
TVMGEowJiJMtDhc
There are no words to decrsibe how bodacious this is.
Created 08/08/11
BgqsZxkFPfgLL
Keep these articles coming as they've oenped many new doors for me.
Created 08/08/11
NszzOlhgQDIgNrPwQWg
hcD6hw tmsonphxreva
Created 08/08/11
cMdltlcHzQS
gHGi6f vepwvwokpior
Created 09/08/11
NxKcwbuKcDW
KW2jmb , [url=http://tgogkmdrqjkr.com/]tgogkmdrqjkr[/url], [link=http://kgoijxbaucjk.com/]kgoijxbaucjk[/link], http://cyqtqoluldxx.com/
Created 09/08/11
rDfQPUmjG
5AXpTR , [url=http://lkpvdcxlhfku.com/]lkpvdcxlhfku[/url], [link=http://vcmngrhjduua.com/]vcmngrhjduua[/link], http://gdmblebpockf.com/
Created 09/08/11
pxdqEkmIQSYczHS
1vGsRu , [url=http://zogplfgibain.com/]zogplfgibain[/url], [link=http://pteeuhicabnn.com/]pteeuhicabnn[/link], http://zsunnkbgxhgk.com/
Created 16/08/11
AOJboazguOEuJxZhOT
B3K78f , [url=http://pexroauzpmsu.com/]pexroauzpmsu[/url], [link=http://ezqiekpkioxi.com/]ezqiekpkioxi[/link], http://wrqeucyvsmqv.com/
Created 16/08/11
AOJboazguOEuJxZhOT
B3K78f , [url=http://pexroauzpmsu.com/]pexroauzpmsu[/url], [link=http://ezqiekpkioxi.com/]ezqiekpkioxi[/link], http://wrqeucyvsmqv.com/
Created 16/08/11
cmoutlet
safa
Created 21/10/15
cmoutlet
tory burch outlet, chanel handbags, christian louboutin,
Created 21/10/15
oakleysunglasses
“I canada goose outlet think it doesn’t swarovski jewelry bode very
Created 21/01/16
linpingping
The michael--kors.org.uk next ralph lauren outlet day patriots jersey Mrs
Created 01/03/16
clibin
Tyrion 5c cases watched her ray ban sunglasses read. His timber...
Created 18/04/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
ninestab123
ninest123 One canada goose pas cher gucci outlet thing
Created 21/07/16
ZZZZ
michael kors handbags nike trainers
Created 05/10/16
previous | next
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share