Monthly Archives: February 2007

Javascript Triggers using <a>

For several recent projects, I’ve seen increased requests for a hidden div of content to be revealed when someone clicks a link.

For example, in Basecamp, if you want to write a message, you can just start typing in the textarea. Alternatively, if you want your text to have some formatting, a formatting guide will appear if you click a certain link.

Clicking the link triggers a javascript function that reveals the formatting guide.

A link toggler to trigger a hidden div is a very common approach for the show/hide effect. An <a> tag will have an href of “#” and an onclick event handles the toggling of an action, such as displaying a previously hidden div that, by default, was set to style=”display:none;”.

The largest advantage of the trigger text being a link is that users know that links are clickable, like tabs and buttons. If that trigger is to exist within the flow of paragraph text, then links (as opposed to tabs or buttons) is the way to go.

I’ve begun to question whether this trigger should be a link at all (meaning using the <a> tag) rather than <span>, and I was curious if anyone else has questioned this as well. I considered the thought, “Shouldn’t links always be used to take the user somewhere?” Coincidentally, 37signals, who makes Basecamp, had a post about the show/hide links, in which they mention the “different breed of hyperlink—the ‘do something’ link, rather than the ‘go somewhere’ link.”

If the user isn’t going to be taken anywhere, is using the <a> element the best tag to use? Instead of continuing the “different breed” of hyperlink, use the <span> element instead, styled to look like a link.

HTML

<p>
  Check the
    <span class="actionlink" onclick="toggle('specialstuff')">
      formatting guide
    </span>
  ...
</p>

CSS

span.actionlink {
  color:#039;
  text-decoration:underline;
  cursor:pointer;
}
// and for browsers that support hover, the following:
span.actionlink:hover {
  text-decoration:none;
}

In this manner, a span of text can be the trigger, still look clickable to the end user, and there is no need to use <a> for text that doesn’t really take the user anywhere.

Then again…

In thinking this through, another approach dawned on me that is even more standards-friendly.

If you are an accessibility zealot, you’ve probably already noticed something that should be different in the above examples: no div should have style=”display:none;” declared in the markup. If javascript were not enabled in a user’s browser, the user would not have the option to trigger an event to change that style to display:block. That div may have helpful content, but it wouldn’t be accessible – it’d be in a state of purgatory, like being buried alive, forever ignored. If that div were a character in Law and Order, it would be the neglected teen that committed the murder because he was starved for attention from Daddy, but Mommy doesn’t want to look like a bad mom so she insists that she, not her son, did the crime.

Instead, the div could just have an id, and javascript could be used to set that div with display:none; on page load.

For instance, instead of this…

<div style="display:none;" id="specialstuff">
...
</div>

Use this…

<div id="specialstuff">
...
</div>

and a style for #specialstuff to have display:none could be set via javaascript.

Then, in our original trigger link, instead of having a throw-away href…

<p>
  Check the
    <a href="#" onclick="toggle('specialstuff')">
      formatting guide
    </a>
  ...
</p>

Put in something actually useful – a link to the anchored element – making our link an actual “go somewhere” link in addition to a “do something” link.

 onclick="toggle('specialstuff')">
      formatting guide
    </a>
  ...
</p>

The idea being, if javascript were disabled, the trigger element still has value in that clicking it will take the user to the desired div. If javascript is enabled, the script could ignore the href and just trigger the show/hide behavior.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Daniel said:
This is great and I’m glad you took the time to consider users who do not have javascript enabled. In response to what William said:
I personally always like to have something in the href, even just a hash symbol. To avoid being returned to the top of the page after clicking the link w/ href = “#” (and since the user is only clicking the link to trigger some javascript we can assume that they have javascript enabled) you need to pass the event into the function you trigger as a parameter and in the function called disable the events default behavior.
ex:
<a href = “#” onclick= “foo(event);”>HI</a>
function foo(ev){
ev.preventDefault();
//do other stuff
}
I hope that helps someone as much as it has helped me.

PIMMY asks the CSS Guy if a background image can be used as a hyperlink

PIMMY writes:

Can you hyperlink a background image set inside stylesheet? Or can we set hyperlink location inside style sheet?

No, you cannot hyperlink a CSS background image.

Anything you would want to hyperlink, I would suggest be part of the content rather than the presentation. Perhaps an <img> tag in the mark-up would be a better way to present that particular image.

