Posts tagged JavaScript

popmenu is a jQuery plugin that allows you to create simple ‘pop-up’ menu’s like which appear on web sites like play.com. It is currently being used at ikonsports.com.

It has similar functionality jQuery’s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an element that you want to appear when you move off the mouse original element and on to any new element, where ever its located in the DOM.

Parameters

target (DOMElement): This is the element that is to ‘appear’ when the hover event is called.
addStyle (string): Optional. Adds a class to the matched element on hover (of matched element and target). Removed on hover off.
time (int): Optional. Time in milliseconds after a hover off when target element is invisible.
speed (String|Number): Optional. A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation displaying the target (e.g. 1000).
autooff (boolean): Optional. Default is true. If turned on will automatically hide any target elements if visible when a different popmenu is triggered. For example if you pop up menu’s would overlap if they were both visable at the same time it will hide it first.

Example

$('#mybutton').popupmenu({
				target: "#mybutton_menu",
				time: 300 });

Download

Production (944 bytes, packed) v1.0
Development (1.75 Kb) v1.0

While making a e commerce application I wanted the ability to easily sort product and categories by click and drag. Basically to allow the customer to re-order the way their products and categories are displayed. No doubt that you’ve seen application that have numerous “move up” and “move down” buttons that seem to take forever to use and from development point of view cumbersome to do. Of course the other method is to have input boxes with numbers in that can be altered, again cumbersome for both user and designer.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ‘sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

<table id="mytable" border="1">
<tbody>
<tr id="product_1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody></table>

This will give you the following results like this (try dragging the rows):

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});

#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:

1
2
3
4
5

<?php
    foreach($_POST['mytable2'] as $line){
       echo $line; // product_2, product_2... etc in new order
    }
?>

Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)