Tag: html

Complete Example of Tracking Start and End of Drag Operations with jQuery and Table Rows

After writing my previous post about “Keeping track of indexes while dragging in jQuery UI Sortable” I received a question about how this would work for sortable table rows. The code I included in the previous post should actually be enough to make everything work (.. as long as I understood the question correctly). I’ve created a minimal example as a complete implementation of the code from the previous post, and I’ve also included it as a live demo here.

This is based on jQuery 1.5.1 and jQuery UI 1.8.13. I’ve simply used the distribution versions of this example (you probably want to build your own UI bundle using the interface on the jQuery UI website).

Here’s a live demo that you can play with.

Inline javascript and WordPress could possibly be better friends.

The complete source for the minimal (but complete) example is included here:



    
        
        jQuery UI Example Page
        
        
        
        
    
    
        

            

                Dragging from index
            

            

                None
            

            

                Hovering index
            

            

                None
            

        

    
        

            
                

                    
                        Keys
                    
                    
                        Values
                    
                

            
            
                

                    
                        Key 1
                    
                    
                        Value 1
                    
                

                

                    
                        Key 2
                    
                    
                        Value 2
                    
                

                

                    
                        Key 3
                    
                    
                        Value 3
                    
                

                

                    
                        Key 4
                    
                    
                        Value 4
                    
                

                

                    
                        Key 5
                    
                    
                        Value 5
                    
                

                

                    
                        Key 6
                    
                    
                        Value 6

Relevant Meta Tags for Facebook Share

I spent the evening making sure the different pages on Gamer.no gave relevant titles and descriptions when shared on Facebook. The implementation was quite straight forward, but finding the finding the actual documentation for which elements Facebook supports ate a bit of development time. After navigating through four or five wiki pages at the development wiki describing various parts of the Facebook Share system, I finally found the page getting down to the metal about which elements you should include.

The page can be found at Facebook Share – Specifying Meta Tags.

We’ve currently implemented title, description and medium. We also had image_src, but decided against it at the moment – the first feedback we reserved made it clear people preferred to select their own image. This may however be because of the first batch of people being a bit too technical competent, so we’ll probably use image_src later (.. does Facebook support providing several images through image_src?).

Table 100% Width and Margins

While hacking aboooooot today I found the need for making a table behave like a regular block element. I have a section floated to the right of a table, and the table should occupy the rest of the available spot. Making the table’s width 100% would make it adjust it size according to its parent instead of the available place (.. with margin-right set to the width of the other element + whitespace).

The best solution I’ve found so far is to create a wrapper div around the table, and then setting the table width to 100%. This makes the table adjust its size according to the parent – which now is a block element.






    
        ...

Upgrading to SWFUpload 2.2.0-beta

SWFUpload 2.2.0-beta has been released to fix the issue that has occured after the release of Flash 10, where regular SWFUpload-based applications ceases to work. This is because of a security update to Flash Player, where the plugin refuses to show the upload files dialog unless the plugin has focus — and the request to show the dialog is in response to an user event. This means that the user now has to click somewhere in the flash file before we’re able to show the upload dialog.

The way most file upload components solve this is by overlaying a transparent flash file over the regular user interface element, so that the user clicks the flash file instead of the visible HTML element. SWFUpload 2.2.0 supports this, in addition to creating a styled flash based button instead of the regular HTML elements.

To upgrade from our previous 2.1.0 based installation, I did the following:

Added in the settings object for SWFUpload:

        button_placeholder_id : "selectFilesButtonPlaceholder",
        button_disable : false,
    	minimum_flash_version : "9.0.28",
    	swfupload_pre_load_handler : swfUploadPreLoad,
    	swfupload_load_failed_handler : swfUploadLoadFailed

Swapped out the previous references to graceful degradation and SWFUpload 2.1.0:

Remembered to update flash_url in the settings object:

flash_url : "/flash/swfupload_f10.swf",

Added three new callbacks functions instead of using the references to the previous degradation elements (swfupload_element_id, degraded_element_id):

function swfUploadLoaded()
{
    // set the dimensions of the button to match the outer container element (jQuery!)
    swfu.setButtonDimensions($("#buttonContainer").width(), $("#buttonContainer").height());
}

function swfUploadPreLoad()
{
    // hide HTML interface, show Flash interface..
    $("#regularUploader").hide();
    $("#flashUploader").show();
}

function swfUploadLoadFailed()
{
}

Added a container element in the HTML that the Flash app will simply take control over (it will NOT lay itself transparent over this element!):

.. and remove the old reference to swfu.selectFiles();.

That should be all.

Internet Explorer 8 and Their XSS Filter

There’s an interesting post up on the technet Security Vulnerability Research & Defense blog, providing a deeper look into how the XSS filter destined for release together with Internet Explorer 8 works. While it looks like a novel approach, I’m not sure how many of the actual attacks will be detected and guarded against. It will be interesting to get to play around with it later, and if it works as good as they say, it’ll provide some protection for the users of Internet Explorer against a class of attacks.

They provide several examples of issues that will not be mitigated by this filter, which includes attacks where the content is inserted directly into javascript (instead of spawning from an HTML-context).