Web Design Dorset - Scott Darby

New website for Jazz Musician Paul Burger

Scott — Tue, 15 Dec 2009 15:45:55 +0000

We have created a website for saxophonist Paul Burger, who wanted a design to match his printed brand material. The design has a vintage look which suits his service well. We provided the photographs on the site of Paul’s Saxophone in our studio, which really adds to the site visually. Paul often plays at events from weddings, cocktail parties to corporate events and wanted a simple brochure website to showcase his services. We have created an online presence for the business, which will improve the number of enquiries the business gains as 80% of couples now search for wedding suppliers online.

Jazz Musician's website

The site includes an audio player so potential clients can listen to samples of Paul’s music easily and get an idea of the different genres Paul offers. Along with rolling testimonials, which can be easily updated by the client and a contact form which will provide the client with all the information they need from enquiries. The site also has a Blog, which is easily updated by the client and a great way to target search engines, driving new visitors to the site.

Retro Website Design for Dorset Country Inn, web gallery feature.

lisa — Tue, 01 Dec 2009 18:18:14 +0000

Retro Web Design

Dorset Country Inn, The Langton Arms has been featured on creative Web Design Gallery Designfridge along with other stunning Retro inspired designs. The Langton Arms site was designed to get across the welcoming and relaxed atmosphere at the Inn in Blandford Forum. With its textured dark background in contrast with bright photography which we also provided, the site evokes a sense of English Tradition.

If you are looking for a creative website and want to find out what we can offer then do Get In Touch!

Web Design Dorset – New Website design for The Langton Arms, Dorset Country Inn & Wedding Venue

lisa — Mon, 12 Oct 2009 15:37:50 +0000

The Langton Arms Homepage

We are so excited to have completed the new website for The Langton Arms, Country Inn, Tarrant Monkton. We worked closely with the team at The Langton Arms to create a brand new design and branding for the site.

We love working with businesses which allow us to be creative and the Langton Arms certainly did. We met with owner Barbara Cossins to discuss what she was looking for and to find out what was important about The Langton Arms. Barbara told us that they believe in good quality local produce and source their food locally, where possible. Their A La Carte menu is equally important to them as The Traditional Fayre. They are a very proud to be a country pub and to support local suppliers.

The bar and beer garden is also a key part of any public house, with fine ales from award winning breweries this was also something Barbara and the team were keen to promote.

As a popular Wedding Venue, particularly for those looking for something a little different The Langton Arms is the perfect country wedding venue and my partner Lisa (Lisa Dawn Photography) has been privileged to shoot a number of weddings there so you will see our photography throughout the site.

So we came up with a site to promote all that is important to The Langton Arms. Their Blog is now a place where you can find out a little more behind the scenes and the events and news going on at The Langton Arms.

Barbara’s other request was for the site to be very visual, as we specialise in Photography we were more than happy to help! The Chef Sion set up some beautiful dishes for us to photograph which really shows the quality of the food which is served.

A La Carte Food

Traditional Fayre, desert

Pink Mullet, The Langton Arms

Take a look and see what you think… The Langton Arms Website

If you are a business and are looking for a fresh look and want your site to perform well in Google do Get In Touch! Prices start from as little as £399

How to build persistent expandable/collapsible navigation with jQuery and the jQuery Cookie plugin

Scott — Fri, 26 Jun 2009 14:46:16 +0000

If you have any experience with jQuery, one of the first things you probably learnt to do was show and hide content. jQuery makes this very simple with it’s built in show() and hide() methods, but sometimes it can be useful for the show/hide state of your items to persist from page to page. This allows the user to have a more personal experience of your site or web application by refining the information they are presented with to what is important to them.

In this tutorial I will build a jQuery plugin which remembers the closed/open state a side navigation menu, which conveniently follows the structure of the sidebar navigation in Wordpress.

View finished example.

The finished plugin will work with any list that follows this structure, begin by creating a new HTML page with the following markup in it:





Archives

  

Nav item
Nav item
Nav item
Nav item
Nav item


  




Categories

  

Nav item
Nav item
Nav item
Nav item
Nav item

This plugin requires the jQuery cookie plugin, download it and save it as in your root folder.

Create a new file called collapsibleNav.js and inlcude the following files in the document tag:

Open up your new collapsibleNav.js file, start the plugin and give it some default variables:

