Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.
<!DOCTYPE html> <html> ... </html>
Continue reading 100% height does not work for HTML5 Doctype
The HTML5 Canvas let you draw graphics on the fly. So if you want to collect drawing in Drupal, the Canvas Field could help.
1. Download and enable the module.
2. Add an image field to any content type and select Canvas Widget as shown below.
Continue reading Drupal 7 – Add HTML5 Canvas to content type
In HTML5, you can just use the following Doctype before the <html> tag.
<!DOCTYPE html>
Quote from W3Schools
The declaration must be the very first thing in your HTML5 document, before the tag.
The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
In HTML 4.01, all declarations require a reference to a DTD, because HTML 4.01 was based on SGML.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.
Download Modernizr and create the following index.html.
Continue reading Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming
This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var beep = $("#beep")[0];
$("#play").mouseenter(function() {
beep.play();
});
});
</script>
</head>
<body>
<audio id="beep" controls preload="auto">
<source src="music.ogg" type="audio/ogg" />
<source src="music.mp3" type="audio/mp3" />
Your browser isn't invited for super fun audio time.
</audio>
<span id="play">play sound</span>
</body>
</html>
Yesterday we talked about playing audio file in HTML5.
HTML5 – Play sound/music with <audio> tag @ 1
We can also take control of it using Javascript. Here is another example with a toggle link which can play and stop the music. jQuery is needed as well as the following Javascript file.
Continue reading HTML5 – Play sound/music with <audio> tag @ 2
Next: HTML5 – Play sound/music with <audio> tag @ 2
With HTML5, we can easily play audio file with the <audio> tag. Here is an example.
<html>
<head></head>
<body>
<audio controls loop autoplay>
<source src="music.ogg" type="audio/ogg" />
<source src="music.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
Continue reading HTML5 – Play sound/music with <audio> tag @ 1
Eureka! 