Freelancing Gods 2014

God
19 Apr 2009

Link: The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.

04 Feb 2009

Link: Rosenfeld Media - Web Form Design Book Site

"everything you need to know about designing effective and engaging Web forms"

28 Apr 2008

Link: hatom - Microformats

blog post microformat - need to keep this in mind when retweaking my blog

06 Apr 2008

Link: 24 ways: Back To The Future of Print

31 Mar 2008

Link: Animated in-progress indicator for long running pages - Stillnet Studios

not the cleanest code, but a good starting point

25 Mar 2008

Link: Formtastic Plugin Documentation

"makes it far easier to create beautiful, semantically rich, syntactically awesome, readily stylable and wonderfully accessible HTML forms in your Rails applications."

12 Dec 2007

Link: Wufoo · HTML Form Template & CSS Design Gallery

Collection of form designs

15 Oct 2007

A Quick Focus on Javascript

Neat little refactoring trick for the day (as I’ve just recounted to the roro crew)…

I found myself writing several window.onload event listeners in javascript to set focus to the default text inputs on various pages. It’s annoying, and doesn’t feel at all elegant, so to make it a little cleaner, I wrote a single onload listener, which grabbed the last item with the class ‘autofocus’, and set focus to that. So now all I need to do for future pages is give the text input a class of ‘autofocus’.

Javascript code, with prototype:

Event.observe(window, "load", function() {
  var last = $$(".autofocus").last();
  if (last) last.focus();
});

Not so useful if you rarely have default text fields, but for the app I’m working on, there’s a lot of different pages, hence why I’m quite happy with the above solution.

12 Oct 2007

The Quest for Semantic Scrolling Tables

At the start of this week, I was hunting around the internet for a scrolling table solution with the following requirements:

  • No extra markup
  • Cross-browser including IE
  • Ideally just HTML and CSS

Unfortunately, there doesn’t seem to be any solutions that fit those criteria. So, with some javascript (yes, that doesn’t fit the last item), I built my own.

Examples

Check out the before and after examples, and the javascript file itself – unfortunately the current version is built on top of prototype, but if you feel like adapting it to not use any external libraries, be my guest.

Usage

The table must have a thead element specified – this is the section that won’t scroll – and include the CSS class ‘scroll’ in the table element. To have an enforced size for the table (if you want it to scroll, you need this), add something to your CSS specifying height for elements with the class ‘scroll-block’. As long as prototype and the scroll_table js files are included, the tables will automatically become scrollable as the page loads.

How it Works

The original table is put into a new div which has the class ‘scroll-block’. The thead from the table is duplicated into a new table above that div element, and the original table’s margin-top is set to a negative value to hide its header. Then each new header cell has its width set inline to force the columns to line up. It will fix these up whenever the browser window is resized, too.

The resulting source isn’t ideal, but it works, and it means you don’t have to do much to your nice, clean semantic tables. For anyone with Javascript disabled, they just get a nice big table.

One Minor Issue

Left borders on the table disappear – so if that is important, just add it to the div.scroll-block element via CSS.

25 Aug 2007

Link: HTML Entity Character Lookup › Left Logic

Tags:

Note the Dashboard Widget

01 Jun 2007

Link: subLog : HTML / CSS to PDF using Ruby on Rails

29 Mar 2007

Link: Unicode UTF-8 Encoding - HTML Resource

14 Mar 2007

Link: Prince

14 Mar 2007

Link: A List Apart: Articles: Printing a Book with CSS: Boom!

15 Dec 2006

Link: Using an object Element instead of an iframe

Tags:

07 Dec 2006

Link: Syntax Manual

Tags:

Translates ruby code to a nicely coloured HTML version of the code.

27 Sep 2006

Link: Animated GIF images in hidden page elements - Rick Strahl's Web Log

23 Aug 2006

Link: Apache FOP

23 Aug 2006

Link: How to Publish XML Documents in HTML and PDF

20 Jun 2006

Link: A List Apart: Articles: Prettier Accessible Forms

Styling forms using semantically correct markup, css, and a dash of javascript

RssSubscribe to the RSS feed

About Freelancing Gods

Freelancing Gods is written by , who works on the web as a web developer in Melbourne, Australia, specialising in Ruby on Rails.

In case you're wondering what the likely content here will be about (besides code), keep in mind that Pat is passionate about the internet, music, politics, comedy, bringing people together, and making a difference. And pancakes.

His ego isn't as bad as you may think. Honest.

Here's more than you ever wanted to know.

Ruby on Rails Projects

Other Sites

Creative Commons Logo All original content on this site is available through a Creative Commons by-nc-sa licence.