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

wlp
The oakley sunglasses cheap wreck, cheap nfl jerseys even replic...
Created 14/11/16
LEE2017
, This Kevin Durant Shoes became prefer from a dirt attack. Ozturk pronounces, Subsequent to jogging
Created 07/04/17
michael kors factory outlet
adidas nmd pandora bracelet
Created 16/05/17
111
yeezy boost 350 white true religion outlet
Created 22/05/17
wqwq
nike blazers, ipad mini cases, polo ralph lauren outlet online, 76ers jers...
Created 26/05/17
321
[url=http://www.truereligionjeansoutletonline.us.com][b]true religion outlet store[/b][/url] [url=http://www.uggbootscheap.de.com][b]ugg outlet[/b][/url] [url=http://www.uggs-forwomen.eu.com][b]cheap ugg boots[/b][/url] [url=http://www.ugg-slippers.e...
Created 06/07/17
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

Comment | flag

Categories

Bookmark and Share