Useful jQuery plugins a Web Development bag by Robin Layfield on Bagcheck

Here is a collection of useful jQuery plugins that can make any developer’s life that little bit easier. Part asset, part archive, it turns out that BagCheck may well be the best place to store this info!

I’m sure this list is going to keep on growing. There’s so much good stuff out there being created every day.

Lettering.js
Radical Typography
This looks really promising – finally a way to control the output of type at the character level through jQuery + CSS. Kern with ease, style with grace. Type is the next frontier of web design and this plugin brings it one step closer.

jFormer – jQuery Form Framework
jQuery form handling
A bit more complex to use than the other plugins in this bag (in Haynes-manual speak this would be a “4 spanner job”), this plugin lets you create really clean forms with good user feedback and AJAX interactions. I think anything that gets developers closer to the goal of producing great forms and form interactions has got to be a good thing for the web in general.

Uniform – Custom cross-browser form elements
jQuery, forms
This plugin gives your form elements a consistent and clean look across multiple browsers, hence then name, Uni-form!

DontType! (Password entry replacement)
Passwords, jQuery
Passwords are so passé!! Remembering them and typing them in is such a chore. If only there was a way you could flick your mouse and send a unique code to the web site…. Oh wait! There is… it’s called Don’t Type

Fancybox (Lightbox alternative)
popup frame, lightbox, jQuery
There’s a hell of a lot of lightbox and gallery window plugins out there for jQuery. This is one of the best: Clean and simple to implement and very presentable.

tipsy (Pop-up tooltips)
Facebook-style tooltip plugin for jQuery
Very simple jQuery tooltip script. It draws the tool tip in a very classy looking bubble with a pointer to N, E, S, W.

jQuery Validation Engine (Form validation)
form validation, jQuery
This is a dynamic form field validator. It has a number of easy-to-implement comparison and validation methods. Any form field that fails validation will cause the form to scroll to its position and a prettified message to appear above the field in a red callout.

It’s neat and very visually effective.

Simple Validation (Form validation)
simple form validation, jQuery
This site combines my love of bass-playing with coding to provide help in the form of bassistance! No really, it does…

This is a very simple and effective form validator that creates and reveals a hidden message beneath any improperly formed fields. Much simpler than the Validation Engine above, it’s often a better fit for web sites that just need the validation and no messing.

jQuery UI (Widgets, transitions visual effects)
User Interface Elements
This is a bit of a no-brainer really. A collection of elements, effects and useful extensions to jQuery, all wrapped up in an easy-to-customise theme.

Widgets include: calendar datepicker, accordion and tab views, autoocomplete and dialog boxes.

jQuery Mobile (Mobile app building)
mobile, jQuery
I had to include this. Even though it is still in alpha (alpha3 at the time of inclusion) it is slick, neat and conceptually well put-together.

If you want to make cross-platform mobile enabled apps with the minimum of effort, then jQuery Mobile is the way to go.

It builds upon the work done by Sencha Touch spinoff jQTouch and the only thing that is holding it back at the moment is a lack of clear tutorials.

Modernizr (Browser capability detection)
Compatibility, jQuery
Not actually a jQuery plugin but an invaluable asset to the developer. Modernizr helps you target browser-enabled features and provide fallback solutions when those features aren’t available.

It does this by parsing the HTML and adding a css class to each element that indicates whether a certain new or desirable feature is or isn’t present.

Noise texture generator (Graphical effects)
screen noise, jQuery
In these days of textured backgrounds, it’s nice to know that a simple script is available that can do this for you.

Jcrop (Image cropper)
image cropping, jquery
Jcrop is great. Really great. I use this for making instant croppable profile pictures when people sign into personalised web sites. It’s neat, lightweight and very classy looking.

jQuery Waypoints (Page navigation)
scrolling, jquery
I haven’t used this, I just stumbled across it today but it looks really interesting; you can trigger events when a user scrolls to a specific point on the page. Very useful for one page websites!

