Archive for the Category: JavaScript

HTML5 canvas example

The canvas is a new HTML5 element and it is used to draw graphs, charts, animations and other sort of graphics. Actually, canvas is a JavaScript controlled 2D drawing area. This example shows how to create simple JavaScript function and draw circles inside canvas tag.

Download 3 Comments

JavaScript random color generator

Post shows how to generate random color in hexadecimal notation using JavaScript. Simple task is explained through several examples and working demo.

2 Comments

JavaScript Array Move

This post shows how to extend JavaScript Array object with "move" method. The new method accepts two parameters: position 1 and position 2. Array element from position 1 will be moved to position 2 while rest of array will be shifted. Post includes live demo.

4 Comments

JavaScript Drag and Drop example 6

Example shows dragging functionality across scrollable DIV containers. If DIV container is bigger then displayed size, approaching element near to the edge will start to auto-scroll.

Also posted in Drag and Drop Download / Preview GitHub 10 Comments

Shift table content

Example shows how to shift table content using JavaScript. Boundaries are table cells marked with class name "mark". Table content can be shifted in row or in column.

Download 4 Comments

JavaScript Drag and Drop example 4

Tic-tac-toe is built with Drag and Drop library explained in previous post "Drag and drop table content with JavaScript". Example shows how to move and dynamically enable / disable DIV objects.

Also posted in Drag and Drop Download / Preview GitHub 15 Comments

JavaScript Drag and Drop example 3

School timetable is example of how to use REDIPS.drag library. Page layout contains two tables: left table with school subjects and timetable on the right. After subject is placed to the timetable, button in the same color will be displayed next to the subject (clone object).

Also posted in Drag and Drop Video Download / Preview GitHub 65 Comments

JavaScript Drag and Drop example 2

This post shows how to use Drag and Drop library described in my previous post "Drag and drop table content with JavaScript". HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the coloured table cells. After elements are correctly sited, appropriate message will be displayed.

Also posted in Drag and Drop Download / Preview GitHub 15 Comments