index.htnl
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panic Coda Style Navigation Tutorial at Codefidelity</title>
<script src="js/cfcoda.js" language="javascript"></script>
<style>
a:link,
a:visited {
color: #505050;
text-decoration: none;
}
a:hover,
a:active {
color: #505050;
text-decoration: underline;
}
#toolbarwrap {
415px;
height: 45px;
margin: 0 auto;
padding: 0;
background: #101010 url(images/header.gif) repeat-x 0 0;
border-bottom: 6px solid #790000;
position: relative;
}
ul.navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.navigation li {
float: left;
padding: 0 0 0 25px;
}
ul.navigation li a {
float: left;
line-height: 38px;
border-top: 5px solid #202020;
color: #707070;
}
ul.navigation li a:hover {
text-decoration: none;
border-top: 5px solid #606060;
color: #BCBCBC;
}
ul.navigation li.active {
color: #BCBCBC;;
text-decoration: underline;
}
ul.navigation li.inactive {
text-decoration: none;
color: #707070;
}
#frame {
overflow: hidden;
margin: 0 auto;
413px;
border-left: 1px solid #606060;
border-right: 1px solid #606060;
border-bottom: 1px solid #606060;
}
#scroller {
415px;
margin: 0 auto;
overflow: hidden;
}
#content {
2490px;
}
.section {
405px;
float: left;
padding: 5px;
text-align: center;
background-color: #151515;
}
</style>
</head>
<body style="font-family: Lucida Grande; font-size: 12px; color: #fff; background-color: #101010; ">
<div id="toolbarwrap">
<ul id="toolbar" class="navigation">
<li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li>
<li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li>
<li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li>
<li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li>
<li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li>
<li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li>
</ul>
</div>
<div id="frame">
<div id="scroller">
<div id="content">
<div class="section" id="home-pane">
This would be the content for the 'Home' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Contact</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">About</a> »
<br />
</div>
<div class="section" id="about-pane">
This would be the content for the 'About' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Home</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Scripts</a> »
<br />
</div>
<div class="section" id="scripts-pane">
This would be the content for the 'Scripts' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">About</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Downloads</a> »
<br />
</div>
<div class="section" id="downloads-pane">
This would be the content for the 'Downloads' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Scripts</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">FAQ</a> »
<br />
</div>
<div class="section" id="faq-pane">
This would be the content for the 'FAQ' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Downloads</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Contact</a> »
<br />
</div>
<div class="section" id="contact-pane">
This would be the content for the 'Contact' navigation item.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
« <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">FAQ</a> <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Home</a> »
<br />
</div>
</div>
</div>
</div>
</body>
</html>
js/cfcoda.js
//
// Code taken and adapted from CodaEffects.js - (C) 2007 Panic, Inc.
// http://www.panic.com/
//
//
//
var currentSection = "home-pane"; // The default loaded section on the page
var tabTag = "-tab";
var paneTag = "-pane";
// Scroll the page manually to the position of element "link", passed to us.
function ScrollSection(link, scrollArea, offset)
{
// Store the last section, and update the current section
if (currentSection == link) {
return;
}
lastSection = currentSection;
currentSection = link;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
sectionTab = currentSection.split("-")[0] + tabTag;
document.getElementById(sectionTab).className = 'active';
if (lastSection) {
lastTab = lastSection.split("-")[0] + tabTag;
document.getElementById(lastTab).className = "inactive";
}
// Get the element we want to scroll, get the position of the element to scroll to
theScroll = document.getElementById(scrollArea);
position = findElementPos(document.getElementById(link));
// Get the position of the offset div -- the div at the far left.
// This is the amount we compensate for when scrolling
if (offset != "") {
offsetPos = findElementPos(document.getElementById(offset));
position[0] = position[0] - offsetPos[0];
}
scrollStart(theScroll, theScroll.scrollLeft, position[0], "horiz");
// return false;
}
function ScrollArrow(direction, toolbar, scrollArea, offset) {
toolbarElem = document.getElementById(toolbar);
toolbarNames = new Array();
// Find all the <li> elements in the toolbar, and extract their id's into an array.
if (toolbarElem.hasChildNodes())
{
var children = toolbarElem.childNodes;
for (var i = 0; i < children.length; i++)
{
if (toolbarElem.childNodes[i].tagName == "LI") {
toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]);
}
}
}
// Now iterate through our array of tab names, find matches, and determine where to go.
for (var i = 0; i < toolbarNames.length; i++) {
if (toolbarNames[i] == currentSection.split("-")[0]) {
if (direction == "left") {
if (i - 1 < 0) {
gotoTab = toolbarNames[toolbarNames.length - 1];
} else {
gotoTab = toolbarNames[i - 1];
}
} else {
if ((i + 1) > (toolbarNames.length - 1)) {
gotoTab = toolbarNames[0];
} else {
gotoTab = toolbarNames[i + 1];
}
}
}
}
// Go to the section name!
ScrollSection(gotoTab+paneTag, scrollArea, offset);
}
var scrollanim = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null};
function scrollStart(elem, start, end, direction)
{
//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);
if (scrollanim.timer != null) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
scrollanim.time = 0;
scrollanim.begin = start;
scrollanim.change = end - start;
scrollanim.duration = 25;
scrollanim.element = elem;
if (direction == "horiz") {
scrollanim.timer = setInterval("scrollHorizAnim();", 15);
}
else {
scrollanim.timer = setInterval("scrollVertAnim();", 15);
}
}
function scrollVertAnim()
{
if (scrollanim.time > scrollanim.duration) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else {
move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
scrollanim.element.scrollTop = move;
scrollanim.time++;
}
}
function scrollHorizAnim()
{
if (scrollanim.time > scrollanim.duration) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else {
move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
scrollanim.element.scrollLeft = move;
scrollanim.time++;
}
}
function findElementPos(elemFind)
{
var elemX = 0;
var elemY = 0;
do {
elemX += elemFind.offsetLeft;
elemY += elemFind.offsetTop;
} while ( elemFind = elemFind.offsetParent )
//console.log("Found element "+elemFind+" at "+elemY+"/"+elemX);
return Array(elemX, elemY);
}
function sineInOut(t, b, c, d)
{
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}