DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Translucent Dropdowns

03.25.2006
| 7946 views |
  • submit to reddit
        // description of your code here


// the javascript Bit

    '#contactUs': function(e) {
      e.onclick = function() {
          if(Element.hasClassName('container-popdown', 'up')) {
          new Effect.BlindDown('container-popdown', {queue: 'end', duration: .3})
          Element.removeClassName('container-popdown', 'up')
        } else {
          new Effect.BlindUp('container-popdown', {queue: 'end', duration: .3})
          Element.addClassName('container-popdown', 'up')
        }
      }
    }

// the HTML Bit

<span id='container-popdown' class='up' style='display:none'>
  <span id='translucentBack'></span>
  <span id='opaqueFore'>
    <b>cycletowork@gmail.com </b><br><br>		
    <a href='http://nikhile.livejournal.com/'>Nikhil</a> - nikhil.eldurkar@gmail.com <br>
    <a href='http://rohan-kini.livejournal.com/'>ROhan</a> - rohan.kini@gmail.com <br>
  </span>
</span>


// the CSS bit

.up {
}

#container-popdown {
  position: absolute;
  left: 1050px;
  top: 30px;
}

#translucentBack {
  background: #333;
  width: 220px;
  height: 100px;
  position: absolute;
  filter:alpha(opacity=10);
  -moz-opacity:0.1;
  opacity: 0.1;  
}

#opaqueFore {
  width: 220px;
  height: 100px;
  z-index: 1;
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity: 1;  
  font-size: 80%;
}



    

Comments

Snippets Manager replied on Fri, 2006/04/28 - 1:31am

I think you missed to explain that scriptaculous.js is needed. But still then I didn't succeed making your code working... The '#contactUs' function seems to be never called... Thanks after all becaue I understand the purpose of your code. Ciao.