This short tutorial will show you how to create a simple but effective jQuery slider that allows users to change the value of a number field on an HTML form.  I built this for newofficeasia.com, a serviced office rental search site, to adjust the search radius but it could be easily adapted and put to all sorts of uses.

slider-example

The HTML

In order for this degrade when javascript is disabled you'll want to create the form without any elements relating to the slider.  For me this included the location text input and the field for the number.

 <div class="distance">
    <input type="text" name="location" id="location" value="City or postcode" />

    <p>Search for offices within...

About 6 years ago I was working mainly as an artist and decided I wanted to learn how to use a 'real' camera.  Digital SLR cameras were becoming both affordable and capable enough to allow amateurs (i.e. me) to give it a go without breaking the bank so I invested in a Nikon D40x with a Nikon Nikkor 18-200 VRII zoom lens.  My thinking was that this would be a flexible enough combination that it would cover me in most situations without needing to switch lenses.

After a couple of years I found the low light capabilities of this setup was pretty dismal compared to the newer entry level DSLRs so I purchased a Nissin Di 622 Mark II flash.  By now my camera was something of a behemoth and...

UPDATE 25/02/13: I have since re-worked this site to only use the proximity search.  I have a new site on the horizon which may well use a similar setup and I will update the post if it comes to pass.

I have been working on a personal project recently called newofficeasia.com that requires search results to be sorted by distance from a user's location.  Luckily there's a great add-on called Geofinder that does just that. 

Things became a little more complictaed when I needed to add other search criteria into the mix such as keywords and other custom field data. Geofinder only selects and sorts entries based on their location but I needed the functionality of a fully fledged search...

UPDATE 3rd August 2012: The original version of this syntax mode stopped working with the Coda 2.0.2 update.  The latest version should restore functionality.

I've been Googling 'ExpressionEngine syntax mode for Coda 2' almost daily for the last few weeks in the hopes that someone would come up with an EE2 syntax mode for the brilliant new code editor from Panic and put me out of my misery, but so far I've been left wanting.

As an act of desperation I decided to have a go at putting something together myself using existing syntax modes as a base from which to start.  After a bit of trial and error I have come up with something which works well enough to get me through until someone...

It's been a year and a half since writing 'My top 10 ExpressionEngine addons' and there have been loads of exciting new add-ons released in that time, so I thought it was time to write a follow-up post to pick out 10 more of my favourites and give a few examples of how I might use them.

Session variables and how to use it as a basic language selector / changer (EE1 & EE2 - Free)

There are several circumstances where having a variable stored between pages over a period of time is a really useful thing.  PHP's session variables do just this and with the EE Session Variable add-on, you don't even need to use PHP in your templates to create, edit or delete them.

A recent project I...

Spring is in the air and I have recently been faced with an unusual dilemma.  Having just moved house we wanted to plant a few fruit trees in quite an irregular shaped garden with numerous potential obstacles between the ground and the sun and I couldn't work where each tree would be best situated to gain maximum sunlight throughout the summer.  Having pondered various locations and even planted a couple of the trees I had a flash of inspiration that gave me the precise sunlight hours for any spot of the garden at any point in time.

When I first got an iPhone, one of the first things I installed was a stargazing app that enabled you to see the celestial landscape overlaid onto the real...

Headings with background colours are a common design element of modern websites.  Because headings are displayed as block by default, they will by nature stretch to fill the full available width of their containing element which is fine until you want them to have a background which only sits below the text and not the full width of the parent element.  You may be able to use set widths to achieve something similar but this doesn't account for scaling text sizes or content generated by a client via their CMS which can change frequently.

In an ideal world the 'inline-block' declaration should cater for these eventualities by providing the styling capabilities of a block level element...

Web designer and developer, Michael Sibley (AKA Siblify) is on the move.  Having promised myself that I would take full advantage of the mobility that the freelancing lifestyle has to offer, I am relocating southwards from Gloucestershire to sunny Dorset. 

What sort of projects do you take on?

My passion is for creating a superior web experience, not just for end-users but also for site administrators through meticulous design and a keen awareness of usability.  I want people to feel empowered to edit and update their websites so I base all my sites around ExpressionEngine, a fully featured and highly flexible Content Management System or CMS, to make changing the content really easy...

I count myself as being fairly proficient with Photoshop but at the same time I am sure there are a lot of very basic techniques that I am unaware of and until recently this was one of them.  Whilst there are a few different ways to achieve HTML curved corners for your website including javascript methods and CSS3, for those clients who insist that their site looks identical in every browser the only reliable solution is to use 2 background images on an outer and inner element. 

I have always been convinced that creating these graphics should be very simple to do in Photoshop and as it turns out they are, but for years my half-hearted Google searches came up with nothing satisfactory...

I recently wrote an article entitled 'Agency vs Freelancer. Choosing the right person(s) for your new website' which compared the pros and cons of using either an agency or freelancer to build your new website.  In this article I want to examine in greater depth some of the qualities to look for when hiring a freelance web designer. Finding a suitable freelancer can be a bit of a minefield so it really is worth taking careful consideration when trying to select the right person for the job.

