Async and defer

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10036

Via Smashing Magazine:

Putting scripts at the bottom of the page is an outdated technique. Use async and defer instead. 

Here is example.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script src="/defer.js" defer></script>
		<script src="/async.js" async></script>
	</head>
	
	<body>
		<div id="defer">
			If everything is ok, you will not see me
		</div>
		
		<div id="async">
			If everything is ok, you will not see me
		</div>		
	</body>

</html>

Note lines:
<script src="/defer.js" defer></script>
and
<script src="/async.js" async></script>

JS part is simple, just an example, defer.js:

document.querySelector("#defer").innerText = "defer";

async.js:

document.querySelector("#async").innerText = "async";

Overlay

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10042

In this article I gave an example of HTML5 dialog tag, and in this article I will extend that example with an overlay.

Basically overlay means one div which covers whole page, and with that trick we are disabling user to click anywhere.

CSS looks like this:

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
}

Then we will need just one div, like:
<div class="overlay"></div>
Whole HTML looks like this:

<!DOCTYPE html>
<html>

	<head>
		<style>
			.overlay {
				position: absolute;
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	
	<body>
		<div id=lorem>Lorem ipsum</div>
		
		<dialog class="modal">
			<p>This is da dialog!</p>
			<button id="close">Close</button>
		</dialog>
		<button id="show">Open Dialog!</button>
		
	</body>
	
	<script type="text/javascript">	
		var dialog = document.querySelector('dialog');
		var origHTML = document.querySelector('#lorem').innerHTML;
		document.querySelector('#show').onclick = function() {
			document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;
			dialog.show();
		};
		document.querySelector('#close').onclick = function() {
			document.querySelector('#lorem').innerHTML = origHTML;
			dialog.close();
		};
	</script>
	
</html>

Here notice how I am adding div tag with overlay class:

document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;

Dialog

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 11784
One example of dialog in Chrome, in FireFox it is not working.

HTML: 

<!DOCTYPE html>
<html>
	<body>
	
		<dialog class="modal">
			<p>This is da dialog!</p>
			<button id="close">Close</button>
		</dialog>
		<button id="show">Open Dialog!</button>
		
	</body>
</html>
JS: 
<script type="text/javascript">	
	var dialog = document.querySelector('dialog');
	document.querySelector('#show').onclick = function() {
	  dialog.show();
	};
	document.querySelector('#close').onclick = function() {
	  dialog.close();
	};
</script>
Here note line:

document.querySelector('dialog')

this is something new what I learned today.

Live example:

This is da dialog!

Example taken from this web site, via this one. On Tympanus you can find few more examples of overlay window, if you need support for older browsers.

Customize input type="range"

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10857

Example of customizing HTML5 input type range.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/myStyle.css">
	</head>
	
	<body>
	
			<input type="range" id="test" min="10" max="100" step="1">

	</body>

</html>

CSS:

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    width: 34px;
    height: 34px;
	border: 1px solid rgba(200,200,200,1);
    border-radius: 18px;
}

Look on an example here.