Techniques and Web Technologies
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.