That said, let’s answer the second question. Yes, you can set a hyperlink location. You can position it in such a way (which is what I assume PIMMY is asking about) so that it appears as if the background image were the hyperlink. Here’s how.

Getting Started

Start with some html. Here’s some:

<p id="sunny">
  I can see clearly now, the rain is gone,<br />
  I can see all obstacles in my way<br />
  Gone are the dark clouds that had me blind<br />
  It's gonna be a bright, bright sunshiny day.
</p>

Give it some style:

p#sunny {
  font:normal 1.2em/1.4em georgia, serif;
  border:4px solid #888;
  background: #fff url(sunny.gif) no-repeat 450px center;
  padding:18px;
  margin:20px 0;
  color:#800000;
}

Now we have a nice starting point – a single paragraph with a background image. View what this looks like.

Insert the Link

Now I’m going to add a link within the paragraph that leads to weather.com.

<p id="sunny">
  I can see clearly now, the rain is gone,<br />
  I can see all obstacles in my way<br />
  Gone are the dark clouds that had me blind<br />
  It's gonna be a bright, bright sunshiny day.
  <a id="linky" href="http://www.weather.com"></a>
</p>

In order for the link to appear like it’s the background image, I need to style it accordingly. First, I’ll add position:relative; to the sunny paragraph.

p#sunny {
  position:relative;
  font:normal 1.2em/1.4em georgia, serif;
  border:4px solid #888;
  background: #fff url(sunny.gif) no-repeat 450px center;
  padding:18px;
  margin:20px 0;
  color:#800000;
}

Next, I’ll style the anchor link that I’ve just inserted with the id of linky. I want it to have the same dimensions as the sunny background image, which is 100px by 100px. Also, I’ll use position:absolute; to place the hyperlink tag directly over the background image.

p#sunny a#linky {
  display:block;
  width:100px;
  height:100px;
  position:absolute;
  top:20px;
  left:450px;
}

Now see the paragraph again, and note that when you hover the mouse over the sun, the mouse indicates a hyperlink that leads to weather.com.

Again, this has “don’t do this” written all over it. Any image you would want to turn into a hyperlink should be in the html, not a CSS background image. Not to mention that if you resize the text, suddenly the alignment is out of whack. But there may be instances where faking it is preferred, so if you ever do this, please do so with the understanding of how easily it can break, and code accordingly.

Jason asks the CSS Guy if Dan Cederholm’s navigation is really “bulletproof”

Jason B. writes:

In Dan Cederholm’s book Bulletproof Web Design, chapter 2 gives a method for creating a horizontal nav system much like you see on his simplebits.com site. I’ve determined that the example he gives has a flaw (I think). It seems to create a quirk in the page that allows you to slide slightly to the right. So if all my divs are set to widths of 100% in a fluid layout, the nav ul expands to what looks like 110% width throwing the page all out of whack.

Even when I downloaded his example files from the book, the issue existed in those files too.

I’ve already responded to Jason via email, and I believe he’s got everything working ok, but I thought it might be helpful to post what Jason was seeing, and how to accomodate for it.

I downloaded the sample code that Cederholm provides on his web page and looked at Chapter 2 navigation example. In IE6, IE7, FF2 Mac, FF2 Win, and Safari, a horizontal scrollbar appears:

Bulletproof Navigation
Bulletproof Navigation

The scrollbar stays no matter how wide or narrow any of the above browsers are expanded. When scrolled, it’s just more of the red stripe. I asked Jason for clarification on the issue he was having, and he confirmed that was the same problem on his site.

The HTML, when simplified, looks like this:

<ul id="nav">
   <li><a href="/">Intr</a></li>
   <li><a href="/">About</a></li>
   <li><a href="/">News</a></li>
   <li><a href="/">Sponsors</a></li>
</ul>

The CSS for the ul looks like this:

#nav {
   float: left;
   width: 100%;
   margin: 0;
   padding: 10px 0 0 46px;
   list-style: none;
   background: red url(img/nav_bg.gif) repeat-x bottom left;
}

Adding float:left; to the ul#nav allows the ul to completely contain the floated <li> tags within it. width:100%; forces the <ul> to be as wide as the containing parent (in this case, the entire body).

