So here’s what I came up with and this did the job:

            DECLARE @constraintName VARCHAR(50)

            select @constraintName = CONSTRAINT_NAME
            from INFORMATION_SCHEMA.CONSTRAINT_COLUMN_USAGE
            WHERE TABLE_NAME = '[YOUR_TABLENAME]' AND COLUMN_NAME = '[YOUR_COLUMNNAME]'

            IF  EXISTS (SELECT * FROM sys.indexes WHERE object_id = OBJECT_ID(N'[YOUR_TABLENAME]') AND name = @constraintName)
                EXEC('ALTER TABLE [YOUR_TABLENAME] DROP CONSTRAINT ' + @constraintName)

This worked for me since I know that the column will only have one constraint. Presumable the CONSTRAINT_COLUMN_USAGE will return multiple rows if there are multiple constraints. I also did the EXEC to get past the limitation that the DROP CONSTRAINT call doesn’t accept a variable.

If anyone has any comments/improvements on the above, I’d appreciate if you let me know.

To do this, I wanted to compare against a clean window object. A quick look on Google and I found this article: Getting a clean document or window Object in JavaScript. The basic idea is that you create a new iframe element, and you can use the contentWindow property of that to give you a nice clean window object. As the author states, you might want to do this to prevent the remapping of native methods but I just want it for a quick (i.e. hacky) way to see what objects have being put into my own ‘clean’ window.

What I do is create the iframe to get my clean window. Set up an object to copy across the objects from the main window object, then remove any that appear in the clean window.

Here it is in glorious, unminified code:

(function(window){
	var keys = {},
	cleanWindow,
	iframe = document.createElement("iframe");

	iframe.style.display ="none";
	iframe = document.body.appendChild(iframe);

	cleanWindow = iframe.contentWindow;
	document.body.removeChild(iframe);

	for(var keyName in window){
		keys[keyName] = window[keyName];
	}

	for(var keyName in cleanWindow) {
		delete keys[keyName]
	}

	return keys;
}(window))

And here’s a version that I’ve minified down:

(function($){var k={},w,d=document,b=d.body,i=d.createElement("iframe");i.style.display="none";i=b.appendChild(i);w=i.contentWindow;b.removeChild(i);for(var s in $){k[s]=$[s]}for(var s in w){delete k[s]}return k}(window))

This is written as self executing JavaScript and will return an object containing the objects that we worked out were added to the window.

Note: This is a very quick and dirty piece of code. Mostly it was an experiment for myself, to use the ‘clean window’ object. It won’t tell you if a native window property was changed or anything, it only compares the keys. Just remember that.

Looking at the images that are loaded, they seem to be PNG sprite images. So then I went on a little (short lived) mission on how to recreate the animations myself. Honestly, there are muppet animations you can play with soon.

There is a handy little jQuery plugin called Spritely. This will take a jQuery selector object and manipulate the background image position to generate the animation. Nicely, all you have to do is supply the number of frames and it will do the rest for you.

So I open up a new jsFiddle, fill in my HTML and CSS with the containers and background images I want and then put in this little beauty:

$('div').click(function() {
    var $this = $(this);
    $this.sprite({
        fps: 9,
        no_of_frames: $this.data("num"),
        on_last_frame: function(obj) {
            obj.destroy();
        }
    });
});

Now, what I’ve done here is make it so that every div object will generate a sprite animation on click. This probably isn’t the prettiest way to do it, but I have *only* just discovered Spritely so I’ll look at the docs and improve. If you want to let me know in the comments, that’d be appreciated.

(Also, for the eagle eyed of you, I’m using a data attribute to store the number of frames in the animation. This was painstakingly done by opening the PNG files and counting the muppet heads. I bet I will find Spritely would do it for me after reviewing the documentation).

You’ve waited long enough. Go to the jsFiddle to play with the Muppet animations.

Alternatively, here are links to the sprite images I’ve seen. Haven’t found anything for the blue guy on the left though! If you have, let me know and I’ll add it.

• http://www.google.co.uk/logos/2011/henson11-hp-2oa.png
• http://www.google.co.uk/logos/2011/henson11-hp-3oa.png
• http://www.google.co.uk/logos/2011/henson11-hp-4ga.png
• http://www.google.co.uk/logos/2011/henson11-hp-6ea-lr.png
• http://www.google.co.uk/logos/2011/henson11-hp-6ea-er.png
• http://www.google.co.uk/logos/2011/henson11-hp-6ea.png

        public static string ToString<T>(this IEnumerable<T> source, string delimiter)
        {
            return string.Join(delimiter, source);
        }

That will throw up an exception if ‘source’ is null. That’s fine for me, since I don’t want that extension from hiding something that might be wrong elsewhere (i.e. why am I trying to join a null list). If you want to make this work fine and dandy for a null source, you can just use the null coalescing operator and provide an empty source:

        public static string ToString<T>(this IEnumerable<T> source, string delimiter)
        {
            return string.Join(delimiter, source ?? Enumerable.Empty<T>());
        }

Now why do I think this is a better solution that the string builder option? Well, if you whack open Reflector, you’ll notice that the Join method uses a StringBuilder object and builds up from there. So since it’s already built straight into the framework, why reinvent the wheel? Of course, the Join method with an IEnumerable as an argument is only available on .NET 4.0. Anything prior to .NET 4.0 and you’ll have to pass in a string array (at which point the string builder method would be useful).

Another point to notice from the documentation is that the Join method will set the separator to String.Empty, if you pass it a null. The same applies to any element in the list that is null – it is simply replaced by another empty string.

So now it’s up to version 1.0.4. 1.0.5 Yeay! (I messed up the manifest)

