Styling a Top Bar

Digg Bar launched with some controversy recently. It’s iframe trapping all over again; sites like About didn’t make themselves too popular with this technique, and so it died down until recently. I think there are legitimate uses for the top bar though; certainly the Digg Bar is useful to at least those people who are currently logged into Digg.

In fact, the reaction in the past few months suggests that top bars are here to stay. There was an initial uproar, but it seems to have been accepted, and I think top bars will start to become a fixture of the web. Given the valuable tracking data that comes from it, I can imagine dominance of the top 40 pixels of the browser window will become a big deal too…and right now, the big GYM guys (Google/Yahoo/Microsoft) aren’t doing it. Through development or acquisition, IMO that will change.

Users always trade off privacy against utility, and what can be an uproar about privacy concerns and google juice theft quickly dies down when people find value in a new feature. In this case, companies like Digg and StumbleUpon aren’t producing top bars as part of a cynical get-rich-scheme; I believe competition is too fierce to resort to cheap tricks that will get users off-side. Instead, I believe they are genuinely aiming to win, adding awesome features to improve user experience first and foremost. The Google Juice and tracking data that comes with it is a gigantic dollop of icing on the cake and top bars therefore constitute another example of having your cake and eating it too.

But this article is about web design, not web trends. An application of top bars I’ve been looking at recently is a “trails player” I’ve been building into Scrumptious lately. User creates a trail of websites for someone to visit, and each of them shows up in a trail bar at the top of the page.

To style this, I made like the web greats and peeked under the covers at a bunch of similar websites:

I’ve made a dead-simple bar to illustrate the concept.

View the top bar here.

The canonical layout works like this:

  1. <head>
  2.     <link href="layout.css" rel="stylesheet" type="text/css" />
  3.   </head>
  4.   <style>
  5.     body { overflow: hidden; }
  6.     iframe, div, body { margin: 0; padding: 0; }
  7.     #bar { position: absolute; top: 0; left: 0; width: 100%; height: 50px;
  8.               z-index: 100;
  9.               background: #ddf; border-bottom: 1px solid #888; }
  10.     #content { padding: 5px; }
  11.     iframe { margin-top: 50px; width: 100%; height: 100%; }
  12.   </style
  13.  <body>
  14.     <div id="bar">
  15.       <div id="content">I am bar.</div>
  16.     </div>
  17.     <iframe src="http://yahoo.com"></iframe>
  18.   </body>
  19. </html>

So the bar is absolute-positioned in the top-left, with width: 100% to span the entire width, and height set to whatever height you want for the bar. Make the iframe top margin match that height, and you’re set.

Note that the bar shouldn’t have any padding, otherwise it will add to the 100% width (padding isn’t included in the width under standard CSS box model) . So if you want padding, put it inside an inner div, like #content above.

An interesting thing is that you can set the iframe’s source, but you can’t actually detect it, because of cross-domain security, under modern browsers. Which is unfortunate. The user might start clicking around inside the iframe, after you have set its initial source URL, and you won’t actually know where they are at. Good for the user’s privacy, but bad if you want to provide certain awesome features. e.g. Digg would probably like to show the number of Diggs on any page users click over to, and StumbleUpon would like to show votes as well as related pages. In Scrumptious, I’d like to provide a “trails recorder” that automatically scoops up pages you visit into a trail…but I’ll have to achieve that with a browser extension.

And in all these cases, you probably want a “close bar” feature that would ideally work by setting document location to the iframe’s source. ie you want something like document.location.href=$("iframe").attr("src");. But that fails because the right-hand side is null. The best you can do is set document.location.href to the last URL you pointed the iframe at.

6 thoughts on Styling a Top Bar

  1. Thank’s for this article. I was looking for a good rundown of the top bars currently around, i.e. what added value they offer to users and how they lay out the functionality on the bar, and your article got me up to speed nicely!

  2. Thanks for article Michael. I read the article and noticed this topbar has a similar problem I’m experiencing with a project I’ve been working on.

    When clicking on the bar and hitting page-down the topbar “disappears”. And I’m guessing a related artifact of this is that the iframe does not show the last bit of the content. As an example I put a bing search in the iframe.

    Another artifact I experienced sometimes is that the appearance of the text (font size?) in the topbar changes according to the iframe’s content. Can that be avoided?

    Thanks for the help, Uri

  3. Thanks for the super helpful article :)!

    I noticed one small detail. When clicking on the bar and hitting page down the topbar “disappears”. And I’m guessing a related artifact of this is that the iframe does not show the last bit of the content. As an example I put a bing search in the iframe.

    Again thanks for the great content, Uri

  4. Hi Uri,

    Sorry for the delay getting back. I can’t imagine what’s causing the topbar to disappear. Which browser does this happen with? I could imagine if the topbar content is too big and not overflow:hidden, hitting pagedown, while it has focus, would scroll it down.

    I didn’t do enough IE6 testing and it’s maybe the absolute-positioning bug you’re seeing, in which case fix might be here http://it.toolbox.com/blogs/css-asylum/the-ie6-absolute-positioning-bug-15285.

    Font change does seem odd, given that the iframe’s content can’t be seen.

    Sorry I couldn’t be more help – would be good if there’s a copy online somewhere, with browser edition.

  5. Is anyone else having the issue with not being able to scroll the yahoo page all the way to the bottom? It is happening to me on my “demo” on my site also. The height of the “bar” is 150px, and I can’t scroll down to see the last 150px of the iframe page.

Leave a Reply