Tag Archives: HTML 5

HTML5 tags – contenteditable .

By admin | Published 11/08/2017

The The contenteditable tag attribute specifies whether the content of an element is editable or not. The contenteditable attribute is new in HTML5 and when the contenteditable attribute is not set on an element, the element will inherit it from its parent. The basic example is this (let you to change the text):

<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

</body>

</html>

Now […]

Posted in All, HTML 5, Programming | Also tagged 2017, programming, tool, tutorial Leave a Comment

JavaScript – browser user agent.

By admin | Published 04/08/2017

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 […]

Posted in All, HTML 5, javascript | Also tagged 2017, javascript, programming, scripting, tutorial Leave a Comment

JavaScript – deck – online slides.

By admin | Published 03/08/2017

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 […]

Posted in All, HTML 5, javascript | Also tagged 2017, javascript, programming, scripting, tutorial Leave a Comment

JavaScript – Booklet – part 001.

By admin | Published 03/08/2017

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 […]

Posted in All, HTML 5, javascript | Also tagged 2017, javascript, programming, scripting, tutorial Leave a Comment

JavaScript – Matter.js the 2D physics engine .

By admin | Published 31/07/2017

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:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Basic Matter.js Example</title>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>A Basic Matter.js Example</title>

</head>

<body>

</body>

</html>

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

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 400,
    wireframes: false
  }
});

var boxA = Bodies.rectangle(400, 200, 20, 20);
var ballA = Bodies.circle(400, 250, 30, 10);
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ground]);

Engine.run(engine);

Render.run(render);

var Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({

element: document.body,

engine: engine,

options: {

width: 800,

height: 400,

wireframes: false

}

});

var boxA = Bodies.rectangle(400, 200, 20, 20);

var ballA = Bodies.circle(400, 250, 30, 10);

var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ground]);

Engine.run(engine);

Render.run(render);

Let’s see the result of […]

Posted in All, HTML 5, javascript | Also tagged 2017, javascript, programming, scripting, tutorial Leave a Comment