articles tagged with javascript

Following on with subdomains, say you want one field to auto-suggest into another. For example, when a user enters their company name (or username, last name etc.) this same value could be used to suggest a valid subdomain. Here’s the javascript and html (the function uses prototype for the element lookup).

The suggestion is based on the facts that valid subdomains should be alphanumeric, with dashes, less than 63 chars and not start or end with a dash.

<label for="username">Username</label>
<input id="username" onkeyup="suggestSubdomain(value, 'subdomain');" type="text" name="username" /><br/>
<label for="subdomain">Subdomain</label>
<input id="subdomain" type="text" name="subdomain" />

<script type="text/javascript">
  function suggestSubdomain(value, element) {
    var subdomain = value.gsub(/\s+/, '-');
    subdomain = subdomain.gsub(/[^a-z0-9\-]/i, '');
    if(subdomain[0] == '-')
      subdomain = subdomain.substr(1, subdomain.length)
    if(subdomain[subdomain.length-1] == '-')
      subdomain = subdomain.substr(0, subdomain.length-1)

    $(element).value = subdomain.substr(0, 63).toLowerCase();
  }
</script>

Some time ago I wrote a javascript class to implement keyboard short-cuts for paging through listings one item at a time (and across paginated pages). It was inspired by the navigation at FFFFOUND! and explained nicely by Ryan Singer of 37Signals.

• Heres the demo
• And the code at github

Some time ago Ryan posted a link to my script on the 37Signals blog, now with over 130 watchers on github a creeping sense of responsibility has settled in. So the latest revision now has both jQuery and Prototype support and a handier configuration object, so you can further customise how your page and CSS work with the script.

var config = {
  nodeSelector:        '.hentry h2 a.entry-title',  // used to select each item on the page and place in the map (must be a link)
  prevPageSelector:    '.prev_page',                // link on this element should always jump to prev page a.prev_page (must be a link)
  nextPageSelector:    '.next_page',                // link on this element should always jump to next page a.next_page (must be a link)
  pagingNavId:         'paging-nav',                // dom id of the floating page navigation element
  keyNext:             'j',                         // hot keys used 
  keyPrev:             'k',
  keyNextPage:         'h',
  keyPrevPage:         'l',
  keyRefresh:          'r',
  additionalBodyClass: 'paging-keys',               // this class is assigned to the page body on load
  bottomAnchor:        'bottom'                     // the name of the anchor (without #) at end of page, e.g. set on last post on the page
};

I’m using the script on this site (see the overlay on the top right) and you can try it out by pressing j/k to navigate through the articles. Some things worth mentioning about the code;

• It tries to closely follow the ’7 rules of unobtrusive javascript":http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
• By default (and in the demo) it hooks to items in the HTML that formated with in the hATOM microformat
• It also latches onto pagination links generated from the popular will_paginate gem
• It makes use of Hotkey.js
• Eventually this script will live inside many of the default templates in Bugle

You might have noticed a minor style change in the most recent blog entries. I’ve decided (from now on) to use a light-box for showing off any embedded videos and (biggish) images on the page. It keeps the layout tidy and allows you to focus on the video you’re watching or image your viewing, without distraction.

All of this is made possible using Control.Modal, a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using content that is already on the page. So with javascript turned off, everything still works, with the links navigating to anchor tags in the page.

At the moment I am applying display:none; on the modal content to avoid a visible onLoad jump effect as the content gets hidden by Control.Modal javascript. I’ll be changing this (since doing this hides the content when javascript is off, and CSS is on) – There’s also a small bug with the tv-icon link style on IE6.

In Mephisto, I was able to create my own custom ‘Modal Macro’ filter, so I can easily apply the effect to any content in my articles. Here is the code for doing just that. Save this as modal_macro.rb in the lib/ folder for any new or existing vendor/plugin. As usual, any comments, questions or suggestions are appreciated.