The problem becomes apparent once padding is assigned to the left of ul#nav. padding: 10px 0 0 46px; means that the left side of the ul#nav now has 46 pixels of padding. When the above browsers render the <ul>, they don’t factor in the side padding for the width:100%, so once padding is applied, it appears as if the <ul> is wider than 100%.

What happens when we increase the left padding from 100px to 46px?

Bulletproof Navigation
Bulletproof Navigation

The tabs (or floated <li> tags), are pushed further from the left, and the scrollbar indicates a slightly wider window.

What happens when we decrease the left padding to from 46px to 0px?

Bulletproof navigation
Bulletproof navigation

The tabs are flush against the left, but no scrollbar.

We don’t want our tabs to be flush left, we want them to be 46 pixels from the left edge. There’s more than one way to do this. I’m going to discuss just one of them.

Leave ul#nav with no left/right padding, but add some left margin to the first list item.

#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;
	background: red url(img/nav_bg.gif) repeat-x bottom left;
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	font-size: 55%;
	}
#nav li:first-child {
	margin-left: 46px;
	}

Unfortunately, IE6 does not support the :first-child pseudo-class. If you don’t care, you may choose not to accommodate IE6. Personally, I feel it’s too early to ignore IE6. So I would suggest adding a class of “firstitem” or something like that to the first <li> tag in the list. Then style the CSS appropriately.

#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;
	background: red url(img/nav_bg.gif) repeat-x bottom left;
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	font-size: 55%;
	}
#nav li.firstchild {
	margin-left: 46px;
	}

Here’s the result:

Bulletproof navigation
Bulletproof navigation

Looks much like the first screenshot, right? In all browsers, yes, except in IE6. Here’s what it looks like there:

Bulletproof navigation
Bulletproof navigation

In IE6, another bug comes into play – the IE Double Float-Margin Bug. Basically, our 46px margin is interpreted as 92px in IE6.

To accomodate for that, you could use conditional comments to serve IE6 an addendum stylesheet. Chances are, you will come across other display inconsistencies with IE6, and the IE6-only sheet will be worth it’s weight in Google stock. In the new sheet, tell IE6 that the margin for li.firstitem is only 23px (half of 46px), and IE6 will display it as 46px.

// this code would be in an IE6-only style sheet
#nav li.firstchild {
	margin-left: 23px;
	}

Done. Finally.

After all that, you might see why Cederholm chose not address this in Chapter 2 of his book. If I were just starting to toy with the idea of using CSS for layout, and had to read about all this hackery, (and keep in mind, I’m still in Chapter 2!), I’d put the book down and learn Flash instead. Cederholm wanted to show how flexible CSS menus can be – how they can be resized and still keep their aesthetic and functional integrity. He achieved it. His menus are, as he defines the word, bulletproof.

As I’m sure Cederholm is aware, there is plenty of time for working through implementation hurdles after the reader is sold on the concepts.

The Details are in the Symbol Fonts

It’s easy to get caught up in positioning divs, spans, and list items. After you’ve figure out that three-column layout and cleared your floats, it feels good to give yourself a pat on the back and call it day.

But just because the page has a style sheet, does that mean the page has style? What about the details? Many times design details aren’t priority to a coder. However, a custom bullet or special background-image treatment to headlines can be that detail that makes a site unique and noteworthy. Also, it’s pretty easy to do. I’m going to show some examples of details, then show how to do similar things with just symbol fonts.

When Jeffrey Zeldman redesigned his site a couple of years ago (to the greeniness that it is today) he placed a little flower next the date of his entries:

zeldman.com
zeldman.com

It’s a background-image, so there’s no extra mark-up. It’s not necessary, but it’s a nice touch, and it is one of the several unique design elements of zeldman.com.

I also noticed that Greg Storey (airbagindustries.com) prefaces his post headers with an image of an anchor.

airbag industries

Again, it’s not necessary, but it’s part of what makes airbagindustries.com that much more elegant.

Some coders don’t care to open up Illustrator, or don’t know how to use it, to make such design elements. The good news is adding details can sometimes be as easy as using symbol font. Here’s how:

Open up Photoshop (or whatever image editor you have that lets you save transparent .gif files). Use your type tool to type every key on your keyboard onto an empty canvas (be sure to include characters with the shift key as well). In the end, you might end up with something like the following. Here’s what I have in Arial:

Arial
Arial

Now, with your type selected, start cycling through your fonts until to you come to one with symbols. Here I’ve stopped at Wingdings 2.

