Contact Us Popdown

Whew. This took some time

On clicking Contact Us, I wanted this small translucent drawer to drop down, which had the contact info. Taking the user to another page, just to give contact info, is a waste of time and clicks.

So that was the idea.

Basically used Script.aculo.us and CSS to get this working. This took some time, but then that was because I was doing it for the first time. Its actually pretty simple.

Used Script.aculo.us Effect library and performed the BlindDown and BlindUp Effects and
used CSS to give the translucent effect for the drawer.

When a DIV is made translucent, all the containing DIVs also inherit that property. Hence the contact information inside the drawer used to become translucent too. Used this documentation to get around the issue.

Now all thats remaining is to figure out why I cant click on the links inside the drawer, and to position the contact information nicely. And add rounded corners to the drawer ;-)




'#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 above javascript uses Behaviour (another awesome library, that makes writing javascript a pleasure) and Prototype to peform the up and down action of the drawer.

The complete code snippet on CodeSnippets.