The skills for the job

When using a solo freelancer it would unrealistic to expect them to be an expert in every area of the web development process but you should ensure they are competent (if not...

I have recently been working on a serviced office space rental site called NewOfficeAsia.com which included the need for an interactive map highlighting the countries which the company dealt with.  There was also the requirement that the map display the current local time for the capital of the active country or area. 

For several years my first port of call for a project such as this would have been Flash, but this is no longer the case thanks to tools such as the jQuery javascript library and its wealth of community built plugins which makes coding these sorts of things relatively straight forward whilst negating the need for browser plugins.  Creating the graphics for each country...

Price

Without the overheads that larger business' inevitably incur, freelance web developers are often able to keep their rates relatively low.  There's only one salary to pay, no premises to rent and no shareholders to demand that profits continue to...

The last 12 months have been hectic thanks to a combination of high web demand and new babies which has resulted in some very slow progress on the painting fron but finally I have something new to show - View over Macau.

This painting was made using cotton and ink on raw canvas and was based on a view overlooking the Chinese special administrative region of Macau.  A short walk from bright lights and casinos of down-town Macau is a more gritty, less glitzy city, which provided an irresistable backdrop for this rather dark and foreboding painting.  Buildings are stacked in a haphazard almost accidental fashion with numerous wires and washing lines acting as linkages between the spaces...

Here's how Ryan describes EE Spotlight:

"My vision for EE Spotlight is that it will be a repository for knowledge and community interaction. I also wanted to make it an easily available tool for others to post their content onto,...

I was looking back through some of my old YouTube videos and noticed this short film my wife and I made a few years ago when we lived on our houseboat downstream from Stratford-upon-Avon.  I though it was pretty nice despite the awful video quality so I dug out the original iMovie file and exported a slightly better quality version.  It's still not exactly HD but good enough to get the idea (view on YouTube).

The video was inspired by Shakespeare's Sonnet 12 and took advantage of a day when the River Avon had frozen over.  We managed to finish filming just in time before the ice completely melted and the letters started to sink.  The soundtrack is by a really talented musician named...

Download plugin

Usage

{exp:which_browser}

Browsers currently detected are:

Webkit
Chrome | iCab | OmniWeb | iPad | iPhone | Safari | Webkit (if no specific Webkit browser is detected)

Gecko
Netscape | Firefox | Camino | Mozilla (if no specific Gecko browser is detected)

Opera

Internet Explorer
IE10 | IE9 | IE8 | IE7 | IE6 | IE5

Unknown Browser

Having spent the last 4 years heading up the digital wing of Happy Giraffe PR and Marketing company in Birmingham I have decided that it's time to build myself a studio (or shed as my wife likes to call it!) and go freelance.  My last few years working in the West Midlands have been amazing and I have learnt a huge amount from the talented folks over at HG but I feel that the time has come to incorporate the design, project management and most importantly development skills I have acquired into my solo projects. 

I will continue to work on several projects for the Giraffe on a white label basis but will also be developing my own Siblify brand and looking for exciting new opportunities...

Having decided to use HTML5 for my new portfolio site it made sense to embed the video on the homepage using the HTML5 video tag and on the whole I was fairly impressed with the results despite some flaky support even on the latest browsers.  But as always I needed to bear the IE stragglers in mind and cater for them with a Flash fallback version of the video so having taken a quick look at a post entitled 'Video for every one' over at Camen Design I set to work wielding my object tag. 

All went smoothly until I tried validating at which point I realised my pure unblemished code had been polluted.  Now on the whole I'm not really a validation fascist and if there's a good reason why...

I usually use Cufon for my font embedding needs but if a font doesn’t want to be converted into Javascript or the resulting code is just too bloated for me to stomach then I find myself turning to @font-face, the css alternative.

I recently stumbled upon a brilliant tool for converting fonts to work across multiple platforms and to generate the @font-face code necessary to embed them.  The site is called Font Squirrel and it converts the font to TTF, EOT, WOFF, SVG and AVGZ formats to ensure it works on as many platforms as possible.  Whilst most decent browsers can deal directly with TTF fonts, poor old Internet Explorer needs the EOT (Embedded OpenType) format and IOS devices can only...

Having built sites with most of the mainstream content management systems available today, both open source and commercial, I can say with confidence that  Expressionengine has got to be my favourite thanks to its amazing flexibility and polished end user experience.  Here are 10 add-ons and hacks that have helped me come to this conclusion.

Note (02/04/12):  I have now released a new blog post with 10 more really useful add-ons at http://www.siblify.com/blog/ten_more_expressionengine_add_ons_and_some_usage_tips/

1. Structure (EE1 & EE2 – $65)

When I first started using Expressionengine, my main gripe was the lack of any sort of automatically generated navigation such as I had...