This is the result!

You can get the script here

Are you concerned your users will too?

Never fear! This simple plugin places an element of the same type underneath the current element and shows the contents of the title attribute (or whatever attribute you decide to use) as a label until you type text into the box!

It’s a very early version, and probably has a few bugs, but I’ve implemented enough to make it fairly useful I think. Unfortunately when you resize a textarea in webkit, it doesn’r fire the resize event, so I’ve added a workaround using mousemove (I tried to only capture mousemove if a mousedown had been detected, but to no avail…)

You can see a demo here, and get the files here.

Simple, I thought, just use one of the many existing drop-down plugins. I tried many, but most seemed to use hardcoded styles and I had a few problems (some of which I encountered again, writing this).

So I’ve made this, I think it’s fairly robust, but I’m sure there’ll be problems with embedded objects (flash) and select boxes (in <= IE6), but for my needs, it sufficed, so I thought I'd share, in case anyone else needs a simple script to manage drop-downs.

To use, create a nest of elements like this:

<ul id="top">
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

or something similar (any elements, should work) and call:

// jQuery:
$('ul#top').dropdownify();
 
// mootools
$('top').dropdownify();

Which should create a simple drop-down.

There are a couple of examples, one for jQuery and one for mootools, and the files can downloaded here and here.

I did encounter a problem with IE, mainly due to z-index faults, so with HTML code like the following:

<div class="nav-wrapper">
  <ul id="top">
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>
</div>

I used the following CSS:

div.nav-wrapper,
div.nav-wrapper ul,
div.nav-wrapper ul li {
  position: static;
  z-index: 100;
}

Recently I’ve seen a few implementation of Growl in Javascript and basically just thought I’d have a go too. Everyone’s doing it, or so it seems!

This simple implementation is styled using pure CSS and you should be to easily modify it to suit your needs!

I’ve set up a demo page and the files can be grabbed from here.

Theres an updated test page and as ever a direct link to download here.

Check out the test page to see the new features!

Edit: Further updates, all links have been updated to version 0.3b. Added (and documented existing) callbacks as requested by Sebioff! And a further fix for the ‘append’ option. Also fixed IE6 compatibility.

Further Update: Another update after the comment from David Lee about $(‘form’).serialize();

Another Further Update: I have set up a Google Code repository for this plugin, which states that this code is released under the MIT license.

It’s implemented fairly simply:

$('form').ajaxify();

There’s a demo page or you can just download it and have a look.

Update: As pointed out by Andrea in the comments below, this would return the value of radio and checkboxes even if they weren’t selected. I have released 0.1a and updated the link above to fix this issue. Thanks Andrea!

Update 2: I have updated this plugin, view this post for more information.

I have added an exclude option to the settings so you can prevent captions being added to elements not required (like a reCaptcha box…). It’s used like this:

$('div.demo').addCaptions({
  'exclude': {
    'alt': [
      /orange/
    ]
  }
});

This would exclude any images that have the word ‘orange’ in the the alt attribute.

I also fixed a minor bug in which the script would look for captions in elements in reverse order (whoops!).

The only other change is making the elements found within the container a selector instead of an element option and a class option.

There is an updated demo here, or you can just download the script here.

Example code:

$('div.parallax').parallax({
  'elements': [
    {
      'selector': 'body',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.1,
            'invert': true
          }
        }
      }
    },
    {
      'selector': 'div.outer',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 50,
            'multiplier': 0.02,
            'unit': '%'
          }
        }
      }
    },
    {
      'selector': 'div.inner',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.3
          }
        }
      }
    }
  ]
});

You can see a demo of the updated script, or just download the package (includes jQuery 1.3.2).

The back end is written in PHP using MySQL for storage, but could easily be implemented in other languages.

To log data, you simply add a call to Trackr.init() to the page load event, passing the desired options as the only parameter to the function.

There are a variety of options that can be specified and for more information please see the test page.

You can get it here (includes jQuery 1.3.2).

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

Check out the demo (it is a very poor demo, please don’t look at the images, imagine it with a lovely hand drawn vector!) and get it here (minified).

Update: Created a quick demo of the silverback homepage with interactive parallax.

Update 2: Tested on IE8, seems to work fine!

Update 3: I have modified the script slightly, you can view the post here.