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

Code:

<!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!

Thread: Javascript Header Show/Hide

Thread Tools

Search Thread

Javascript Header Show/Hide

Bookmarks

Bookmarks

Posting Permissions