Categories
- Android (2)
- Apache (3)
- FireFox (3)
- JavaScript (32)
- Drag and Drop (10)
- Linux (22)
- GNOME (3)
- MySQL (4)
- PHP (13)
- Web (2)
- WordPress (9)
Most commented
- Drag and Drop table content with JavaScript (707)
- Drag and drop table rows with JavaScript (98)
- JavaScript Drag and Drop example 3 (76)
- JavaScript date validation (55)
- JavaScript dialog box (49)
- AJAX progress bar (47)
- Adding table rows and columns in JavaScript (35)
-
Recent Posts
- REDIPS.drag documentation - Appendix A
- Convert PHP associative array to XML
- JavaScript checkbox toggle
- Android and different notification sounds
- Android email and Postfix with authorization
Recent Comments
- dbunic on REDIPS.drag documentation
- dbunic on Drag and Drop table content with JavaScript
- Web Hosting on MySQL replication - master migration
- sameh on From MySQL to XML with PHP
- Mj on REDIPS.drag documentation
- prabu on Drag and Drop table content with JavaScript
- yahao on Drag and Drop table content with JavaScript
-
Drag and Drop table content with JavaScript
Content of HTML table cells can be dragged to another table 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 table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn't fire events to the elements beneath the dragged object.
Drag and drop table rows with JavaScript
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.
JavaScript Drag and Drop example 3
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 the timetable, button in the same color will be displayed next to the subject (clone object).
JavaScript date validation
JavaScript date validation can be done in many ways, like month range testing, then day range testing (depend on month) and so on. I suggest simpler solution. Take day, month and year from string to create a Date object. Compare day, month and year with day, month and year extracted from the Date() object. If they aren't the same, than the input date is not valid.
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).
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.
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.
REDIPS.drag documentation
REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. Here you will see a list of public properties and methods contained in REDIPS.drag library. Documentation is generated with JsDoc Toolkit.