- Details
- Written by: Stanko Milosev
- Category: HTML5
- Hits: 10772
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;
- Details
- Written by: Stanko Milosev
- Category: HTML5
- Hits: 12910
<!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:
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.
- Details
- Written by: Stanko Milosev
- Category: HTML5
- Hits: 11453
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.
- Details
- Written by: Stanko Milosev
- Category: Arch linux
- Hits: 6506
If google earth crashes, as it was on my machine, then try to download libGL.so.1 from here, and copy it to /opt/google/earth/free
Taken from here.