Posts Tagged ‘jquery’

Today I am going to introduce you to a small part of a very handy tool.  Firebug console.

For those that don’t know what firebug is:

Firebug is an extension for firefox.  It is a great way to examine the elements of a page and see what class are being applied to them.  It allows you to change the properties of those classes and see what the changes do before ever committing the changes to a css sheet.  It was and still is an amazing tool when trying to get the display just right.  I would say it has saved me months of time by allowing me to make small incremental changes in the browser and then commit them to the stylesheets.  Instead of having to make small changes to the stylesheets, save, upload, then rinse and repeat until the page is perfect.

About a year or so ago I was watching a video by Paul Irish looking at the jquery source code (yes I am that big of a geek) and he did something amazing. Using firebug he was able to prototype javascript functions and execute them in the browser.  I have done it once or twice since and I am starting to find it a huge time saver for development.

Let me walk you through my most recent development.  It’s pretty short but very useful.

Learn more ...

Jquery UI has some very impressive parts to it.  Today I have been working with the sortable function.

Basically you put sortable on a list and then you can drag and drop the list of items into the order you want.  It has tons of configuration options one of which is you can drag items from one list to another list. So I am putting together a page that has multiple lists that are sortable and some of them appear or disappear depending on what the user is doing.  Which brings us to todays lesson.

For this example we will assume you have 3 lists A, B, and C.  List A is visible, B and C are hidden. I had the ‘start’ configuration option (It is supposed to go off before/when the sorting starts) Set to this:

function() {
jnc(‘.listB, .listC’).show();

What this should do is whenever someone started moving an item on List A.  List B and C would show up on the screen so they could drop an item into it.

Well that mostly worked…   List B and C would show up, but if I tried to drag the first item in List A to either B or C it wouldn’t register and go back to it’s place in List A… If I moved any of the other elements in List A, they would transfer to the list I dropped them on.  Needless to say that would be horrible user interface.  Side note: I did find that if I moved the item around list A I could then move it to B or C, but again that is horrible user interface.. and it does nothing for the case when there is only 1 item in List A.  This drove me a little crazy while I was trying to figure out what was going on.  I tried changing around the options, pleading with it to just work, and there might have been some unholy rituals. None of which worked.  Then I had the bright notion that it might be because List B and C were not visible when the sort started.
So I set list B and C to display and it started working right.

Well I still had a problem. Those lists are not supposed to show until they are needed for dropping into.  Current solution:  I put an .mousedown() on list A that would show list B and C whenever.  Which means it’s triggered before the sorting starts and the moving any element now works correctly.