<html>
<head>
<title>Div Content Switch v3</title>
<style type="text/css">
body {
margin: 0px;
padding: 10px;
font: 14px Calibri;
color: #fff;
background: #333;
}
h1, h2, h3 {
margin: 5px 0px;
}
a {
color: #fff;
text-decoration: underline;
}
a:hover {
color: #8f8;
cursor: pointer;
}
div {
width: 300px;
padding: 5px;
margin: 20px 0px;
background: #555;
text-align: justify;
}
#Content-Display {
width: 350px;
height: 300px;
color: #333;
background: #eee;
margin: 0px 0px;
overflow: auto;
border-width: 5px;
border-color: #eee;
border-style: solid;
}
span.tab:hover {
color: #333;
background: #eee;
}
#Tab-Holder {
width: auto;
height: auto;
background: transparent;
margin: 0px 0px;
padding: 0px 0px;
}
.tab {
cursor: pointer;
margin: 0px 2px;
background: #666;
padding: 0px 3px;
}
.tab-active {
color: #333;
background: #eee;
margin: 0px 3px;
padding: 5px 8px;
}
.hidden {
display: none;
}
.footer {
padding: 1px;
margin: 0px;
position: absolute;
bottom: 20px;
background: #333;
}
</style>
<script type="text/javascript">
var contentDisplay = "Content-Display";
var tabHolder = "Tab-Holder";
var contentPrefix = "Content-";
var tabPrefix = "Tab-";
var tabClass = "tab";
var tabActiveClass = "tab-active";
var tabHtml = "<span class='tab' id='Tab-%ContentID%' onclick='ShowContent(\"%ContentID%\")'>%ContentName%</span>";
// Register the content IDs
var Contents = [
"TimeMachine",
"Mail",
"iChat",
"Spaces",
"Spotlight" ];
// Register the content names (for display on tabs)
var ContentNames = [
"Time Machine",
"Mail",
"iChat",
"Spaces",
"Spotlight" ];
function ShowContent(contentID){
// display the content from the div
document.getElementById(contentDisplay).innerHTML =
document.getElementById(contentPrefix+contentID).innerHTML;
// reset the tabs class
for (var i in Contents){
var t = Contents[i];
document.getElementById(tabPrefix+t).className = tabClass;
}
// set active tab class
document.getElementById(tabPrefix+contentID).className = tabActiveClass;
}
function BuildTabBar(){
var tabsHtml = "";
for (var i in Contents){
var id = Contents[i];
var name = ContentNames[i];
var s = tabHtml;
s = s.replace("%ContentID%", id);
s = s.replace("%ContentID%", id);
s = s.replace("%ContentName%", name);
tabsHtml += s;
}
document.getElementById(tabHolder).innerHTML = tabsHtml;
// Display the first tab
ShowContent(Contents[0]);
}
</script>
</head>
<body id="body" onload="BuildTabBar()">
<h1 id="title1">Div Content Switch v3</h1>
What's new in Mac OS X Leopard?
<br /><br />
<div id="Tab-Holder">
[ Tab Bar ]
</div>
<div id="Content-Display">
[ Content Display ]
</div>
<!-- Contents for display -->
<div id="Content-TimeMachine" class="hidden">
<h3>Time Machine</h3>
Right from the start, Time Machine in Mac OS X Leopard makes a complete backup of all the files on your system. That includes your system files, applications, accounts, preferences, music, photos, movies, documents — everything you keep on your Mac. As you make changes, Time Machine only backs up what changes, all the while maintaining a comprehensive layout of your system. That way, Time Machine minimizes the space required on your backup device. Since backups are stored on your device by date, you can browse through your entire system as it appeared on any date. And that’s what makes Time Machine different from any backup application you’ve ever tried.
</div>
<div id="Content-Mail" class="hidden">
<h3>Mail</h3>
Mail for Leopard features more than 30 professionally designed stationery templates that make a virtual keepsake out of every email you send. From invitations to birthday greetings to travelogues, each stationery template features coordinated layouts, fonts, and colors — everything’s designed to keep your mind on the message. You can even effortlessly add pictures to your email via a new Media Browser. Just find the perfect photo and drag it onto your template. Hit “Send” and get ready for some astonished replies from everyone — even folks on PCs.
</div>
<div id="Content-iChat" class="hidden">
<h3>iChat</h3>
Filled with fun new features, iChat turns any mere video chat into an event. Video backdrops, Photo Booth effects, photo slideshows, Keynote presentations, or an entire Mac desktop — you can share it all with iChat in Mac OS X Leopard.
</div>
<div id="Content-Spaces" class="hidden">
<h3>Spaces</h3>
Create a Space for work. Create a space for play. With the click of a function key, you can drag all your application windows onto different Spaces. Keep all your work projects in one Space and that fun flick you made in iMovie in another. Create a communication Space for iChat and Mail. Organize your Spaces however you want just by dragging windows into them. You can even rearrange your Spaces with drag-and-drop ease — shift a Space and every window in it comes along for the ride.
</div>
<div id="Content-Spotlight" class="hidden">
<h3>Spotlight</h3>
With Mac OS X Leopard, the search that finds anything on your Mac will find anything on all your Macs. Use Spotlight to search beyond your desktop across network-mounted folders on other Macs. Combine that with improved performance and the convenience of a Quick Look preview, and Spotlight for Leopard is one maximum-strength search.
<h3>Search party</h3>
More haystacks? No problem. Spotlight for Leopard finds what you’re looking for on other Macs, including servers running Mac OS X Leopard Server. Just set up your remote Macs for file sharing and Spotlight includes results from those machines in your search. That’s one-stop searching on any Leopard machine with access to your network.
<h3>Quick on the draw</h3>
Sometimes you just don’t want to wait. That’s why Leopard introduces Quick Look, a new way to preview a document, picture, or slideshow in a single click, without opening an application. Select a search result and Quick Look displays the result — an iPhoto snapshot, a PDF, an Address Book contact — in a graphic overlay. Quick Look even plays your QuickTime movies, right in the preview window.
</div>
<!-- End of contents -->
<div class="footer">
copyright (c) 2007 bit dojo labs
</div>
</body>
</html>