PDA

View Full Version : Javascript Header Show/Hide



RoRiddler
12-07-2011, 08:36 PM
Hey guys,

I'd like to create a header with a show/hide feature that will keep the clicked cell active until the mouse is clicked elsewhere. Very similar to facebook, for example, where when you click on the down-arrow button at the top right and the dropdown layer appears, the down-arrow button turns black and the background color turns white. Once the mouse is clicked elsewhere, the dropdown layer goes hidden. Another example is on the google homepage, when you click on "more", that cell is highlighted until clicked elsewhere.

Any ideas? Thanks!

vwphillips
12-08-2011, 01:34 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/


#tst {
position:relative;width:200px;height:50px;
}

#content {
position:absolute;display:none;overflow:hidden;left:0px;top:50px;width:200px;height:0px;background-Color:#FFCC66;
}

.hup {
position:relative;width:200px;height:50px;background-Color:red;
}

.hup IMG {
position:absolute;left:160px;top:10px;width:30px;height:30px;
}

.hup .down {
display:inline;
}

.hup .up {
display:none;
}

.hdown {
position:relative;width:200px;height:50px;background-Color:blue;
}

.hdown IMG {
position:absolute;left:160px;top:10px;width:30px;height:30px;
}

.hdown .down {
display:none;
}

.hdown .up {
display:inline;
}

/*]]>*/
</style>
</head>

<body>

<div id="tst" >
<div class="hup" >
<img class="down" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="image" />
<img class="up" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="image" />
</div>
<div id="content" >
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function Toggle(o){
var oop=this,obj=document.getElementById(o.ParentID),h=obj.getElementsByTagName('DIV')[0],obj=imgs=h.getElementsByTagName('IMG');
imgs[0].onmouseup=function(){ oop.toggle(0); }
imgs[1].onmouseup=function(){ oop.toggle(1); }
this.h=h;
this.clss=[o.DownClass,o.UpClass];
this.obj=document.getElementById(o.ContentID);
this.mm=[o.ContentMax,0];
this.ms=o.EffectDuration;
}

Toggle.prototype={

toggle:function(nu){
this.h.className=this.clss[nu];
this.obj.style.display='block';
this.animate('height',this.obj.offsetHeight,this.mm[nu],new Date(),this.ms);
},

animate:function(mde,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
now=Math.max(now,0);
oop.obj.style[mde]=now+'px';
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
}
else {
oop.obj.style[mde]=t+'px';
if (t==0){
oop.obj.style.display='none';
}
}
}


}

new Toggle({
ParentID:'tst',
UpClass:'hup',
DownClass:'hdown',
ContentID:'content',
ContentMax:200,
EffectDuration:1000
});


/*]]>*/
</script>
</body>

</html>

RoRiddler
12-08-2011, 06:44 PM
Thank you for your quick response.

What you provided works fantastic when the object being clicked on is an image. But what if it's a table cell with font? I'd like the background and font colors to change when the toggle is in effect...

Thank you for any help!