Techniques and Web Technologies
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.
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.
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.
Post shows how to generate random color in hexadecimal notation using JavaScript. Simple task is explained through several examples and working demo.
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.
Example shows dragging functionality across scrollable DIV containers. If DIV container is bigger than displayed size, moving element near edge will start to auto-scroll.
This post shows how to shift table content using JavaScript. REDIPS.shift library contains four methods to shift table content in any direction (up, right, down and left). By default, content bunching is disabled.
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.
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 timetable, button in the same color will be displayed next to the subject (clone object).
This post shows how to use REDIPS.drag library described in 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 colored table cells. After element is correctly sited, appropriate message will be displayed.
This post describes how to maintain vertical scroll position after form submission or clicking on link. Script will read vertical scroll position and append scroll value to URL. After page is loaded, JavaScript function will search for scroll parameter in URL and set the scroll position.
If prompt, confirm, alert or window.open are not good enough then JavaScript dialog box can be considered as an alternative choice. This dialog box is emulated with two DIV elements. First DIV overlays whole page while second DIV is positioned at the page center. That’s nothing new but JavaScript code is short, well commented and closed in its own namespace.