JQuery scripts

We have used a variety of JQuery scripts when building websites, some we wrote ourselves and some are third party scripts adapted to our requirements. A few of our favourites are below:

1. FullCalendar -Surprisingly enough this is a calendar script. It gives you monthly, weekly and daily views, it is easy to add events to and even allows you to drag events around to different dates/times. We have recently used it for Wisdom Hospice.

2. Popup script - One of those popups which appears in the centre of the window and makes the rest of the content darker and unselectable until you clear the popup. You know what I mean, don't pretend you don't. This sort of popup is used in a variety of situations including questionnaires, signup forms etc. We used it recently on Next Holiday.

3. jCarousel - There are alot of slideshow/gallery JQuery scripts around. Some only allow you to slide images while some let you put divs in with text, links etc. This is one of our favourites as it is very simple to implement and is completely customisable, we used it for Wisdom Hospice.

4. Instant File Upload - Our content management system allows site owners to control their websites content including images. We have recently implemented this file upload script to upload an image without submitting a form and crucially without refreshing the page. This means that the site admin can see their changes in real time on the web page itself before committing to them. The script itself required quite alot of changes by our dedicated technical team (ie me) to achieve the desired effect but we are very happy with the results and believe it greatly enhances the experience of using our content management system.

5. Image Tagger - Similar to facebooks image tagging system, we have modified this script to allow website members to tag other members who appear in a photo. This is used in our recently completed Parker Pens website and forms part of our 'social networking website' package.

IE css hacks

Pretty much anyone who's ever made a website will have experienced the frustration of cross browser compatibility. It turns a simple static website build into a nightmare of testing, updating, googling and swearing for hours on end (the most popular 2-word phrase in the SiS office is probably "f*cking IE!"). The reason for focusing on Internet Explorer is that other browsers at least make an attempt to comply with the W3C guidelines for HTML and css coding, microsoft more or less chose to make up their own rules as they went along.

Below are a few tricks to help you solve that painful problem which forced you to google your way here in a fit of swearing..

1. Make all divs equal.
Different browsers apply different defaults to divs and other tags. A quick and easy fix is simply to force your own defaults by putting the following in your stylesheet.

div, img, table, tr, td, ul, li, p, h1, h2, h3, h4{
padding:0;
margin:0;
border:0;
}

2. Use Internet Explorer specific stylesheets
Putting the following code between the head tags will cause the stylesheet to be used by IE only.

<!--[if IE]>
<link rel="stylesheet" href="css/ie_hacks.css" type="text/css" >
<![endif]-->

3. Track down the divvy div.
Quite often you'll find a div has been forced out of position because it won't fit where you put it or because another div has shoved it out of the way. An easy way to find the cuprit is to add a border to your divs - make each one a different colour so you can tell which is which and that troublesome div will make itself known.

More tips coming soon...