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% [?]

Over at TerraMedia I’ve been quite busy over the past few weeks working on not only a new design for TerraMedia, but a completely new website!

It is now using Drupal instead of Joomla and the theme is valid XHTML 1.0 Strict along with being completely cross browser compatible. Developing it for Firefox, Safari, Opera and Internet Explorer 7 was really a walk in the park. Internet Explorer 6 caused me even more pain then usual due to the random portfolio image in the header that is on an angle.

I probably spent a good 50 hours just on that part of the design, not including the other IE6 fixes.

The reason it took so much work was primarily because I was using a pair of PNG 24’s for the images, one as the background image and one as the changing image. Using the PNG Fix module for Drupal fixed the background image fine, but because the image in the foreground was being called through php, the Javascript used in the PNG Fix module wasn’t picking up that it was a PNG, thus not filtering the transparency correctly.

After much fiddling around and trying to make this work, I ended up just combining the two images rather than having the background image seperate, and calling them randomly through Javascript instead. This is a little bit more tedious and doesn’t run correctly through a block like the PHP, but it does do the job. Unfortunately adding more images to the pool takes a little bit more than just uploading them, but I can live with that for now.

The left sidebar also took a little bit of fiddling around since it uses li:hover’s as well as a:hover’s and IE6 doesn’t render li:hover’s correctly and it renders li’s in general differently to the other browsers. So unfortunately, some of the sidebar functionality is lost but it degrades gracefully and that’s the important thing when degradation comes into play.

What do you think of the new “Web 2.0″ style design and the new website in general?

Popularity: 35% [?]

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% [?]