Still As Life

Since I don’t have much time today, but I think I should write something for you to enjoy, I’ve decided to explain how to disable the input in a X/HTML form.Disabling the input to a form using XHTML or HTML is actually really easy, but it’s not very well known.

All you need is one little option added to the HTML, disabled=”true” and you’re in business.

So to put this in a scenario, maybe you want your users to submit a form, the ID for what they are submitting cannot be changed, but you want it shown as part of the form, maybe in your system it’s easier to insert into the database or to mail out this way.

For something like this:

You would have your input like this:

This is your ID:

All you need is:

<label for="formID">This is your ID:</label>

<input id="formID" value="1234" disabled="true" type="text" />

And there you go. If of course you need it to become editable, you could use JavaScript to change it, but I’ll go into that another time.

Popularity: 12% [?]

I have been asked a few times how to add a bookmark link within a HTML page, so that people can just click the link and the website will be added to their bookmarks.

This is pretty straight forward to do, here is the code you would need:

<a href="javascript:window.external.AddFavorite
('http://blog.stillaslife.com/code/bookmark-a-page-with-javascript/','Bookmark a Page With Javascript | Still As Life')">
Bookmark this page!</a>

This will create something like this: Bookmark this page!

All you need to change is the link to be the link to the page being bookmarked, then the second part ‘Bookmark a Page With Javascript | Still As Life’ is the title of the page being bookmarked. This should be whatever you want the bookmark to be titled.

Nowadays this is becoming less common as social bookmarking sites such as those below this blog post are becoming more popular, of course there are still plenty of people using regular bookmarks.

It’s probably also worth noting, to my knowledge, this only works in Internet Explorer. Enjoy.

Popularity: 20% [?]

I am looking forward to release of Internet Explorer 8, and what will hopefully be a reasonably quick take up of it.

In the myriad of new standards compliant features is CSS table support. I’ve used these countless times in Firefox, Safari and Opera, only to find that I have to completely rewrite the CSS, far more complexly, in order for it to work in Internet Explorer and look fairly similar.

Sure, I could just use HTML tables, but they feel clunky, restrictive and outdated to me. They have their uses, and layout design is not one of them.

Float tags do their job, that’s for sure, but they require far more code and are in general far more complex to get the same effect as the simple CSS tables which are far easier to use than HTML tables as well.

The new TerraMedia website that is currently under development was written using CSS tables initially. To get the same effect in IE6 and IE7 without using HTML tables, I’ve had to add a additional background image that would not have otherwise been needed, as well as use completely different CSS for the design that took twice as long to write.

If you haven’t used, or even heard of CSS tables before, they are really quite simple.

Say you had the following HTML:

<div id="container">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>
</div>

If you used CSS tables, all you would have to write in the stylesheet is this:

#container {
disply: table;
}
#left, #centre, #right {
display: table-cell;
}

Then you can go and specify any further styles however you want them. That’s all there is to it. That will give the exact same appearance as a three-column HTML table. The difference being that it is far easier to change the appearance of if you need to, as well as the positioning and so on.

For more information on CSS tables, there is a blog about it by Kevin Yank over at Sitepoint.

Of course, without complete browser compatibility, using these does pose a problem. With IE8 coming up though, hopefully it will become easier to utilize this excellent tool.

I noticed some of the commenters over at the Sitepoint blog found that the sample tabular website there didn’t always render correctly in Firefox, sometimes pushing the third column below the other two.

I haven’t had this experience myself, but Kevin posted a fix, saying that Firefox has a long-standing render problem that requires the

display: table-row

tag to be added to an additional containing div, within the original one. The additional tag should do the same as the HTML <tr> tag. I however think that the problem with his example could be fixed if he used either all fixed widths or all percentages. As he uses a combination of both, where the percentages add up to 99%, I think this would be the cause of the problem. I have found in my own usage of CSS tables that the use of widths is no different to the use of widths in floats and divs in general, if the widths add up to more than the width of the screen, it’s going to either go off of the screen, or it’s going to get pushed below everything else if it exceeds the width of it’s containing element.

It will be a while before they will be widely usable, considering how widely IE6 is still used, even after how long IE7 has been out. However, it is a step in the right direction and will hopefully result in some nice new standards compliant designs.

Popularity: 20% [?]