- Setup for jsFiddle

Setup for jsFiddle

(Note: Images in this page have been updated to reflect the new layout design of jsFiddle.)

Setup for jsFiddle

In order for us to proceed with jQuery programming without taking too much time to set up the environment, we will be using an online code editor named jsFiddle. This web application allows us to create a single page prototype using HTML, CSS, and JavaScript without using a desktop-based code editor or creating tangible files on the computer -- let alone starting our HTML code with miscellaneous tags including <!DOCTYPE> and <head>.

Please visit the website and create an account. For those who wish to check out the thorough documentation, please refer to

This is the initial view of your first "fiddle." Note that the layout is largely split into three parts:

  • Header: Allows the user to save the current progress, automatically tidy up the code indentation, etc.
  • Left sidebar: Allows the user to connect various external resources (CSS), as well as insert various details about this fiddle
  • Right side: Each quadrant is responsible for handling different web languages (HTML, CSS, JS), and the right bottom quadrant displays the rendered result (upon clicking "Run" in header)

You may notice a gear icon in the right top corner of each quadrant. Upon click, a small popover window opens up and allows the user to connect and initialize jQuery libraries.

Before we proceed with populating these quadrants, let us make sure that this fiddle has been connected to a jQuery library. Click the gear icon in the JavaScript quadrant and select "jQuery (edge)" (most stable version) as the framework.

We also want to get rid of default stylesheets applied by web browsers upon detecting no attached stylesheet file. Default stylesheets apply automatic margins and font choices, and I think it is valid to "reset" these attributes via CSS Reset. In the "External Resources" tab of the left column, paste the following text into the "JavaScript/CSS URI" and click + button:

Now that this prototype has been setup, let us insert some testing code to make sure that this fiddle works well. Insert a random text in HTML pane, and some basic CSS rules in CSS pane. Upon pressing "Run," you will notice the page renders as you have written:

If you would like to share this particular fiddle with others, you can "save" your progress and share the resultant permalink. Once the page loads, you will notice that the URL in the address bar will contain a new text (ex. -- and the header bar would have changed:

jsFiddle allows you to save your progress in an incremental fashion, by saving different "versions" of your fiddle every time you press "Update." Upon pressing "Update," you will notice that a number is appended to your URL, and the button labelled "Set as base" will show up.

Until you set a particular version of your fiddle as "base," anybody accessing your fiddle permalink will see the version that has been originally saved -- no matter how many updates you make. Please make sure that you set the desired version as "base" when you share your code with others.

Let us make sure that our JavaScript functions run without issues by writing a simple statement in the JavaScript quadrant:

alert("Hello world!");

This statement opens a pop up window that displays the text "Hello world!". This content will change based on the value you place between the two parentheses.

Now that we can confirm JavaScript is in working order, let us "comment out" that particular statement by prepending // (two slashes). You will notice that your statement turns grey upon being commented out.

Screencast Recording