jQuery.fn.collapsibleNav = function(options) {

	var defaults = {
		hideByDefault: 'categories,archives', //ids of elements you want hidden by default
		clickController: 'h2', //your heading elements
		slideSpeed: 150 //speed of animation
	};

	//initial variables
	var opts = jQuery.extend(defaults, options),
		$list = jQuery(this), //reference list passed to plugin
		$heading = $list.find(opts.clickController), //cache heading element
		$listItems = $list.children(), //get each top level list item
		closedItems; //define var for items to be stored in cookie

Now create the following function. This will be called each time a list heading is clicked and will add the id of the list item to the cookie, or remove it if it is already in the cookie:

	//function that is called when slidable is clicked
	function updateArray(e) {

		//get id of element clicked for adding to closed items array
		var eId = jQuery(e).attr('id');

		//look for element in cookie array
		var arrPos = jQuery.inArray(eId, closedItems);

		if (arrPos == -1) {

			//element is not in array, so add it
			closedItems.push(eId);

		} else {

			//element is in array, so remove it
			closedItems.splice(arrPos, 1);

		}

		//update cookie
		jQuery.cookie('closedItems', closedItems, { path: '/', expires: 365 });
	}

We now need to check if the jQuery Cookie plugin has been included, and if so do the following: if there is no cookie with our closed items in it: create a new cookie with the elements you want hidden by default in, if there is a cookie present: apply a “closed” class to all of the list-items with their id in the cookie, then hide the child ul element of list items with a “closed” class.

	//remember closed/open state of nav items

	//check that the cookie plugin is available
	if (jQuery.cookie) {

		/*
		  if no cookie called "closedItems" exists, then create one with
		  elements you want hidden by default.
		  '1' is given as first value to prevent cookie from being
		  deleted if it contains no ids
		*/
		if (!jQuery.cookie('closedItems')) {
			jQuery.cookie('closedItems', '1,'+opts.hideByDefault, { path: '/', expires: 365 });
		}

		//if cookie called "closedItems" exists
		if (jQuery.cookie('closedItems')) {

			//split cookie into array
			closedItems = jQuery.cookie('closedItems').split(',');

			//iterate through array and apply "closed" class to each element within it
			for (var i = 0; i < closedItems.length; ++i) {
				jQuery('#' + closedItems[i]).addClass('closed');
			}

			//hide child ul for list items that have a class of closed
			jQuery('.closed').children('ul').hide();
		}
	}

We will now add an icon to each heading to indicate that it can be clicked to show/hide content. It is important to add this with JavaScript and not write it directly into the markup, as we only want people with JavaScript enabled to know that the headings can be clicked.


	//add span to each heading
	$heading.append(' ');

We now need to wire up each heading so that when it is clicked it hides or shows the content and sends the element clicked on to our updateArray function. We will finish by returning the jQuery object so that our list can be used again via chaining.

	$heading.click(function(){

		var $target = jQuery(this),
			$parent = $target.parent();

		//toggle closed class
		$parent.toggleClass('closed');

		//show/hide content
		$target.next().slideToggle(opts.slideSpeed);

		//update cookie with current list-item
		updateArray($parent);

		return false;

	});

	return this;

};

Finally we need to trigger the plugin on our list, add the following javascript between script tags in your HTML document after all of the other script tags:


	jQuery(function(){
		jQuery('#aside').collapsibleNav();
	});

I have added some basic css in the example, but I'm sure you can come up with something more creative!

Thats it!

View finished example.

I hope you enjoyed this post, if you did, please share it with others!

jQuery plugin: Stylish Select Box – Unobtrusive select box replacement

Scott — Thu, 28 May 2009 15:20:32 +0000

I have released a new jQuery plugin that allows you to style the standard elements are notoriously difficult to style with CSS. You can see how wildly different elements on top of any other content, regardless of any z-index. This can be very annoying when using JavaScript overlays, drop down navigation etc. The only way around this issue is to use the iframe shim technique which places an iframe around the content that needs to appear above the elements without clipping off any options wider than the set width.

While workarounds do exist for these issues, I wanted to create a drop down menu that worked exactly the same in every browser and did away with these IE6 oddities.

So how does it work?

Stylish Select basically grabs all of the options from your select menu, puts them into an unordered list and hides the original . When you click on or navigate through the list with the keyboard, it updates the .

This newly created to function like the original browser default. The plugin offers the following features:

Supports keyboard navigation including alpha-numerical keys
If the