New Site up and running

Posted by Dan Eastwell Thu, 02 Apr 2009 13:08:00 GMT

I've been working with the New Concept team at Channel 4 to help develop their new 'programmes' section.

Though it's barely a namecheck, here's a reference to a dropdown I've made:

To make it easier to hop between programmes, we’ve added a drop-down menu to the top-right of any video player that lists the shows currently in the 30-day window. This drop-down will be familiar to those of you who used the previous version of the Catch-Up player.

I've taken the design for a dropdown that needs to behave as a select html element, and I believe it pretty-much does. Although purists might baulk at what essentially is list of links behaving like a select, it fits in with the design in a way that a styled or native select wouldn't have.

Hopefully the behaviour either with a mouse or a keyboard is intuitive enough to make users leap in.

Posted in , , ,  | no comments | no trackbacks

Javascript, display:block and print stylesheets

Posted by Dan Eastwell Mon, 25 Jun 2007 09:45:40 GMT

Why should classes be used instead of inline CSS declarations?

If you're trying to hide an item using javascript, why is it better practice to add and remove a class rather than setting the style attribute to display:none and then display:block?

Firstly, it's good practice to separate presentation (the CSS) from behaviour (the Javascript) (which is easier said than done when there are dependencies between the two).

Secondly, and the main practical reason, is that it's impossible, in my experience to overrule inline javascript with a print stylesheet, due to the order of the cascade.

For example, if you use javascript on the DOM being ready to hide all elements that may later be shown on click, you cannot show all these elements when printing by changes in the print stylesheet

If you're adding classes, though, you can redefine that class within your print stylesheet to show the items that were hidden on load.

I've been told, although this is untested that adding display:block !important to your style declaration will override the javascript inline style.

Posted in  | no comments | no trackbacks

hasLayout issues triggered in IE6 by javascript click event

Posted by Dan Eastwell Tue, 19 Jun 2007 08:19:17 GMT

I had what appears to be a hasLayout issue triggered in Internet Explorer 6: extra bottom padding (equal to the top padding) on an element which has bottom padding explicitly set to 0 in the CSS.

This only occurred when an element this element contained was clicked and an a click event was triggered. On click a javascript function added a class to the link that was clicked.

I could resolve the extra padding problem using the IE developer toolbar by adding position:relative or padding-bottom:0, but it wasn't resolved by either adding these declarations to the CSS or adding them to the element on the click event on the <li> that was clicked.

This problem appeared in IE6 only and was due to adding an additional unecessary float to the contained >ul>. There was no workaround for this issue being triggered by a click event, except for creating a reduced test case in the HTML, and then commenting out the CSS piece by piece until I found what was causing the problem.

Posted in ,  | no comments | no trackbacks

New Portfolio Articles

Posted by Dan Eastwell Sat, 07 Apr 2007 20:08:00 GMT

A bit of shameless self promotion, here, but I've made the effort, so why not let people know?

There's a few new articles on my main site:

Boots Expert: Progressive enhancement: Javascript enhancement to pages, and CSS systems analysis, to tight accessibility requirements.

This project went live at the end of last week, and I'm fairly proud of how the project went and the outcomes. The site is very accessible and has been well reviewed and tested. I think the design is great (not my work!) and I'm happy with the soundness of the XHTML and the CSS, especially, which I think has been nicely modularised.

Energy Saving Trust: Ajax modules: Reskin work on existing coldfusion-driven modules, creating javascript to enhance the look of the output code. Ajax modules written to enhance HTML forms.

Design Council: Complex Modular Site: A complex modular site using transparencies, and intricate CSS structure.

I worked on this last year and now the site is live. This was a large project with many templates necessary to match the designs, it's lead me to think a lot about the status of interface architecture for the web (or CSS/XHTML, if you will…) as a discipline requiring the same level of forethought as any other software-based discipline, when dealing with projects with any level of scale or complexity.

Posted in , , , , , ,  | no comments | no trackbacks

Keep Coding Tidy: Maintaining a tidy DOM for the future.

Posted by Dan Eastwell Fri, 23 Mar 2007 16:58:00 GMT

