Internet Explorer and elements named "description"

OK I'm not entirely sure why I've never come across this before but it's a classic "Internet Ignorer" bug...

When doing Javascript validation on a form recently we had a field named (& id'ed) "description"

<textarea name="description" id="description"></textarea>

Subsequently we attempted to validate the value of this field in JavaScript...

if(document.getElementById("description").value!=""){...}

Well it turns out that this returns the meta description tag for Internet Ignorer ("undefined" for the value)... Marvellous! Well there is a workaround, either rename your field or, simply override the nativeGetElementById method for Internet Ignorer... Check out Sixteen Small Stones

DNN setting the date format for the calendar control

Having recently been frustrated by the lack of support in DNN to change the format of dates (yes I know about the web.config setting and yes I know about the built in language settings - it still didn't work when using DataSprings DynamicForms module which otherwise is simply superb).

Anyway if you're experiencing the same issues that we did then there is a simple solution.

In the "js" folder you'll find a file named "PopupCalendar.js".

I won't bore you with the various ways in which you customise the look and feel but if you need to change the date format (in my case to the United Kingdom dd/mm/yyyy) here's how...

Simply scroll down until you find the lines:

//default localized short date format if not provided
if (popCalDstFmt == "")
popCalDstFmt = "m/d/yyyy";

This is where the date format is set if you didn't pre-specify a format on the call to the popupCal method.

You can simply override this by adding the following line straight after this function... In our case:

//force UK date format
popCalDstFmt = "d/M/yyyy";

...and voila you're ready to rock and roll!

Hope this helps some other frustrated developers!

Cheers
Jon

Flickering graphics for rollovers

One common thing that crops up with graphical navigation bars is when they flicker whilst an image preloads (or the browser renders the change rather slowly) for example.

There are many traditional ways around this... Javascript preloaders being one example. How about a purely CSS, compliant version? Well here you go...

CSS background-position
Simple right? Well here goes... You need accessible links so you need a text equivalent... You need your links in a list too... OK let's get on with it:

<ul>
<li id="link1"><a href="http://www.google.com">google</a></li>
<li id="link2"><a href="http://www.yahoo.com">yahoo</a></li>
</ul>

That's the xhtml done... No seriously that's it - the rest is pure CSS - No JavaScript I promise!!

Ok so our nav bar is 40px in height.. And each is a graphic with the name of our link on it... When we rollover it displays with the graphics in inverse colours.. Cool?

OK so you need two graphics per link... One in the on state and one in the off state... Right? Wrong.

The way around the flicker is to have the two states on the same graphic and change the background position of the image... That way we have no flicker or preload issues...

ul #link1 a {
background:transparent url(/images/link1.gif) no-repeat scroll left top;
}
ul li a:hover, #main_nav li.selected a {
background-position:0pt -40px !important;
}

It really is that simple... We just move the graphic (background-position) up by the height of our original bar and voila!

Ok but our text still shows OVER the grpahic in our anchor tag? Well seeing as we're all CSS purists let's just move that with CSS...

ul li a {
display:block;
float:left;
height:0px !important;
overflow:hidden;
padding:40px 0pt 0pt;
}

Simple... Really nice, clean, accessible graphical navigation WITHOUT JavaScript.

Code examples written by Dom Smith, one of our coding buddies, from www.webmotivated.com

Accessibility and JavaScript Mouse Events

One of the most annoying things as a fellow developer trying to get his sites to pass accessibility checks is the "Make sure event handlers do not require use of a mouse" pass - which seems like an unavoidable scenario… I.e. you want something to happen when the user clicks the mouse… Nothing unreasonable there? Except when the user doesn’t have a mouse that is!

So we need a solution for those users too...

<input type="text" id="forename" onclick="this.value='';" onkeypress="this.value='';" />

Mmmm there's my first problem – I can’t simply add an onkeypress event as it would wipe out everything as I type… Not very user friendly.

Being lazy I was obviously annoyed at this as it meant I had to think about how to make this action accessible for all users…

Here’s a messy version of something that worked in my scenario:

<script>
<!--
function clearText(obj){
var defaultValue="DEFAULT VALUE";
if(obj.value==defaultValue){
obj.value="";
}
}
//-->
</script>

<input type="text" id="first_name" onclick="clearText(this);" onkeypress="clearText(this);" value="DEFAULT VALUE" />


It's messy but it does solve the problem and my page successfully got a WCAG priority 2.. AKA "a pass".

The point is you have to offer a solution to all of your users, not just those with a mouse. So next time you type that fatal line of code: onclick, remember those people who can't use a mouse.

I guess that is the concept of accessibility after all – allowing everyone to use your website!