<script language="javascript" type="text/javascript">
function toggleDivOL( elemID )
{ var elem = document.getElementById( elemID );
if( elem.style.display != 'none' )
{ elem.style.display = 'none';
}
else
{ elem.style.display = 'block';
}
}
</script>
you can call this function like this
onclick=toggleDivOL('elemID')
replace elemID with the id you want to toggle the visibility
Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.
The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
here is the cssCode:
Sound mySound = new Sound();
mySound.loadSound("my.mp3", true); //stream it
onEnterFrame = function()
{
bTotal = mySound.getBytesTotal();
bLoaded = getBytesLoaded();
if (bLoaded >= bTotal)
delete onEnterFrame;
// do the animation here, based on the percentage represented by bLoaded
}
Sound.loadSound
Availability
Flash Player 6.
Usage
mySound.loadSound(" url ", isStreaming )
Parameters
url - The location on a server of an MP3 sound file.
isStreaming - A Boolean value that indicates whether the sound is a streaming or event sound.
Returns
Nothing.
Description
Method; loads an MP3 file into an instance of the Sound object. You can use the isSteaming parameter to indicate whether the sound is an event or a streaming sound.
Event sounds are completely loaded before they play. They are managed by the ActionScript Sound object and respond to all methods and properties of this object.
Streaming sounds play while they are downloading. Playback begins when sufficient data has been received to start the decompressor.
All MP3s (event or streaming) loaded with the Sound.loadSound method are saved in the browser's file cache on the user's system.
Example
The following example loads an event sound:
s.loadSound( "http://serverpath:port/mp3filename", false);
The following example loads a streaming sound:
s.loadSound( "http://serverpath:port/mp3filename", true);
Although this is the third iteration of Adobes Creative Suite, for many of us, this is the first true test of the acquisition of Macromedia by Adobe a year and half ago. And based on what we have had a chance to see, it appears the first thing on the agenda was integration. Read our first review here. 
ght with custom designed panels that give you full control over importing layers, assigning instance names and even allowing for individual compression controls. And as an extra degree of integration, you can also copy and paste right from Illustrator into Flash.
But the integration was not unilateral. Illustrator now has the ability to have symbol names, type (movie clip or graphic), registration points and even enabling it for 9-slice scaling. And all of these options import directly into Flash as if the symbol were created there. Continuing the integration with Illustrator and Flash, users who are used to drawing in Illustrator, the premiere choice for vector-based artwork, can now find the same level of control in Flash. With the newly upgraded pen tool, users now have tighter control over image manipulation on the stage. Even the shortcut key-commands are the same for this tool. And you can not mention integration without talking about the new look and feel for user interface across most of the new CS3 applications including Flash. Not only is the new look very clean, but it also is very functional with the new iconic mode, allowing for more screen real-estate and less clutter. And after integration, Adobe went right to streamlining a lot of different workflows starting with the Actions Panel. Collapsible code chunks is nothing new to other code editors, but in this case it is slightly different in that the Actions panel does not decide where to collapse your code, you do. You simply highlight the section you want to collapse, and click on one of the triangles at either end of the highlighted section. But that is not all you can do with selected code, you can also instantly comment it out as a line-by-line comment, or as a group comment. And removing comments are just as easy.
And I didn't forget about ActionScript 3 and the new virtual machine that puts to shame the performance of all previous Flash players, but I do not think that it is any surprise to anyone. What might be a surprise is an upgrade to the export abilities of Flash. Up until now, if you wanted to create an animation, and then export it to Quicktime, you had to have everything piece of animation on the main timeline, no sub-movie clip animations or animations controlled by code. But now, you can setup sub-animations and have animations controlled with ActionScript because the export acts more like a screen record than simply exporting the frames. You can even set it to export for a certain amount of time, or when it reaches the final frame.
A few more random things about the next version of Flash:The bug is that certain form input elements whose containing box
has layout inherit the sum of the margins of all of their containing
boxes. Unlike the the well known IE
doubled float-margin bug, this one does not involve floats. There
is a workaround but, so far, no magic-bullet CSS-only
solution.
Consider this sample code:
.has-margins {
background-color: gray;
margin-left: 5em;
padding: 1em;
}
.has-layout {
background-color: tan;
width: 30em;
}
<form action="ignore">
<div class="has-margins">
<div class="has-layout">
INPUT tag, type=text:<br>
<input type="text"><br>
INPUT tag, type=checkbox:<br>
<input type="checkbox">
</div>
</div>
</form>
The outer has-margins box is gray and the full width of the page
except for a left margin of 5em. The inner has-layout box is tan,
30ems wide, and contains four lines of content: two of text and two
form elements. All four lines of content should be flush against the
left edge of the tan box.
Here is how it actually displays:
Consider another example which wraps a second has-margins box
around the inner has-layout box:
<form action="ignore">
<div class="has-margins">
<div class="has-margins">
<div class="has-layout">
INPUT tag, type=text:<br>
<input type="text"><br>
INPUT tag, type=checkbox:<br>
<input type="checkbox">
</div>
</div>
</div>
</form>
The bug seems to occur for all INPUT types except checkbox, radio,
and image as well as TEXTAREA elements but not for SELECT
elements.
The problem only seems to occur when the direct parent of the INPUT
element has hasLayout and any ancestor has margins. This leads to
several possible workarounds:
<form action="ignore">
<div class="has-margins">
<div class="has-layout">
INPUT tag, type=text, preceeded by inline text:<br>
Text: <input type="text"><br>
</div>
</div>
</form>
ul backgrounds. As you can see they perfectly match with the hover states on the individual pages. The other two rows include the other states I need for the navigation to function properly. Of course some tabs are included more than once, but this is needed because I need the entire row to display as the ul background, instead of just individual elements. The size in kilobytes is exactly the same as the previous matrix.
body {
background: #f1efe2;
}
#header {
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
}
ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}
body#welcome ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 0; }
body#products ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -66px; }
ul#nav li a {
position: absolute;
top: 0;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:22px; /* IE5/Win */
background: transparent url(nav_f_2.png) no-repeat;
}
body#welcome li#wel a
{ background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover
{ background-position: 0 0; }
body#welcome li#pro a
{ background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover
{ background-position: -94px 0px; }
body#welcome li#sup a
{ background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover
{ background-position: -178px 0; }
body#welcome li#con a
{ background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover
{ background-position: -262px 0; }
body#products li#wel a
{ background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover
{ background-position: 0 -22px; }
body#products li#pro a
{ background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover
{ background-position: -94px -22px; }
body#products li#sup a
{ background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover
{ background-position: -178px 0; }
body#products li#con a
{ background-position: -262px -88px; left: 262px; }
body#products li#con a:hover
{ background-position: -262px 0; }
body#support li#wel a
{ background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover
{ background-position: 0 -44px; }
body#support li#pro a
{ background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover
{ background-position: -94px -44px; }
body#support li#sup a
{ background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover
{ background-position: -178px -44px; }
body#support li#con a
{ background-position: -262px -88px; left: 262px; }
body#support li#con a:hover
{ background-position: -262px 0; }
body#contact li#wel a
{ background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover
{ background-position: 0 -44px; }
body#contact li#pro a
{ background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover
{ background-position: -94px 0; }
body#contact li#sup a
{ background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover
{ background-position: -178px -66px; }
body#contact li#con a
{ background-position: -262px -66px; left: 262px; }
body#contact li#con a:hove
r { background-position: -262px -66px; }
p { text-align: center; }
p a
{ color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em
{ font-style: normal; border-bottom: 1px solid #999; }
p a:hover em
{ color: #333; border-bottom: 0; }
you can see the navigation tab here
So, despite the merely mid-sized benefits, the overall cost-benefit analysis comes out quite strongly in favor of breadcrumbs. Their downside is incredibly small: while they do take up space, that space is minute. When you divide a mid-sized numerator by a tiny denominator, the resulting fraction is substantial.
The main argument against breadcrumbs is that many users overlook them. So, why do something that only benefits a minority?
As I've long argued, breadcrumbs are different than most other little-used design elements for the simple reason that they don't hurt users who ignore them.
Growing Popularity
The case against breadcrumbs is crumbling. Every year we see more people use breadcrumbs in our studies. Because breadcrumbs are not important enough for a dedicated study, I don't have an exact number for the current percentage of breadcrumb users. But it's definitely growing over time.
In testing an e-commerce site last month, for example, one user complained: "This is missing a feature to go back to the previous page."
I found this apparent request for a Back button puzzling, since the button was featured prominently in the browser and the person had easily used it earlier in the test session. Also, for six years, it's been an established guideline to avoid duplicating browser functionality in the page design.
It quickly became clear, however, that the user wasn't asking for a duplicate Back button. Elaborating on the previous complaint, she pointed to the place on the page where breadcrumbs typically appear and said she wanted the list of links to higher-level pages.
In other words, the user wanted breadcrumbs. She'd seen them before, but didn't know what they were called, so she asked for them using words that -- if taken literally -- would have been easily misinterpreted.
This is a great example of the hard-won lesson of usability: don't comply with user requests. Give more attention to what study participants do than to what they say.
Consistency Breeds Familiarity
Human behavior doesn't change much over the years. My recent book documents a few cases where Web design guidelines from the mid-1990s have changed. But mainly, usability guidelines stay the same decade after decade.
Why are people now using breadcrumbs to the extent that they actually miss them when sites don't offer them?
It's exactly because of breadcrumbs' modest nature that people are becoming accustomed to them. There aren't too many ways to mess up breadcrumbs in a design. No fancy stuff, just a line of textual links.
Breadcrumbs are almost always implemented the same way, with a horizontal line that
progresses from the highest level to the lowest, one step at a time;
starts with the homepage and ends with the current page;
has a simple text link for each level (except for the current page, because you should never have a link that does nothing); and
has a simple, one-character separator between the levels (usually ">"). This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. Consistency breeds familiarity and predictability, which breed usability. This again means that you must comply with conventions in the design of your own breadcrumbs.
Breadcrumbs are also useful for intranets: 80% of this year's award-winning intranets use breadcrumbs.
Hierarchy or History?I'm sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.
In user interface design, it's often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web's second-most-used feature.
A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn't offer much help.
Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly -- as a way to visualize the current page's location in the site's information architecture.
Breadcrumbs should show the site hierarchy, not the user's history.
For non-hierarchical sites, breadcrumbs are useful only if you can find a way to show the current page's relation to more abstract or general concepts. For example, if you allow users to winnow a large product database by specifying attributes (of relevance to users, of course), the breadcrumb trail can list the attributes that have been selected so far. A toy site might have breadcrumbs like these: Home > Girls > 5-6 years > Outdoor play (note that the links should be colored as well as underlined, but I don't do this here to avoid confusion with these dummy links).
Looking ahead, people will use breadcrumbs even more because they're an important navigation tool in Windows Vista. Most users don't distinguish clearly between the operating system, applications, and content or websites. Users will thus transfer their understanding of Vista's interaction techniques to your website.
If you don't have breadcrumbs, it's time to start planning for them. They'll improve your usability a bit now, meet increasing user expectations in the future, and -- most importantly -- they won't hurt.
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}Don't defer user testing until you have a fully implemented design. If you do, it will be impossible to fix the vast majority of the critical usability problems that the test uncovers. Many of these problems are likely to be structural, and fixing them would require major rearchitecting.
The only way to a high-quality user experience is to start user testing early in the design process and to keep testing every step of the way.