Tag Archives: HTML 5

JavaScript – browser user agent.

This is a simple tutorial with java script to see the browser user agent.
About user agent:
– user agents are unique to every visitor on the web;
– everyone that is browsing the web right now has a user agent;
– browsers are a example of a user agent;
– other tools can act as agents;
– user agent has identified itself to the web server with a process called content negotiation;
– it’s possible to send a fake user agent, a process known as “spoofing.”
Now about how to see the user agent with browser.
Let’s start with create your folder and add a index.html file.
Add also into this folder another folder named js.
Into js folder add a file named index.js file.
Into index.html file add this source code:

Into index.js file add this source code:

When you open the index.html file with your browser the you can see your browser user agent.
For example the result of this script into my browser is:

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

JavaScript – deck – online slides.

Here’s another tutorial on javascript that I think should be remembered.
This javascript tool named deck.js help you to:

  • Create a deck with slides.
  • Slide has content into simple HTML.
  • You can choose themes, like: slide styles and one for deck transitions.
  • Also, you can include extensions to add extra functionality to your deck, or leave it stripped down.

This javascript tool can be found here and come with this structure:

  • deck.core
  • deck.goto
  • deck.menu
  • deck.navigation
  • deck.scale
  • deck.status

How this working ?
Let’s see a simple example.
First download the deck.js from here.
Open the folder and you will find a html file named boilerplate.html.
This file show a basic example of slideshow.
You just need to change this part of source code with your content:

A good presentation of the functionality of this tool is here.
A list of themes, extensions and tools available for deck.js can be found here.

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

JavaScript – Booklet – part 001.

Today I tested the Booklet jQuery tool, because I did not find too much data on this tool on the internet.
This help me to display the content on the web in a flipbook layout.
In this tutorial, I will only present a book of web page sizes, changing the color of the cover and adding text.
This tool also allows other features, but I will return to the right time.
It was built using the jQuery library and is licensed under the MIT license.
You can read documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool come with a index.html file, I create a index2.html file and I add my source code.
To change the default brown cover I change this line of code from this file jquery.booklet.latest.css ( from src folder ).
.booklet .b-page-cover {padding:0; width:100%; height:100%; background:#dddddd;}
This is my index2.html file and result is a book with some text.

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

JavaScript – Matter.js the 2D physics engine .

The tutorial today is about Matter.js – 2D physics engine for the web.
Let’s try one simple example.
You need a folder named project with index.html file and a js folder with index.js file.
The content of index.html is:

The content of index.js file from js folder is:

Let’s see the result of this script with codepen.io web tool.
You can try all demos.

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

JavaScript – filter an array with Google Chrome.

This problem can be easily resolved in the Google Chrome browser.
You must press F12 to start Chrome Developer Tools.
Then add the java script to the Console.
The filter method is part of the ECMAScript 5.
The result array contains the values that are not ‘Blue’.

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