Today has been a busy day:

• I posted it on StackApps
• Created the github project
• Added two features that were requested:
  • Enable/Disable the context menu (it now only appears on StackExchange sites)
  • Enable Stack Fiddle on all the Stack Exchange sites
• Only display on pages with certain (customisable) tags
• Tidied up the code to make it a bit

So yeah, if you have any suggestions for Stack Fiddle – just get in touch! I’m interested in hearing everything – comments, suggestions, bug reports or anything that you think would just be fun to know.

Download the updated version for free on the Google Web Store

Now I’ve just created a Stack Fiddle project on github* with the source for all to see and play (and report issues). I’m new to git and github so if you know of anything that I could be doing better then let me know. I had a quick look at licences to try and allow something that gave the most flexibility – finally choosing the Creative Commons Attribution-ShareAlike 2.5 licence. Again, if anyone has any points to make about it then let me know.

Some of you keen eyed people will probably notice that Stack Fiddle is up to v1.0.3 from v1.0.0 last night. What’s all that about? Well, I was eager to get in some ideas that I had overnight and I just couldn’t wait. The main thing is that Stack Fiddle will now only work on a list of tags rather than every code block on the site. I’ve put in a default list for JavaScript related ones but this is customisable through the options page. So far, my mini releases have been:

• 1.0.3: Added license and readme
• 1.0.2: Tag restrictions – StackFiddle will only work for given tags (customisable!).
• 1.0.1: Initial commit into git. Changed the main script to be non minified in preparation for github

So go! Play. Tell your friends about it. Tell me about it. Tell me about your holiday plans. I don’t mind. Remember to let me know of any features you want – or just fork the git repository if you think you have anything cool that can be added.

* Note: Please remember that I did say this was posted up at 3am. I wrote it and tested it and thought it was good enough to publish. The 3am time does mean a possibility of inefficient and uncommented code (we can’t be perfect all the time!). This will be tidied – I promise

It’s pretty simple, really. I like answering questions on Stack Overflow – I mostly like the jQuery / JavaScript questions. One tool that I absolutely love is jsFiddle. You have three boxes (JavaScript, CSS, HTML) that you can put your code and the result appears. No faffing around with having to set up any scaffolding to get simple tests done.

So what have I done then? I’ve combined the two! A lot of helpful people put their CSS, JavaScript and HTML in separate code blocks which is great – but then I have to copy and paste them individually into jsFiddle and change the framework to jQuery. My extension gives all the code blocks a handy little header like this one:

Click the HTML / JavaScript / CSS to choose the ones that you want to fiddle with and then press the ‘Send to jsFiddle’ link. Everything is sent off to jsFiddle and it’s ready to go.

This is just the first version so the feature list is pretty short:

• Easily select code blocks to send to jsFiddle
• Choose your default framework and version
• Detect all the jsFiddle links and create links to display the embedded fiddle in the page

Since posting it to the Chrome extensions gallery I’ve come up with a few ideas on how to make it better (including prettifying it a little – as the logo I tried making is rubbish) but if you have any ideas then leave me a comment or send me a message on Twitter (@jbolster).

Give it a whirl and let me know if it’s useful for you Download it at: https://chrome.google.com/extensions/detail/loemajeogfdlphofpdfncpbbeoenmbpm

Some future features that I’m thinking of:

• Giving it a better design/logo
• Possibly extending to other stack exchange sites (suggestions!)
• Displaying the Stack Fiddle header only on questions that have certain tags
• Enabling appending of multiple code blocks

This is wrong

Well – it might be wrong. It all depends on your application. As long as you know the differences in them, you should be fine:

• e.preventDefault: this (aptly) prevents the default event from happening. In the case of a hyperlink that you want to assign JavaScript to, this will stop the link from going to the location of the link
• e.stopPropagation: this stops the event from bubbling up. If you click on something that had a click event then using this will stop the event bubbling up and any click event that the parent containers might have.
• return false: this is the same as calling both of the methods above.

I’ve done two examples for this:

1. Showing the difference in e.preventDefault() and return false: This example works on the click event and shows that preventDefault and return false are actually different.
2. Example of e.stopPropagation: This example shows a practical example of when you’d want to stop an event bubbling up. It uses event handlers on the mouseover event to show this.

This is the solution I came up with:

$("a").click(function(e) {
    e.preventDefault();

    if (!$(this).data('isClicked')) {
        var link = $(this);

        // Your code on successful click

        // Set the isClicked value and set a timer to reset in 3s
        link.data('isClicked', true);
        setTimeout(function() {
            link.removeData('isClicked')
        }, 3000);
    } else {
        // Anything you want to say 'Bad user!'
    }
});

You can use jQuery’s data storage methods to assign arbitrary bits of data to specific DOM elements. In this case, when the user clicks a link I assign a property to the element as well as setting a timer to remove it 3 seconds later. This lets me know if the specific element has already been clicked by just calling the data method.

It’s not a bullet proof solution since it’s incredibly easy to get around if you’re determined enough. However, it is a simple example of how you can use those methods.

var timeStamp = new Date().getTime();

However, there is a handy shortcut that gets the same thing:

var timeStamp = +new Date();

It makes me wonder if the +new shortcut can work for any other JavaScript object but I haven’t had a chance to look yet.

Update: Apparently it’s just the unary operator (http://xkr.us/articles/javascript/unary-add/). From the article:

The unary + operator, when used on types other than string, will internally attempt to call valueOf() or toString() (in that order) and then attempt to convert the result to a number. Thusly, the unary + operator can successfully convert many of the native JS types with certain restrictions.