Irritating when the thing looks so pretty out of the box. So rather than opt for one of the non-pretty options I just hacked it. Brutally I just added code to maintain an input as a csv, it needs fixing really but this does work, for now.

Click here to download my hack/fixed version which maintains a separate csv (in a designated ID – search replace “csvHolder” if you want to change its ID.)

Hopefully Drew can update his plugin so it works out of the box, its a really useful plugin.

Note: This rar includes my csv quick maintaining functions which are required.

The post Fix/Hack to make AutoSuggest JQuery Plugin work first appeared on Woody Hayday | Blog.

The JQuery documentation for this doesn’t account for the reality of the above, its all very well if you want the empty column/div to SHOW all the time as empty, that is remain as some sort of visible placeholder, but if the empty list should show as empty, until an object is ready to be dropped on it then JQuery sortable’s don’t work. It all comes down to dimensions, if an empty list exists without a height value, you can’t drop onto it.

More specifically, if an empty jquery-sortable list exists without a specific height set at the point of [.sortable start] (that is BEFORE the event is fired) then you just cannot drop the sortable.

Image by Dmitry Baranovskiy

I played with fixing this by adjusting each empty list (in the example belows case #col1,#col2,#col3) to have a defined height (and background, which looks nice) within the sortable “start” option, but this just creates boxes (or landing pads/zones) you can see, but not drop on.

Long and short of it – the solution to being able to drop jquery sortable’s onto invisible empty lists is to bind a function which adds a css class (or sets the height specifically) to the empty (invisible) sortable list when a user clicks one of the goal objects. This is then fired BEFORE the sortable takes hold and so creates drag-droppable landing zones for the users held sortable. It then uses the sortables “stop” property to remove the class it has added to any columns which have it.

function sortAndDrag() {
    
	//show BEFORE sortable starts
     $("#col1, #col2, #col3").bind('click mousedown', function(){
          $(".col").each(function (c) {
                if ($("div", this).size() == 0) {
                    $(this).addClass("colZoneEmpty")
                }
            })
     });
    
	//enable sortable
    $("#col1, #col2, #col3").sortable({
        revert: true,
        connectWith: ".col",
        stop: function (a, d) {
            $(".col").removeClass("colZoneEmpty");
	    //any ajax processing
        }
    });
	
}
//in this example 3 column div's exist with the id's 'col1','col2','col3', all of which have the class 'col' 
//colZoneEmpty is a css class which makes the empty list visible

There are of course improvements you could make here, like checking the users dragging before setting any styling, but this quick hackaround works where it shouldn’t.

The post Unable to drop JQuery sortable onto empty list? Hack solution first appeared on Woody Hayday | Blog.

var newBGString = $(this).css('background-image');

…it does, but not in firefox. Say the background property was set to “url(someimage.png) top left no-repeat”, making the background-image property “url(someimage.png)” right? In every browser except firefox, yes, not for firefox. Firefox would set the var as “url(“someimage.png”)” and THEN complain that the var is not realistic when you go on to use it elsewhere.

Anyway ridiculous bug, almost as annoying is how simple, hacky and rough the fix is:

var newBGString = $(this).css('background-image').replace('"',''); 

So if your firefox doesn’t like background image swapping via js, try it, I guess…

The post Firefox, why you mutate my css? first appeared on Woody Hayday | Blog.