Seal Guard Systems pondering ColdFusion

I've started working with a new client over the past couple of weeks. Ken Wolfbauer and Kathi Wolfbauer of Seal Guard Systems who approached me to help with their HTML and SEO. We have been working together in their great showroom in Blaine, MN. I've suggested that they move their site under ColdFusion. I'm looking forward to working with Ken and Kathi to promote their products and services on the Internet, including Milgard fiberglass windows and Metro steel roofing. Hopefully I'll convince Kathi to start using ColdFusion so we can take their website to the next level.

Creating an HTML fieldset

The following HTML will put a solid border around a block of text, with a bolded label. This code snippet is a nice option for highlighting a section of content on a web page.

<fieldset style="border-color:#FF0000;">
<legend><strong>Amazon Web Services evangelist coming Apr 29</strong></legend>
TCCFUG is proud to be hosting Mike Culver from Amazon.com. Mike will present Amazon Web Services: Web-Scale Computing and What's possible in a post Web 2.0 world. <a href="http://upcoming.yahoo.com/event/396951/">Get the full details</a>.
</fieldset>

Here is what it looks like when rendered...

Amazon Web Services evangelist coming Apr 29 TCCFUG is proud to be hosting Mike Culver from Amazon.com. Mike will present Amazon Web Services: Web-Scale Computing and What's possible in a post Web 2.0 world. Get the full details.

Creating a favicon.ico file

I use the PNG 2 ICO (png2ico) command-line utility found here to convert a 32x32 png file to an ico file. Matthias, who authored the software utility, also wrote up a nice explanation of the "Favorites Icon" file and it's usage in most common browsers. I think it's a definate MUST for all websites to take the time to incorporate a favicon.ico file into their site.

Secret to showing/hiding HTML table rows

Today I learned about showing/hiding content on a page. All that is needed is wrap the content in a div tag, and use the following javascript to toggle its display.

document.getElementById('stufftohide').style.display = 'block' <!-- shows it -->
document.getElementById('stufftohide').style.display = 'none' <!-- hides it -->

<div id="stufftohide">
here is my content to show and hide
</div>

However, this technique doesn't work when trying to toggle HTML table rows. I did some digging and found a few blogs that explained the secret. Wrap the rows you want to show/hide inside a tag group, and use "table-row-group" in place of "block" to show the rows. Here is a code snippet that works.

<input type="Button" value="Show" onclick="javascript: document.getElementById('stufftohide').style.display = 'table-row-group';">
<input type="Button" value="Hide" onclick="javascript: document.getElementById('stufftohide').style.display = 'none';"><br />
<table border="1">
<tr>
<td>row 1, cell A</td>
<td>row 1, cell B</td>
</tr>
<tbody id="stufftohide">
<tr>
<td>row 2, cell C</td>
<td>row 2, cell D</td>
</tr>
<tr>
<td>row 3, cell E</td>
<td>row 3, cell F</td>
</tr>
</tbody>
</table>

Here is a demo of this in action.

BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner