Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Smart Brothers - Acoustic Americana & Folk</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/brownred.css" />
<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/dropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/floatingdiv.css" />
<link rel="stylesheet" type="text/css" href="css/brownred.css" title="brownred" />
<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/grayred.css" title="grayred" />
<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/tanbrown.css" title="tanbrown" />
<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/bluebrown.css" title="bluebrown" />
<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/whiteblue.css" title="whiteblue" />
<link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/yellowblue.css" title="yellowblue" />
<script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/styleswitcher.js"></script>
<script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/dropdownpanel.js"></script>
</head>
<body>
<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent" style="position:absolute;top:600px;" >
<ul>
<li><strong>Scheme :</strong></li>
<li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li>
<li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li>
<li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li>
<li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li>
<li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li>
<li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li>
<div class="clear"></div>
</ul>
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span></span></a>
</div>
</div>
<div id="wrapper">
<div id="header">
<div id="header-inner">
<h1>The Smart Brothers</h1>
<a href="index.htm"><img src="http://prototism.co.cc/x/x/tsb/img/logo.png" alt="" /></a>
</div>
</div>
<div id="content">
<div id="content-inner">
<div id="content-inner-inner">
<h2>elis ac lacinia vulputate</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis mi, dapibus nec volutpat eu, sodales non felis. Quisque mollis consequat tellus sed rutrum. Ut non magna nibh, ut gravida nibh. Cras vitae velit leo. Donec fringilla, enim quis porta tincidunt, lectus ligula dignissim ante, id accumsan elit lectus fermentum orci. Mauris vel turpis lorem, at tincidunt erat. Vestibulum nisl massa, volutpat non tincidunt nec, semper et neque. Morbi tristique sodales lectus, ultrices facilisis eros ultricies id. Donec faucibus, felis ac lacinia vulputate, quam leo posuere mi, porta condimentum eros enim hendrerit ipsum. Mauris consectetur dignissim metus et fermentum. Vivamus vitae posuere urna. Nam mollis ultricies libero et sollicitudin. In sem dui, lobortis facilisis commodo in, elementum eu neque. Integer eget interdum quam. Vivamus ac nulla sapien. Donec semper tristique vehicula.</p>
<p>Cras hendrerit faucibus posuere. Proin malesuada, eros eu mattis venenatis, nunc nunc rutrum ligula, sed accumsan leo quam a risus. Phasellus urna nisl, commodo sed aliquet eu, ultrices at tortor. Nulla a mi at erat pulvinar ullamcorper id ut erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa sed lacus laoreet venenatis ac a sem. Morbi id est et risus pellentesque mattis. Sed semper lobortis nisl sit amet ultricies. Sed pretium sagittis velit tincidunt dignissim. Quisque gravida ultrices sollicitudin.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-inner">
<ul>
<li><strong>Navigation : </strong></li>
<li><a href="">About</a></li>
<li><a href="">Pictures</a></li>
<li><a href="">Schedule</a></li>
<li><a href="">Music</a></li>
<li><a href="">Merch</a></li>
<li><a href="">Contact</a></li>
<div class="clear"></div>
</ul>
<ul>
<li><strong>Scheme :</strong></li>
<li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li>
<li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li>
<li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li>
<li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li>
<li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li>
<li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li>
<div class="clear"></div>
</ul>
<div>
<span>All songs © 2005-2010 Jesse Edwards, Luke Edwards, and/or Michael Reed, unless otherwise noted.</span> <a href="">Full legal disclaimer</a>.
</div>
<div><a href="http://prototism.co.cc">Design © 2010 MDR</a></div>
</div>
</div>
<div id="navigation" style="position:absolute;left:0px;top:360px;" >
<div id="navigation-inner">
<ul>
<li><a href="">About</a></li>
<li><a href="">Pictures</a></li>
<li><a href="">Schedule</a></li>
<li><a href="">Music</a></li>
<li><a href="">Merch</a></li>
<li><a href="">Contact</a></li>
<div class="clear"></div>
</ul>
</div>
</div>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Application Notes
// see http://www.vicsjavascripts.org.uk/Animate/Animate.htm
//
// **** Functional Code(1.52K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Float(o){
var obj=document.getElementById(o.ID);
this.min=obj.offsetTop;
this.oop=new zxcAnimate('top',obj,this.min);
this.ms=o.Speed||1000;
this.pole=o.PollSpeed||500;
this.scroll();
}
Float.prototype.scroll=function(){
var oop=this;
var top=Math.max(zxcWWHS()[3],this.min);
if (top!=this.oop.data[0]){
this.oop.animate(this.oop.data[0],top,this.ms,false,'sin');
}
setTimeout(function(){ oop.scroll(); },this.pole);
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
new Float({
ID:'navigation',
Speed:100,
PollSpeed:500
});
/*]]>*/
</script>
</body>
</html>
"Floating" divs that scroll with page, with special conditions.
Reply With Quote
Bookmarks