Three for the price of two
Remember in an article a couple of weeks ago I was amazed that after 4 years I am still discovering new HTML tags and their uses. Well, it's happened again. Twice in one week!
It's Sunday and I'm hung over and not really feeling up to writing anything monumental, so I thought I'd just share these two useful tips with you. Hopefully this will act as thanks for the overwhelming response I had to the Happy Birthday article. I now have a renewed will to carry on with the site and try and take it even further. Keep watching.
#1. Make forms more user friendly:
Radio buttons and check boxes can be a bit of a pain to use. You have to move the mouse over them and be very exact with where you're clicking. That is unless you are using the <label> tag. A part of the W3C's HTML spec, the <label> tag only works in later versions of IE and in the latest Netscape (6). Older browsers simply ignore it though so you can use it safe in the knowledge you won't be breaking anything. Let's see it in action. Click on the text to the right of any of the input elements to see what it does:
Your favourite colour:
How do we do this? Simple. Here is the HTML for the first option above:
<input type="radio" name="input" id="input1" />
<label for="input1">Green</label>
As simple as that! The only other thing you "need" to do is add a little more style and make it so that the mouse cursor turns to a hand so the user knows they can click here. Just add this CSS to a style tag on your form or in a .css file:
label {cursor: hand;}
Simple yet effective. My favourite type of tip..
#2. Defining tables made simple:
OK, so we've got a table with 5 columns. You want the first two columns in bold. First column in red and 60px wide. Second column in green and 70px wide. All other columns to be 40px wide. Like so:
| Red, bold, 60px | Green, bold, 70px | 40px | 40px | 40px |
How would you do this? Until a couple of days ago my code would look like this:
<table><tr>
<td width="60" style="font-weight:bold; color:red">
Red, bold, 60px
</td>
<td width="70" style="font-weight:bold; color:green">
Green, bold, 70px
</td>
<td width="40">40px</td>
<td width="40">40px</td>
<td width="40">40px</td>
</tr></table>
Now that I know about the <colgroup> and <col> tags it would look more like this:
<table>
<colgroup style="font-weight:bold">
<col style="width:60px; color:red">
<col style="width:70px; color: green">
</colgroup>
<col span="3" style="width:40px;">
<tr>
<td>Red, bold, 60px</td>
<td>Green, bold, 70px</td>
<td>40px</td>
<td>40px</td>
<td>40px</td>
</tr>
</table>
In the second example we only have to define the style of each column once at the top of the table. This example doesn't really do the tags much justice and you'll probably be wondering why you should be bothered about. Well, applying it do Domino and the way in which "HTML views" are built we can use it to increase performance.
If you are like me then you probably turn on the view property "Treat view contents as HTML" and create the HTML for each document with <tr> and </tr>s in the first and and last columns and lots of <td>s around each column. If you also had to add the styling as in the first example above this increases the size of the view's index. This affects database size, server performance and the time it takes the user to open a page. If you use the second example and put the style on View Template instead, like in the shot below, then you can greatly increase performance for large views.
So there you go, another simple and useful tip. I am spoiling you this week aren't I...
#3. And finally:
I always thought this wasn't possible until this week. So glad to find that you can change the program uses when you ask Internet Explorer to let you View Source. I've always wanted to do this as Notepad is nice in its simplicity but sometimes you just need more functionality. That's why I now use my favourite text editor to view a page's source. To do this I added the following key to the registry.
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name
This key points to the path of my TextPad install. Here is the result of an export of that key on my machine. You can use a it to create .reg file and automate the Registry update:
REGEDIT4
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor]
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name]
@="D:\\PROGRAM FILES\\TEXTPAD\\TEXTPAD.EXE"
Hope you get something you like from one of these. What are you waiting for? Get using them....
I thank you, my mother thanks you...
As an old webhead, I'd known about the colgroup tag spec when it was just a whim. I filed it away in the dark recesses of my mind whilst I tried to come to grip with REALLY old browsers. It simply hadn't occurred to me to go looking through my private attic when I made the transition to Notes/Domino. I have a view or two that have just lost a couple of stone thanks to your reminder.
Reply
Text Editor for View Source
Won't work with WordPad as it uses the WniDir temp dir and bombs out with an access denied issue, but thanks for the TextPad stuff...
Reply
Cheers Jake
Its amazing how much you can forget when this web development lark moves so fast. I've started using the label again today!!
I should start giving you commission!! - Speak to my agency!
Reply
Labels difficult to integrate into Domino
Jake,
Congrats on your marriage.
The label tag depends on a unique id for each of the input types.
When you use a radio button element in Lotus Notes, there is no way of defining a unique id for each of the options.
The only way I can see in applying this <label> tag is by having a hidden computed text field evaluating to itself and then below it a computed text field that provides the html for the radio button or checkboxes.
The computed text field looks for a value in the hidden field and, if there is one, creates the html with the checked value for the appropriate input tag.
Do you know another way of integrating the label tag into radio and checkbox elements in Lotus Notes natively?
Reply
Re: Labels difficult to integrate into Domino
And I thought I was was the only one trwling thru this old stuff! ;-)
Reply
Re: Labels difficult to integrate into Domino
The only way I know is to do as you say and use computed text/field values.
Reply