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.

Drag and Drop, JavaScript Video Download / Preview GitHub 931 Comments

JavaScript dialog box

If you aren't satisfied with prompt, confirm, alert or window.open, then this JavaScript dialog box can be your choice. Dialog box is emulated with two DIVs. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned at the page center. That's nothing new but JavaScript code is short, well commented and closed in own namespace (for easier integration with other frameworks).

JavaScript Download GitHub 65 Comments

AJAX progress bar

With few lines of JavaScript and CSS you can make a simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with XML. Progress value should be extracted from the XML and displayed as width of the DIV element.

JavaScript Download 55 Comments

Write to a log file with PHP

As I caught myself in process of writing PHP "log" function several times I have finally decided to create a simple Logging PHP class. After Logging class initialization, 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.

PHP Download 39 Comments

Maintain vertical scroll position

This post describes how to maintain vertical scroll position after form submission or clicking on the link. Script will read vertical scroll position and append scroll value to the URL. After page is loaded, JavaScript function will search for the scroll parameter in the URL and set the scroll position.

JavaScript Download 31 Comments

Merge and split table cells with JavaScript

REDIPS.table is a small JavaScript library which enables interactively 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.

JavaScript Download GitHub 16 Comments

Shift table content

This post shows how to shift table content using JavaScript. REDIPS.shift library has four methods to shift table content in any direction (up, right, down and left). By default, content bunching is disabled.

JavaScript Download 8 Comments

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.

PHP Download 4 Comments

JavaScript autocomplete

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

JavaScript Download GitHub 3 Comments

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.

JavaScript Download 3 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.

JavaScript Download 3 Comments

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.

JavaScript Download 2 Comments