JQuery Move Table Rows Up And Down

To simply and easily move table rows up and down with in the table, use jquery.

With a table like:

<table>
<tbody>
<tr class="MoveableRow">
<td>Data 1</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
<tr class="MoveableRow">
<td>Data 2</td>
<td><span class="down_button">down</span><span class="up_button">up</span></td>
</tr>
<tr></tr>
</tbody>
</table>

You can then have some javascript like:

            $('.down_button').live('click', function () {
                var rowToMove = $(this).parents('tr.MoveableRow:first');
                var next = rowToMove.next('tr.MoveableRow')
                if (next.length == 1) { next.after(rowToMove); }
            });

            $('.up_button').live('click', function () {
                var rowToMove = $(this).parents('tr.MoveableRow:first');
                var prev = rowToMove.prev('tr.MoveableRow')
                if (prev.length == 1) { prev.before(rowToMove); }
            });

Previously I found a post somewhere that used the replaceWith method of jQuery. This wouldn’t retain newly written text in input boxes I had there. after and before work like charms, because you can pass in a jquery object as the content. Pretty slick.

JQuery and checkboxes

Just a quick post. I needed to find out if a check box was checked or not, and after some stupid failed attempts and using some suggestions found in a forum that didn’t worked, I decided to play around with it using Firebug. And checking is as simple as:

$('#theCheckbox').attr('checked')

This will return

true | false

Simple!

Playing On The Google Playground

I have decided to play around with Google Web Toolkit (GWT) and Google AppEngine.  Both look very interesting , very promising, and very fun.  I don’t know very much about them, so this should be an interesting experience and I am sure to learn a ton of new technologies along the way.

My first app is just going to be a Task list.  There are a plethora of Task Lists out there, but I think it will be fun and a good place to start.  I’ve already created my site, The Super List, so feel free to watch the progress (if any)!

Context Menu jQuery Plugin

My supervisor asked me today if I would be interested in being in charge of all the graphic design projects including marketing. I said yes right away, because I like to play around with the GIMP and create user interfaces. This will prove to be a great experience.

Anyway, because of this new assignment, I have begun looking around the web for useful tools and resources for graphic design and things related to that. Since I classify UI with graphic design, I looked at javascript toolkits and libraries. In a previous post I talked about my recent discovery of jQuery. Of course I had heard of it before. I even visited the site, but we were using PrototypeJs extensively in our eLearning platform that I didn’t bother to look too deep. My thinking has changed and I have taken a more pragmatic view than I had in my early days (ok last month).

So, today I found a very useful jQuery plugin: contextMenu plugin. I have played around with it a little and it looks like a clever piece of code and judos to Chris Domigan for coding it and sharing it with the world.

The plugin is easy enough to use, and he has placed plenty of examples on the site, so go look at it and enjoy.

jQuery Is My New Best Friend

I have been struggling for weeks upon weeks upon mind bending, agonizing weeks to solve what I would think to be a simple javascript problem. I needed a popup box to come up just left and center of another element. Well I searched through results provided by Google and Yahoo! and found a number of solutions that didn’t work for my particular situation. However, those examples provided a stepping stone for me to figure out how to position it where I wanted. The next problem was re-positioning the popup if it went beyond the top or bottom edge of the window viewport. This is where jQuery came to the rescue. If I had discovered this earlier, a lot of headache would have been prevented and I would have more hair.

jQuery has this: $(“#popup”).offset(), which returns the elements absolute top and left positions no matter where they are in the page and no matter how many elements they are nested in.

Thanks to smart people.

PrototypeJs

For me (and I don’t mind showing a little bias), PrototypeJS is the mother of JavaScript frameworks. Using this library is guaranteed to cut down your development pride. I think it only fair to explain that the PrototypeJS library was what I was thrown into when learning the JavaScript language.

JavaScript Tool: Nifty Corners Cube(tm)

The first JavaScript tool I want to mention is Nifty Corners Cube by Alessandro Fulciniti.  This is a great little utility for rounding the corners on your html elements without using time consuming images and it is very simple to use.

Many JavaScript Libraries

So I found I new JavaScript library. Maybe you’ve heard of it. EXT JS. I have been using PrototypeJs and the Script.aculo.us library for a little while, but just now came across this new library. I have only briefly looked at EXT JS, namely their desktop,which , though slow and a little bug prone, looks very good. The things we can do with the web are limitless and the more we stretch ourselves by attempting new things the better.

So I think everyone knows that there is a plethora of tools at the disposale of the web developer. How then do we decide which are the right tools for us? I think I will explore the different tools I have come across, write about them, and let whomever decides to read comment. So stay tuned.