TinyScript
04-10-2009, 02:18 AM
Hello people. Earlier this week I discovered how to use canvas output in regular old html elements on the page. So of course I had to add it to my favorite drop down menu script.
http://h1.ripway.com/stirfry/css/tests/AccordianMenuTest.html
this only half done, but I wanted to share the script before it gets too complex for beginners to follow
<!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>JavaScript Accordion</title>
<style>
* {margin:0; padding:0}
#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.accordion dt:hover {background:url(Image.jpg)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}
#accordion2 {width:259px; margin:50px auto; border:1px solid #333; border-top:none}
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
.accordion2 dt:hover {background-color:#555}
.accordion2 .open {background-color:#444; }
.accordion2 dd {overflow:hidden; background:#fff}
.accordion2 span {display:block; width:229px; border-top:none; padding:15px}
</style>
</head>
<body>
<script type="text/javascript" >
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
window.onload = function () {
var canvasBG1 = document.getElementById('Background-canvas-1');
var ctxBG1 = canvasBG1.getContext('2d');
var gBG1 = ctxBG1.createLinearGradient(0, 0, 0, 50);
gBG1.addColorStop(0, 'rgba(200, 200, 200, 0.9)');
gBG1.addColorStop(0.2, 'rgba(180, 180, 180, 0.9)');
gBG1.addColorStop(0.8, 'rgba(130, 130, 130, 0.9)');
gBG1.addColorStop(1, 'rgba(100, 100, 100, 0.9)');
ctxBG1.fillStyle = gBG1;
ctxBG1.fillRect(0, 0, 100, 50);
var data = canvasBG1.toDataURL();
document.getElementById('accordion1-1').src = data;
document.getElementById('accordion1-2').src = data;
document.getElementById('accordion1-3').src = data;
document.getElementById('EIMG').src = data;
var canvasBG2 = document.getElementById('Background-canvas-2');
var ctxBG2 = canvasBG2.getContext('2d');
var gBG2 = ctxBG2.createLinearGradient(0, 0, 0, 50);
gBG2.addColorStop(0, 'rgba(200, 240, 200, 0.9)');
gBG2.addColorStop(0.5, 'rgba(180, 220, 180, 0.9)');
gBG2.addColorStop(1, 'rgba(100, 180, 100, 0.9)');
ctxBG2.fillStyle = gBG2;
ctxBG2.fillRect(0, 0, 100, 50);
var data2 = canvasBG2.toDataURL();
document.getElementById('background-body').src = data2;
document.getElementById('accordion2-1').src = data2;
document.getElementById('accordion2-2').src = data2;
document.getElementById('accordion2-3').src = data2;
document.getElementById('DIMG').src = data2;
}
</script>
<div id="accordion">
<dl class="accordion" id="slider" >
<dt>About</dt>
<dd>
<img id="accordion1-1" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This lightweight (1.2 KB) JavaScript accordion can easily be customized
to integrate with any website.
For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.
</span>
</dd>
<dt>Instructions</dt>
<dd>
<img id="accordion1-2" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2"><code>
var mySlider=new accordion.slider("mySlider");
<br />mySlider.init("slider",0,"open");
</code><br /><br />
The init function takes 3 parameters: the id of the "dl",
the location of the initially expanded section (optional)
and the class for the active header (optional).
</span>
</dd>
<dt>Licensing & Support</dt>
<dd>
<img id="accordion1-3" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
<code>
This script is provided as-is with no warranty or guarantee.
It is available at no cost for any project, non-commercial or commercial.
Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.
</span>
</dd>
</dl>
</div>
<div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>About</dt>
<dd>
<img id="accordion2-1" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This lightweight (1.2 KB) JavaScript accordion can easily be customized
to integrate with any website. For more information visit
<a href="http://www.leigeber.com">leigeber.com</a>.</span>
</dd>
<dt>Instructions</dt>
<dd>
<img id="accordion2-2" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
To initialize an accordion use the following code:
<br><br>
<code>
var mySlider=new accordion.slider("mySlider");
<br />mySlider.init("slider",0,"open");
</code>
<br><br>
The init function takes 3 parameters: the id of the "dl",
the location of the initially expanded section (optional)
and the class for the active header (optional).
</span>
</dd>
<dt>Licensing & Support</dt>
<dd>
<img id="accordion2-3" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This script is provided as-is with no warranty or guarantee.
It is available at no cost for any project, non-commercial or commercial.
Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.
</span>
</dd>
</dl>
</div>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
var slider2=new accordion.slider("slider2");
slider2.init("slider2",-1,"open");
</script>
<canvas id="Background-canvas-1" width="100" height="50" style="position:fixed;top:-50px;"></canvas>
<canvas id="Background-canvas-2" width="100" height="50" style="position:fixed;top:-50px;"></canvas>
<div id="EDiv" width="50%"height"30px">
<img id="EIMG" width="50%" height="30px">
<div id="EText" style="position:relative;left:0px;top:-30px;width:50%;height:30px;">
<a href="#">Hello Canvas</a>
<a href="#"> Another link</a>
</div>
</div>
<div id="DDiv" width="50%"height"30px" >
<img id="DIMG" width="50%" height="30px">
<div id="DText" style="position:relative;left:0px;top:-30px;width:50%;height:30px;">
<a href="#">Hello Canvas 2</a>
<a href="#"> Another set of links with a different BG</a>
</div></div>
<img id="background-body" width="100%" height="100%" style="position:fixed;top:0px;left:0px;display:block;z-index:-1">
</body>
</html>
http://h1.ripway.com/stirfry/css/tests/AccordianMenuTest.html
this only half done, but I wanted to share the script before it gets too complex for beginners to follow
<!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>JavaScript Accordion</title>
<style>
* {margin:0; padding:0}
#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.accordion dt:hover {background:url(Image.jpg)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}
#accordion2 {width:259px; margin:50px auto; border:1px solid #333; border-top:none}
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
.accordion2 dt:hover {background-color:#555}
.accordion2 .open {background-color:#444; }
.accordion2 dd {overflow:hidden; background:#fff}
.accordion2 span {display:block; width:229px; border-top:none; padding:15px}
</style>
</head>
<body>
<script type="text/javascript" >
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
window.onload = function () {
var canvasBG1 = document.getElementById('Background-canvas-1');
var ctxBG1 = canvasBG1.getContext('2d');
var gBG1 = ctxBG1.createLinearGradient(0, 0, 0, 50);
gBG1.addColorStop(0, 'rgba(200, 200, 200, 0.9)');
gBG1.addColorStop(0.2, 'rgba(180, 180, 180, 0.9)');
gBG1.addColorStop(0.8, 'rgba(130, 130, 130, 0.9)');
gBG1.addColorStop(1, 'rgba(100, 100, 100, 0.9)');
ctxBG1.fillStyle = gBG1;
ctxBG1.fillRect(0, 0, 100, 50);
var data = canvasBG1.toDataURL();
document.getElementById('accordion1-1').src = data;
document.getElementById('accordion1-2').src = data;
document.getElementById('accordion1-3').src = data;
document.getElementById('EIMG').src = data;
var canvasBG2 = document.getElementById('Background-canvas-2');
var ctxBG2 = canvasBG2.getContext('2d');
var gBG2 = ctxBG2.createLinearGradient(0, 0, 0, 50);
gBG2.addColorStop(0, 'rgba(200, 240, 200, 0.9)');
gBG2.addColorStop(0.5, 'rgba(180, 220, 180, 0.9)');
gBG2.addColorStop(1, 'rgba(100, 180, 100, 0.9)');
ctxBG2.fillStyle = gBG2;
ctxBG2.fillRect(0, 0, 100, 50);
var data2 = canvasBG2.toDataURL();
document.getElementById('background-body').src = data2;
document.getElementById('accordion2-1').src = data2;
document.getElementById('accordion2-2').src = data2;
document.getElementById('accordion2-3').src = data2;
document.getElementById('DIMG').src = data2;
}
</script>
<div id="accordion">
<dl class="accordion" id="slider" >
<dt>About</dt>
<dd>
<img id="accordion1-1" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This lightweight (1.2 KB) JavaScript accordion can easily be customized
to integrate with any website.
For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.
</span>
</dd>
<dt>Instructions</dt>
<dd>
<img id="accordion1-2" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2"><code>
var mySlider=new accordion.slider("mySlider");
<br />mySlider.init("slider",0,"open");
</code><br /><br />
The init function takes 3 parameters: the id of the "dl",
the location of the initially expanded section (optional)
and the class for the active header (optional).
</span>
</dd>
<dt>Licensing & Support</dt>
<dd>
<img id="accordion1-3" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
<code>
This script is provided as-is with no warranty or guarantee.
It is available at no cost for any project, non-commercial or commercial.
Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.
</span>
</dd>
</dl>
</div>
<div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>About</dt>
<dd>
<img id="accordion2-1" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This lightweight (1.2 KB) JavaScript accordion can easily be customized
to integrate with any website. For more information visit
<a href="http://www.leigeber.com">leigeber.com</a>.</span>
</dd>
<dt>Instructions</dt>
<dd>
<img id="accordion2-2" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
To initialize an accordion use the following code:
<br><br>
<code>
var mySlider=new accordion.slider("mySlider");
<br />mySlider.init("slider",0,"open");
</code>
<br><br>
The init function takes 3 parameters: the id of the "dl",
the location of the initially expanded section (optional)
and the class for the active header (optional).
</span>
</dd>
<dt>Licensing & Support</dt>
<dd>
<img id="accordion2-3" width="100%" height="100%" style="position:relative;top:0px;left:0px;display:block;z-index:1">
<span style="position:relative;top:-100%;left:0px;display:block;z-index:2">
This script is provided as-is with no warranty or guarantee.
It is available at no cost for any project, non-commercial or commercial.
Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.
</span>
</dd>
</dl>
</div>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
var slider2=new accordion.slider("slider2");
slider2.init("slider2",-1,"open");
</script>
<canvas id="Background-canvas-1" width="100" height="50" style="position:fixed;top:-50px;"></canvas>
<canvas id="Background-canvas-2" width="100" height="50" style="position:fixed;top:-50px;"></canvas>
<div id="EDiv" width="50%"height"30px">
<img id="EIMG" width="50%" height="30px">
<div id="EText" style="position:relative;left:0px;top:-30px;width:50%;height:30px;">
<a href="#">Hello Canvas</a>
<a href="#"> Another link</a>
</div>
</div>
<div id="DDiv" width="50%"height"30px" >
<img id="DIMG" width="50%" height="30px">
<div id="DText" style="position:relative;left:0px;top:-30px;width:50%;height:30px;">
<a href="#">Hello Canvas 2</a>
<a href="#"> Another set of links with a different BG</a>
</div></div>
<img id="background-body" width="100%" height="100%" style="position:fixed;top:0px;left:0px;display:block;z-index:-1">
</body>
</html>