Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn’t fire events to the elements beneath the dragged object.

JavaScript dialog box

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.

AJAX progress bar

With few lines of JavaScript and CSS it’s possible to make simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with JSON data. Progress value is being read and displayed as DIV element width. To start progress bar demo, click on Start button and wait few seconds to begin. To watch how this page sends requests to Web server just open DOM inspector “Network” card.

Merge and split table cells with JavaScript

REDIPS.table is small JavaScript library which enables interactive or through script merging and splitting table cells. REDIPS.table.onMouseDown() public method will activate onMouseDown event listeners on TD elements to enable mark cells with mouse button. Additional feature is appending / deleting table rows / cells.

Maintain vertical scroll position

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.

Write to a log file with PHP

After writing custom PHP “log” function several times I finally decided to create a simple Logging PHP class. First call of lwrite method will open log file implicitly and write line to the file. Every other lwrite will use already opened file pointer until closing file with lclose. It is always a good idea to close file when it’s done. This should prevent file from corruption and overhead in closing file is negligible.

Shift table content

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.

Drawing with JavaScript

This post shows simple JavaScript drawing script based on HTML table. After page is loaded, JavaScript will generate HTML table and attach onMouseDown / onMouseUp event handlers to the document level and onMouseOver to each table cell. When user clicks the left mouse button and move mouse pointer over table, TD will change background colour.

JavaScript autocomplete

This post shows simple autocomplete JavaScript library. For every text input, method prepares URL and displays box with answers returned from server. DIV box is shown below input field with exact width as input field.

From MySQL to HTML with PHP and XML

In my post “From MySQL to XML with PHP”, I described how to generate XML from the MySQL database. Instead of printing out XML, generated XML can be buffered and transformed with XSL to the HTML. Maybe it sounds complicated for a simple process of displaying MySQL data on the WEB page. But if you set a WEB architecture this way, you will have a separated presentation layer from the database and business logic.

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.

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.