In the beginning… we littered our code with <td>s <font>s, whatever. Now, through scripting, we’re doing exactly the same thing, and not caring about it.

Read more...

Posted in , , ,  | Tags , , , , , , ,  | 2 comments | no trackbacks

Alternative lightweight modular javascript library

Posted by Dan Eastwell Tue, 30 Jan 2007 16:59:00 GMT

JQuery is great, but I find I only use it to access DOM elements and manipulate them. A large part of the 19KB is unused, unless using fades and show/hides, etc. I've just come across this smaller, modular library DOMAss via 456Berea St.

I think it might be useful for doing the heavyweight DOM manipulation tasks that have taken a massive amount of code previously.

The active part of the code is this:


var str = new String(
this.value);
var remaining = maxKeys - str.length;
if(remaining <= 0){
	//alert('none left');
      this.value = this.value.substring(0,maxKeys);	
}
var endstr = remaining + textareaMaxCharsMsg;

if (remaining < 0){ endstr = textareaLimitMsg +
 maxKeys + textareaLimitEnd;}

The rest is just DOM manipulation needed to stop inline event handlers.

DOMAss seems to allow you to only include the functions you're using. Having said that, I wonder how you'd add visual effects without including all of JQuery..?

Posted in ,  | no comments | no trackbacks

Creating a Css/HTML/Javascript comments balloon popup

Posted by Dan Eastwell Sat, 25 Nov 2006 11:26:00 GMT

Seeing as my site's called The Thought Balloon and I write a lot about CSS, Javascript and HTML, I get a lot of search engine queries for people looking for a 'CSS balloon' or a 'javascript balloon'.

Read more...

Posted in , , ,  | Tags , , , , , , , , ,  | 3 comments | no trackbacks

JQuery: Journeys in Javascript and the DOM

Posted by Dan Eastwell Sat, 25 Nov 2006 11:02:00 GMT

I've been fiddling around with JQuery this week as part of my work. I've found it a very useful tool. To my dissapointment, I wasn't able to make Jay Gooby's Sussex Geek Dinner talk on JQuery. I've heard it was well-delivered and explicatory. I hope the slides will go up online soon

What is JQuery?

Essentially, JQuery is a very small javascript file, that allows you to write other javascript files in a much simpler language. You include the jquey.js file in all your HTML projects

It's a library of functions written in javascript that create, in essence a new language, that make coding javascript easier.

You include the JQuery file in the head of your HTML doc, plus your .js files written in JQuery.

What it will do for you is end the need for you creating exception handling, code looping through the DOM looking for classes and has some inbuilt functions that you can abuse like so many first-time photoshop users with nifty filters.

My concern is that learning this without learning why you need it will lead to poorer front-end developers. Equally, even front-end devs should learn how the underlying machine works, to understand what function to choose to lessen the burden on client machines.

Posted in ,  | Tags , , ,  | no comments | no trackbacks

Journeys in Javascript and the DOM: textarea max length

Posted by Dan Eastwell Tue, 31 Oct 2006 16:28:00 GMT

This article describes how to create a textarea max length indicator that keeps a countdown of the number of characters you have left to type. It also stops input after the maximum number of characters has been reached. It will truncate characters after the maximum limit via copy and paste, either from the right-click dialogue, or from the browser menu.

Read more...

Posted in ,  | Tags , , , , ,  | 18 comments | no trackbacks

Journeys in Javascript and the DOM: Remote Scripting

Posted by Dan Eastwell Mon, 30 Oct 2006 13:12:00 GMT

A sub-selector selector

I would class myself as a Javascript and the DOM beginner, and have been called to use it recently in something of a baptism of fire. In what I'm hoping is a series of articles about my (re)discovery of javascript with help from the DOM, I'll expose what I find out, so you don't make the same mistakes I'm likely to! So as a caveat to this example, it shouldn't serve as a script you should use, as it could well do with improving, comments welcome.

More importantly, the script shown here is inaccessible to users without javascript, so should be taken as an academic example only.

Read more...

Posted in ,  | Tags , , ,  | no comments | no trackbacks