| home / scripts / sidebar |    [previous] [next] |
|
|
|
Here's a look at the resulting XHTML we use in our sidebar tab, minus the main JavaScript function that will rotate our links (which we will discuss on the next page). Note that our actual production feed will look somewhat different than this display; for two reasons. First, we removed many of the unnecessary spaces and line breaks in our production feed, in order to make the overall downloaded page as tight as possible. Second, the production feed is a work constantly in progress. When a user adds your tab to their sidebar, it's like subscribing to a specific page on your site. Our multi-feed tab script combined with our RSS files do a great job of automatically providing updated information to the user's sidebar; but there's no rule that says we can't occasionally provide them with a new look or different information. Additionally, as we'll discover later, each feed can potentially have its own specific HTML layout. For purposes of our discussion, and to make sure we're all on the same page (pun intended), the download version matches the version discussed here, and is expanded and indented for clarity.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>internet.com Multi-Feed SideBar Tab</title>
<meta http-equiv="Content-type" content='text/html; charset="UTF-8"' />
<meta http-equiv="Refresh" content="1800; URL=http://webreference.com/cgi-bin/feedtab.cgi?feed=webreference.rdf" />
<style type="text/css">
a {text-decoration:none}
a:hover {background:#fd3}
body {margin:4px;font-family:Geneva,Arial,sans-serif;min-width:125px;background:#fff}
div {background:#fc0;margin-right:5px;margin-left:5px;text-align:center}
.b {font-weight:bold;font-size:0.9em}
.nb{border:0}
#inner {background:#ffed9a;padding:5px;text-align:left}
#inner p {margin:0px;font-size:8px;} #inner a {font-size:0.8em}
.tf, .tf p {margin:0}
.tf input, .smf {font-size:0.7em;font-weight:bold}
</style>
<script type="text/javascript">
...main javascript functions here...
</script>
</head>
<body>
<div id="outer">
<a class="b" target="_content" href="http://www.webreference.com">WebReference Features</a><br />
<a id="plink" class="smf" href="http://webreference.com/cgi-bin/feedtab.cgi?feed=webreference.rdf;start=13"><<</a> <a id="nlink" class="smf" href="http://webreference.com/cgi-bin/feedtab.cgi?feed=webreference.rdf;start=2">>></a>
<div id="inner"><a target="_content" href="http://www.webreference.com/programming/java/webservices/">Book Excerpt: Professional Java Web Services</a><p> </p><a target="_content" href="http://www.webreference.com/xml/column56/">Google SVG Search, Part II</a></div>
<form target="_content" class="tf" method="post" action="http://www.webreference.com/cgi-bin/search.cgi">
<p><input type="text" name="query" size="12" /><br />
<input type="submit" value="Search" /></p></form>
<a class="smf" href="http://webreference.com/cgi-bin/feedtab.cgi">more feeds...</a>
</div>
<script type="text/javascript">
if (document.createTextNode) onload=init;
</script>
</body>
</html>There are actually two different HTML layouts presented to the user: one that displays the master listing of feeds that are available, and the second that displays the contents of a specific feed. It is the second layout that we are viewing here. As we have implemented it, the main feed listing looks almost identical to this, with only a few minor formatting differences.
There's nothing too terribly remarkable about this layout; we use CSS to format the colors and font settings for the tab. (Recall that this will be displayed in a very small space--you will typically require smaller font settings, but be careful they aren't so small as to be unreadable. In our own testing, using em widths proved to present the most consistent font size between various browser platforms, while still using the user's default font size as a base.) We did end up applying a minimum width of 125px to the body of our document, primarily to prevent the backgrounds from contracting out from in under the text; still allowing for a very condensed display while preserving the look and feel of our design.
Notice the links within this example; and especially the target attribute of _content.
When displayed in the sidebar, the browser needs a way to identify where you want selected links
displayed. Like any other HTML page, the default is to display links within the current window--which
in this case would be the sidebar itself. Any links that you want to display in the main browser window
and not the sidebar should use the target="_content" attribute. Unfortunately for our
design, this means that we can't validate as XHTML strict; since it does not include the
target attribute on anchor tags. We can, however, still validate the code as XHTML
transitional, so we'll identify our document with that designation.
An additional consideration specifically for sidebar tabs is the meta refresh tag, which
tells the browser to refresh this document every 1800 seconds (half an hour). Not all browsers support
meta refresh, but most do (especially later browsers) and this will allow the feed to be
updated throughout the day with our new content without requiring the user to specifically reload
the tab. The tab is automatically reloaded whenever the user switches away from, and then comes back
to it, however, so even without this chances are good the user will see your most recent information.
In any event, do not set the meta refresh to a ridiculously short value. As a
sidebar tab, you're a secondary attraction, and not the main feature--remember?
At the outset, I mentioned that this is the way we have implemented the sidebar tab. As you will learn later, our multi-feed script uses HTML templates to present the resulting page to the user; hence, you can define your templates to look exactly the way you want to. Use XHTML, do not use XHTML; design for all browsers, design for v4.836 of your own home-grown browser. The choices are yours, and you can even use the script to present a page not targeted to the Netscape 6/Mozilla sidebar.
We'll discuss the HTML templates a little later; but first, let's address the JavaScript function that we left out of the example above.
| home / scripts / sidebar | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: May 17, 2002
Revised: May 17, 2002
URL: http://webreference.com/scripts/sidebar/2.html