Wingdings 2
Wingdings 2

Lots of little curly-cues in there, pointing hands, and icons and whatnot. Those could easily be used to add some tag-nicety.

Just choose one of those characters, crop it out, and save it with a transparent background. I’ve done so here with the uppercase “V”.

V
V

Next, attach it as a background-image in your CSS for some tag.

Don’t eat yellow snow!

How effective is that! Below is the html with inline styles. Mainly, you just want to make sure you pad the left side with enough space for the image to show:

<p style="
   background:transparent url(070208_uppercaseV.gif) no-repeat center left;
   padding:14px 0 10px 30px;
   font:normal 16px/16px arial;">
Don't eat yellow snow!</p>

In anticipation of Jeremy Keith’s new book, I checked out bulletproofajax.com, and I noticed something interesting in the pullquote:

bulletproofajax.com
bulletproofajax.com

It’s an excellent touch of class to an already classy blockquote. Nice decoration, right? It’s the lowercase “c” and “d” from Wingdings 2. See how it compares to the third and fourth character from the screenshot above of all the Wingdings 2 characters:

bulletproofajax.com
bulletproofajax.com comparison

A couple of years ago, I was adding an update to a photographer friend’s web site, and realized that his headers lacked some distinction. I decided to include the Wingdings 2 lowercase “h” as a background image for headers:

jayadkinsimages.com
jayadkinsimages.com

Also shown in the above image is the circle/arrow to the right of the word “brides”. I create those all the time by drawing a circle, then placing a lowercase “u” in using Wingdings 3 as the right-pointing triangle. (Those make good list-item bullets.)

Creating images from a symbol font can be simple. Also, because it’s a font, it can be resized without losing quality, just like vector graphics in that other Adobe application that a coder doesn’t care to open. Different sizes are just a font size away. Also, many systems are already equipped with some kind symbol font, if not a variety of them, so there’s no need to purchase anything.

I appreciate those designers who create design elements from scratch, tailored to their site. I should hope that this wouldn’t be a replacement for such creativity and talent. But for many sites, it isn’t necessary to reinvent the wheel, and making use what one already has access to in a unique ways can be an artform in itself.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Greg said:
Adobe Photoshop has a nice collection of shapes and you’ll find even more shapes/brushes that work in almost all popular graphics programs. And try to look past the Symbols and look for dingbats. They are a syle of typeface that is comprised of all symbols, usually pertaining to a theme.

Scrolling boxes of terms: textarea vs div

I used to work for a bank, where checking a box to agree to a mile-long scrolling box of terms that go unread are a staple to all web forms. We used to put all those in a <textarea> tag, but eventually moved to putting them in a <div>, which still allows for the scrolling, but has the added benefit of being able to be styled as any other section of a web page. I still see many forms that use <textarea>, so I thought I’d show how to use the <div> method instead.

First, the textarea

Here’s how the terms are normally listed:

<textarea
   rows="50"
   cols="20"
   readonly="readonly">
You do hereby acknowledge that...
</textarea>

An aside, I learned about the readonly attribute a little too late, as one customer told our service department that he could modify the terms (including pricing and fees) to be any way he wished before hitting submit. Not that he really believed that, but at least if we had used readonly we wouldn’t have had any potential for customers getting the wrong idea.

So back to the matter at hand: scrolling boxes of legalese. Nobody I know ever reads those things, but they should at least be easy to scan. In a textarea, it’s all the same formatted text. The only option for emphasis is to use all caps, and dashes or asterisks to designate list items.

It would be nice to be able to add <strong> and <em> tags throughout the document, and even make use of list items, headers, etc. This would at least allow customers to scan the form and look for items of interest. Styled <div> tags are perfect for this.

Divs

Divs can be styled to scroll just like textareas. Take the following html:

<div class="terms">
You do hereby acknowledge that...
</div>

Then style this div so that it scrolls:

div.terms {
   width:600px;
   height:200px;
   border:1px solid #ccc;
   background:#f2f2f2;
   padding:6px;
   overflow:auto;
}
div.terms p,
div.terms li {font:normal 11px/15px arial;color:#333;}
div.terms h3 {font:bold 14px/19px arial;color:#000;}
div.terms h4 {font:bold 12px/17px arial;color:#000;}
div.terms strong {color:#000;}

Now the Terms can be scanned much more easily with the use of extra markup.

View the example to see the comparison.