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.

Adding table rows and columns in JavaScript

With insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. Wrap this methods in JavaScript functions and you have code to dynamically add new rows and columns in the HTML table.

JavaScript date validation

JavaScript date validation can be done in many ways like month range testing, day range testing (depending on number of days in the month) and so on. Here is shown much simpler solution. Take day, month and year from input string to create JavaScript Date object. Compare input day, month and year with day, month and year extracted from the Date() object. If they aren’t the same then the input date is not valid.

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.

Week list for the current date in PHP

This post shows two examples of how to find the week list for the current date. Input parameter is date, and the output is date list from Monday till Sunday. First example is done with classic algorithm while second example uses ISO week date format.