Mark IJbema's Blog

Tables better than css?

9th November 2004, just after midnight | 310 comments

I wonder if somebody can explain me why divs + CSS is better for layout than tables. I really wonder about this, sure i like CSS, but lets say you want a two column layout. You can do this with two divs, and float one left, or something like that. Instead you could do it with a table with two cells.

Lets compare those two in various situations:

  • Browser renders tables and css
    • Div version: looks good
    • Table version: looks good
  • Browser renders no tables and no css
    • Div version: you get both parts after each other
    • Table version: you get both parts after each other
  • Browser renders tables but no css
    • Div version: you get both parts after each other
    • Table version: you still get a nice two-column layout

So i don't really see why css is better for simple layouts like this one. This occured to me when i saw yahoo mail in a text browser. It still looks like how the site is rendered in a graphical browser (at least it did then, yahoo recently switched to css, so i don't know how it looks now).

So anyone, why should i prefer divs over tables here?

Giving a field focus

2nd November 2004, early evening | 2160 comments

I intend to post some of the javascripts I write on this blog. Those won't be the old evil javascripts, but nice pluggable new-style javascripts. That means the only thing you'll need to do is to include a link to the javascript in the head, and possible give certain elements certain classes or id's, but certainly no inline scripting.

Today's script is intentioned to do one very, very simple thing. It should give focus to some field. This could be the first, but I can see good reasons why it isn't (for instance when you have a site with a navigation which includes a search box, but you want to give focus to the login form in the main content). This is quite a long post for such a simple script, but I'm also using it to introduce some general functions which I will use in other scripts as well, and which are very useful for any scripting.

The first thing we need is a way to add multiple scripts to the body onload event. For this I use this little piece of "code i found on Simon Incutio's Blog":http://simon.incutio.com/archive/2004/05/26/addLoadEvent:


/*
 * addLoadEvent based upon this blog article:
 *
 * http://simon.incutio.com/archive/2004/05/26/addLoadEvent 
 */
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {oldonload();func();}
  }
}

Now we need to mark the field we want to give focus in some way. The most logical way to do this would be to give that field an id. However, the fields already have their id's used in my situation (for coupling them with their labels), and since I want to be able to use the javascript for all pages I can't hardcode that id. It's neither an option to rename all those id's, since it wouldn't be very consistent with the other names then, which do have logical (semantical) names.

So I chose to mark the field with a class. This has flaws as well of course. You can now have multiple fields with this class, but you can only give focus to one field. But since you can give only one id to a tag it didn't leave me with much choice (though i could do it by defining with meta tags which id was the one to give focus, but that seemed overkill to me).

So now we need something to find an element with a certain class. I stumbled upon a "post on a forum on webmasterworld":http://www.webmasterworld.com/forum91/1729.htm in which Bernard Marx posted two functions: getElementsByCondition, a function to retrieve an element given an arbitrary condition and getElementsByAttribute. And though this was meant as a getAttributesByClass implementation, getElementsByAttribute isn't suitable, because it doesn't work when you define multiple classes. So i decided to use the getElementsByCondition:


/*
 * As proposed by Bernard Marx on:
 * http://www.webmasterworld.com/forum91/1729.htm
 */
function getElementsByCondition(condition,container) {
    container = container||document
    var all = container.all||container.getElementsByTagName('*')
    var arr = []
    for(var k=0;k

Now to create the function which checks wether this element is of a certain class and a function which combines this function with the previous one:


function checkWetherContainsClass(classname,element){
    var classes = element.className.split(" ");
    var found = false;

    for(var k=0;k

So now the only thing missing is the implementation of the function giving the focus itself. This is quite trivial, I retrieve the fields with the class 'focusfield', take the first one (there should be one, but if there are more this works as well), and give it focus. Finally we add this to the body onload event:


function givefocus (){
    var fields = getElementsByClass("focusfield");
    if (fields[0]!=null){
        fields[0].focus();
    }
}

addLoadEvent(givefocus);

I also provided the "complete source":http://www.markijbema.nl/static/focus.js for your convenience.

Displaying html structure

27th October 2004, terribly late | 2061 comments

Two days ago a read a "post on Angie McKaigs Blog":http://www.angiemckaig.com/archives/2004/10/24/assortedsweets20041024/index.html referring to the "3d CSS Zen Garden":http://www.stuffandnonsense.co.uk/archives/3dcsszen_garden.html of Malarkey. She also said:

bq. What would be really cool is if someone could make a script that would do this with any web page, complete with the pretty graphics.

Which i did, but without the pretty graphics, since that's just css and code fiddling. A small difference with Malarkey's picture is that i show all elements, so if you have multiple tags with the same (or no) class, i show them all. Also, it has some other shortcomings which i intend to fix in a next version.

So here is the "script":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi , here is the "highlighted source":http://www.markijbema.nl/static/htmlstructure/code.html and here is the "downloadable source":http://www.markijbema.nl/static/htmlstructure/show_structure.pl.txt.

Your mileage with the results may vary. How usable the rendering is really depends on what elements a site uses for the structure. A few examples.

  • "CSS Zen Garden":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi?url=http%3A%2F%2Fwww.csszengarden.com%2Fzengarden-sample.html
  • "Anne van Kesteren":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi?url=http%3A%2F%2Fwww.annevankesteren.nl%2F

The second isn't really helpful of course. So i'll make it possible to define what to display as block, what as semiblock, etc in the form in the next version.

Update: What i forgot to mention is that it only works with XHTML

Work in progress

12nd October 2004, just after midnight | 4 comments