Archive for the Category: JavaScript

JavaScript checkbox toggle

Demo shows how to toggle or clear a checkbox group. On button click, all checkboxes in HTML table will change their state. Checkbox group can be defined with any container so it's not necessary to use a table. This is a really simple JavaScript function with checkbox toggle and clear options.

Download 1 Comment

JavaScript drag and drop plus content shift

Demo is based on REDIPS.drag JavaScript library with enabled shift drop option. After element is dropped to the cell, other elements will be shifted to make room. Animation is optional and can be turned off. The presented demo can be a good start point for various sorting Web applications.

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

console.log in IE8

Why IE8 displays error for console.log line in JavaScript? Well, developer tools should be activated if you intend to use console.log command. Just press F12 (to turn on developer tools) and F5 (to reload the same page) - and error will disappear magically.

Leave a comment

Find parent node in DOM

Every HTML element in DOM has reference to its parent node. With simple iteration it's possible to traverse up to the requested element. If this loop is wrapped within a function, you will get a very useful code.

Leave a comment

Drag and drop table content plus animation

Example shows drag-n-drop functionality in combination with animation. Tables are closed within separated drag containers and actions from any table are mirrored to the other table. Elements can be shuffled or reset to the initial position.

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

REDIPS.drag documentation

REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. Here you will see a list of public properties and methods contained in REDIPS.drag library. Documentation is generated with JsDoc Toolkit.

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

HTML5 canvas example 2

Canvas is a new HTML5 element. Actually it's a rectangular area enabled for drawing with JavaScript. This post shows random animation based on geometry of line and parabola. It is possible to run processes in parallel where more than one animation will be displayed on canvas.

Download 2 Comments

Drag and drop table rows with JavaScript

REDIPS.drag was initially built to drag and drop table content. After publishing first version of REDIPS.drag, I received a lot of questions about dragging table rows also. Now is possible to drag and drop table rows as well as table content.

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