mapkey – keypress handler
keys, jQuery
This is a really neat solution for handling keypresses on your web site. You can bind a keypress to a rel tag (eg. rel=”next”) to move the focus through a page, or even trigger a function, eg a scroll or visual effect. It has a simple syntax that builds upon jQuery so you can use it with the minimum of effort.

ИкониПодаръциikoniИдея за подаръкикониикониПравославни икониикони на светцииконописikoniсвети георги

roadrunner.example.com

This presents a problem for PLESK as it manages Virtual Hosting (vhosts) very carefully and it will treat this as an entirely separate domain. The way to solve it involves 2 techniques: setting up a wildcard DNS entry and adding in a special configuration file to the PLESK domain. Here’s how to do it:

Wildcard DNS entry

• go to your PLESK control panel
• select your domain
• click on the DNS settings icon

• 

  PLESK DNS Settings

• Now create a new wildcard entry with the following details:
  Record Type: CNAME
  Domain name: *  (the rest of the domain is written outside the textbox eg. .example.com)
  Canonical name: example.com
• Click OK
• When you make a change to the DNS, PLESK won’t actually apply it until you hit the UPDATE button, this is sometimes obscured off to screen right

VHOST config
The next part involves having root access to the web server. If you control the whole PLESK domain, this is possible, however you may have to make a technical request if you don’t

• using Terminal, logon to the server with SSH (eg ssh root@example.com) enter your password and you should be presented with a command prompt
• cd to the correct folder for your domain (usually /var/www/vhosts/example.com/)
• cd into the conf folder
• create a new file, using vi
  vi vhost.conf
• press i to go into insert mode and enter the following line:
  ServerAlias *.example.com
  (where example.com is your domain)
• hit ESC and then tap :wq! to save the file and quit
  You may also be able to create this file using your favourite web editor – mine is Coda from Panic software – and FTPing it up into the conf folder one level up from the root of the web site, however you will still need to be able to restart the PLESK instance to get it to read the new file.
• in the command prompt, type the following command:
  /usr/local/psa/admin/sbin/websrvmng -a -v
  this will restart PLESK

That’s it. You should find that you can now create blogs and view them in their dedicated subdomains.Православни икони

What happens if you link to a downloadable file can often be unpredictable; Firefox on OS X will merely download the file. Internet Explorer on the other hand – even on a system that has Office 2007 installed – will attempt to treat the file as a compressed file.

Download dialog showing incorrect file type

Once you choose save in Internet Explorer, it saves it as a compressed file which when you open it gives you a set of resources, similar to a Mac Bundle. It’s pretty hard to actually get the correct application to launch and run the file as it should (the example above was a PowerPoint pptx file).

Luckily, help is at hand and all you really need to do is register the new Mime types with Apache. You can either do this at the server level in the Apache configuration file, or on a per-site basis using a .htaccess file.

Apache config file
This file is called httpd.conf for Apache 1 and apache2.conf on Apache 2. There are a number of places it can be so it’s best to run a file search on the server to find it.

SSH into your server as root (if possible)
Run the command  find / -name apache2.conf or    find / -name httpd.conf
You should now see a file listing which will give you a clue as to where the file will be (most likely etc/apache2 for Apache 2 web servers).
Edit the file using the command vi /etc/apache2/apache2.conf (if that’s where the file is)
Type :10000 to jump to line 10000 (and therefore the end of the file)
Press I to insert and then newline
Paste in the following lines:

AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats .docx .pptx .xlsx
#AddType application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx
#AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.ms-word.template.macroEnabled.12 .dotm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template .dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 .potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template .potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 .ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 .ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow .ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 .pptm
AddType application/vnd.ms-excel.addin.macroEnabled.12 .xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 .xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 .xlsm
AddType application/vnd.ms-excel .xlt .xla
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template .xltx
AddType application/vnd.ms-excel.template.macroEnabled.12 .xltm
AddType application/vnd.ms-xpsdocument .xps
AddType application/application/vnd.ms-powerpoint .ppt .pot .pps .ppa
AddType application/msword .doc .dot

