Shaun Mccran

My digital playground


Creating a baseline HTML 5 document

Browser standards and cutting edge web design are not great bedfellows. I've heard the arguments from creative designers that you have to write specific browser CSS styles to accommodate the multitude of browsers and their own unique way of rendering CSS.

I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters.

[ More ]


Using JQuery to disable all form fields

Whilst writing a new timesheet application I added a function to 'lock' an entire dataset, IE stop a user from editing the form on the page.

I'd spent a lot of time layout the timesheet page, designing the form, and help text etc. I didn't really want to destroy the visuals if a record was locked, I wanted it just the same, but 'non-active'.

This is where JQuery is simply awesome. Understanding 'selectors' and the power they can give you, with only very simple construction is key.

In this example imagine a page that has a div within it, the div has a id of 'divLabel'. Within that div there is a form. The code below will disable all the input elements within that div. Every single one of them. In one line of code. How cool is that.

view plain print about
1<s/cript type="text/javascript">
2    $(document).ready(function(){
3        $('#divLabel :input').attr('disabled', true);
4    });
5    // end

What its actually doing is adding the disabled attribute to each input, then setting the value to 'true'.

Get familiar with how JQuery selectors work, the docs are here:


Showing and hiding Divs using JQuery and a select field

Ever want to show and hide div elements using form controls? JQuery makes this sort of functionality super easy.

In this blog entry I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.

You can see an example of the finished script here: Demo JQuery show / hide using a select field

[ More ]


Fck editor inserting xhtml and browser specific code

I've been using the fck editor to handle my rich text areas in a content management application. I have to say I like the way it works, and it integrates easily with a Coldfusion platform. It does however have a few issues. This article deals with fck editor using xhtml code, and the editor using a few browser specific html rewrites.

Note: I can't have xhtml code in my site, as the definition type is not xhtml, and it fails an accessibility check if any is present.

[ More ]