Quickly create HTML elements in jsFiddle

In case you haven’t already heard of it, jsFiddle is a web application which allows you to enter HTML, CSS and Javascript into different windows and render the output. It’s a great tool for testing various front-end concepts, and then “fiddles” can be saved and shared. Because of this feature it’s a popular tool on

Abstract config settings from web.config

In ASP.NET, application settings can be specified in the web.config file such as: <appSettings> <add key="PostsPerPage" value="6" /> <add key="CookieName" value="Foo" /> </appSettings> The beauty of this is that you don’t need to edit code to make changes to the application, and a single pre-compiled application can be used across multiple environments with different settings.

Copy table schema to new a table

In SQL Server, SELECT INTO is used to copy data from an existing table/s into a new one. However by adding a WHERE clause which will always return false, this will prevent any data from being copied, and therefore create an empty copy of the table schema into a new table. For example if we

Create a flashing tab notification page title

Page title notifications switch between the default page title and a notification message continously in order to grab the user’s attention. This is commonly used with chat applications. I’ve written a small javascript object which can be used to switch on and off page title notifications. To activate the page title notification call the following:

Namespacing jQuery event handlers

If we are to attach 2 or more event handlers to an element these will become stacked and run linear in the order they were attached. For example: $(".foo").on("click", function(e){ console.log("bar"); }); $(".foo").on("click", function(e){ console.log("baz"); }); If .foo is then clicked, the browser console will log: "bar" "baz" If we wish to remove these event

Default negative variables to zero in javascript

If you need to default a value to 0 if its negative, you could do: var i = -45; if (i<0){ i = 0; } console.log(i); //0 However, a shorter way of doing this would be to use Math.max() passing 0 as one of the parameters: var i = -45; i = Math.max(0,i); console.log(i); //0

Understanding jQuery data() storage

It is a common misunderstanding that .data("key") is simply a shortcut for .attr("data-key"). .data() does read HTML5 data attributes, but this is only the first time it is called, as per the documentation: The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated

console.log() vs alert() when debugging

Using console.log() is a great way of getting quick results about what variables are holding what values at which point, and which areas of code are being called, without having to debug. Before javascript debugging became so accessible, one of the only ways of checking the values of your variables would be to call alert().

Reading URL hashtag values

URL hashtags were primarily used in order to position the page scroll on load to a particular element. With javascript we can access what the value of the hashtag is on page load. if (window.location.hash){ var hash = window.location.hash.substring(1); alert("hashtag value is '" + hash + "'"); } This snippet first checks that the URL

Check javascript function exists before calling it

On large applications, there may be some instances where you need to make a call to a function which belongs in a different javascript file. There might also be a case where this javascript file isn’t always included on every page, and should only be called if it is included. If we are to call