Now hit [Esc] to leave insert mode
Type :wq! to save the file
Finally restart the apache server, most likely by using the command /etc/init.d/apache2 restart
Your entire web server should now be able to deliver the correct file types – problem no more.
Per site .htaccess configuration
Browse to your remote site and open the .htaccess file if it’s present (make sure that your web / ftp client can see hidden files as dot-prefixed files are traditionally hidden from view on the Linux / Unix platform.

Create a new file if there isn’t one present and then simply add in the following lines:

AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats .docx .pptx .xlsx
#AddType application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx
#AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.ms-word.template.macroEnabled.12 .dotm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template .dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 .potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template .potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 .ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 .ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow .ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 .pptm
AddType application/vnd.ms-excel.addin.macroEnabled.12 .xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 .xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 .xlsm
AddType application/vnd.ms-excel .xlt .xla
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template .xltx
AddType application/vnd.ms-excel.template.macroEnabled.12 .xltm
AddType application/vnd.ms-xpsdocument .xps
AddType application/application/vnd.ms-powerpoint .ppt .pot .pps .ppa
AddType application/msword .doc .dot

save the .htaccess file and your web site should start delivering the correct file types!

Now in pptx format!

I felt I should write this up because it’s a problem that’s been puzzling me for some time and I only found out the answer today. Here’s the deal:

* it’s currently recommended that all traffic to a web site goes to one URL, to minimise dilution of the Google PageRank.

* on NamesCo servers, traffic is automatically routed to both http://www.example.com/ and http://example.com

* ordinarily I would use an Apache .htaccess script with a simple 301 redirect in it, like so:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

* But…. NamesCo servers don’t run on Apache, they run on Zeus

So what we need is a script that will force Zeus to do the same kind of redirect.

There’s just one other gotcha, that is specific to NamesCo. The script is only allowed to be run from one place, in the root of your web directory, a file called rewrite.script. You can edit this manually but by far the best way to manipulate it is via the control panel on the NamesCo server. There’s a module under Scripts & eCommerce called Rewrite Script.

Screen grab of NamesCo control panel

This module has two key features:

1) it will take standard UrlRewrite code from an Apache .htaccess file and convert it to Zeus compliant code.

2) it will allow you to type in Zeus compliant code and validate it before writing it to the server root.

After much scrabbling around and an awful lot of trial and error, I found a post from a guy called Robert at www.emailmarketingsolution.co.uk that seemed to do the trick. The original post is up on the zeus community knowledge hub.

Zeus uses a completely different algorithm for its server control scripts and documentation is somewhat thin on the ground – most of the examples I found on the internet were just that, examples and hacks showing different approaches to solving pretty much the same problem.

I’m going to repeat Robert’s script here but add in a bit of background detail to show what it is actually doing

RULE_0_START:
# begin rule, rules are separated into blocks in the Rewrite.Script
match IN:Host into $ with ^example\.com$
# examine the hostname to see if it doesn’t begin with www (note the backslash to escape the dot before the domain suffix)

if matched then
match URL into $ with ^/(.*)$
# if there is a match, extract the rest of the path into a temporary variable ($1)

set OUT:Location = http://www.example.com/$1
# now re-construct the header location, this time prefixing it with ‘www’

set OUT:Content-Type = text/html
set RESPONSE = 301
# tell Google (& others) that this page has been permanently moved, so they update their records

set BODY = Permanently Moved
# human readable version of ’301′ message

goto END
endif

# end rule
RULE_0_END:

OK, so there you have it. That’s how to do some basic Zeus wrangling. There’s more documentation on the Zeus server at the Zeus Knowledge Hub web site. I think the key documentation is the TrafficScript Guide but I’m not entirely convinced.

Additional: DRUPAL users
There’s also a complete Rewrite.script for Drupal users. Get it from the main Drupal web site.