The jQuery UI sortable widget offers a great interface for listing and moving element around.

I have been working on a small project of mine and figured that the sortable widget could be a great feature. I then started to output the list and the element that should be draggable like this:

My HTML list

<ul id="sort1">
  <li>
    <div>box no 1</div>
  </li>
  <li>
    <div>box no 2</div>
  </li>
  <li>
    <div>box no 3</div>
  </li>
</ul>

My jQuery code to enable the sortable widget and for getting a serialized result when an element has been dragged around:

$(document).ready(function() {
    $("#sort1").sortable({
        opacity: 0.6,
        update: function(event, ui) {…

With jQuery it is quick and easy to access and modify elements in a select dropdown box. There are of course several ways of doing thing and I will try to cover most of them here.

Quicklinks:
The test setup
Get the selected value from the select / dropdown box
Set the selected value
Insert new options and values in the dropdown box
Removing an entry from the select box
Disable and enable options
The code

The test setup.

For the following examples I will use a dropdown / select box like this:

10 Apples
5 Oranges
12 Bananes

The HTML-code for the dropdown is where basic:

<select id="dropdown">
<option value="apples">10 Apples</option>
<option value="oranges">5 Oranges</option>…

When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.

The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.

Input boxes

Fetching content is done with:

// fetching the value
$("#inputbox").val();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#inputbox").val("We have now changed the text");

Try…

If you want to reuse your jQuery code, it can be a good idea to make the code into a jQuery Plugin. This makes it easier to use on different elements or even to distribute it.

Demonstration:
I have made a small simple 1 level menu for this demonstration. If you hover you mouse on Menu 1 or Menu 3 you will see a submenu sliding down. Menu 2 has no submenu and will therefor display nothing.

How: The HTML
The HTML is pretty much a standard list like this:

<ul id="nav">
    <li><a href="#">Menu 1</a>
        <ul>…

I’ve been experimenting with some iframe-manipulation with jQuery, but this was not as easy as I have hoped for. There is not much help on jquery.com and a Google search just found others with the same kind of problem.

My setup is very basic. An iframe loading a page like this

<iframe name="framename" id="myframe" src="mypage.html"></iframe>

In the page where this iframe is being loaded, I have included the jquery.min.js and an extra .js-file for my code.

First attempt was to try the examples found on Google. For testing purposes I wanted to set a red background color on every <div> inside the iframe.

var frame…

I previously posted some info about plotting data with jQuery and Flot and I have now set up a small demonstration:

The data value below are 100% random generated numbers, but they will simulate data from a database (or anything else for that matter). It consists of an array, where the first parameter the a Unix timestamp (multiplied by 1000) and the second parameter is the value to be drawed.

Generate a list of numbers
Push the generate button to get a new dataset.

You can also try to change some of the values, to see that happens. Just push the update button below,…

Hit statistics from visiting website users stored in a database. Then what? How do I list these log entries in a very simple way. The only important thing for now, is when the visitor came by the site.

The database stores a timestamp and which page the user visited. This can mean a massive amount of data and I don’t know how this first attempt will perform. At the moment, there is a relative small amount of data, but in time this should build up and if the performance starts lacking, I will take a look at it again.

To output the…