Category Archives: HTML 5

HTML5 – Example calendar – ruler.

This is a simple calendar ruler example make just with HTML5 and one CSS file.
The example can be see here.
Create one folder and put two file named: index.html and style.css.
The style.css file come with this source code:

The index.html file can have this source code:

Posted in All, HTML 5, Programming. Tagged with , , , , .

HTML5 – Example of 360 online video player.

In this tutorial, I will show you a source code for a video file player in HTML5.
The main reason I created this source code was: testing 360 degree and / or 3D ( red and blue ) video files created with the 3D Blender rendering program.
The source code is very simple. We have a part to create HTML5 elements: text messages, file upload button, message display, and video part.
These elements are stylized with CSS colors with the style tag.
The last part is the javascript script that actually handles uploading, testing and then playing the file.
You can create a HTML5 file , paste this code and test it with your video file.

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

JavaScript – the MathJax display engine .

The MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.
Just download it from official website and used like into the next example:

The result of this script can be see into the next image:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , .

JavaScript – the glMatrix.

The glMatrix javascript is designed to perform vector and matrix operations very fast.
The official website can be found here.
What’s new in 2.0?
The glMatrix 2.0 is the result of a lot of excellent feedback from the community, and features:

  • Revamped and consistent API (not backward compatible with 1.x)
  • New functions for each type, based on request.
  • New array operations: vec(2/3/4).forEach
  • Even more optimizations!
  • A cleaner code base, broken up by type.
  • A more complete unit testing suite.

Let’s test one example with gl matrix and shaders:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , .

Using free Greensock and TweenMax .

You can use both Greensock MorphSVGPlugin And TweenMax for free on Codepen.
You need to add this into javascript like resources:

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/MorphSVGPlugin.min.js

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .