A friend of mine turned me on to Twilio and I have to say it’s pretty kick ass. They did an amazing thing by creating an open source call routing system as well. Not only can you straight out code the routing, etc., but you can use their existing system straight out of the box with little modification.

One thing was lacking for me on the OpenVBX without plugins. The Dial applet that came with it didn’t allow for adding a timeout. Luckily someone did write out the code for modifiying the applet to include timeout and callerid, but it was confusing and I had to spend some time to edit it myself.

I finally got it working, so I’m posting it here.

Here’s the original link:
https://github.com/twilio/OpenVBX/issues/#issue/27

Here’s the link to the modified dial applet that includes caller id and timeout.
Time Out Dial Applet

It’s hard to describe, but one thing lacking in most horizontal CSS menus is a persistent hover state for the top level element.

Let me explain – say you hover over the tab “About Us”, and it is supposed to drop down to show other items in that section. When you move the mouse down to hover over these items, personally, I feel the hover state of About Us should stay on to indicate that you’re in that section.

Unfortunately, almost all CSS menus don’t do this. I found one that does, however – Here it is:

http://www.venturelab.co.uk/devblog/2010/06/creating-a-pure-css-dropdown-menu/

The key bit of code is excerpted here:

#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
background:#6b0c36; /* Solid colour fall-back */
background:rgba(107,12,54,0.75); /* It’ll look nice semi-transparent */
text-decoration:underline;
}
This gets tricky, but it should make sense.
This block of code here is where the hover styles come in, there’s a bit of nifty code in there which controls what we’ll call ‘persisting hover states’ on the top level item even when the user is hovering the dropdown items…

#nav li:hover a is what allows you to give the top level link a persisting hover state when hovering its ‘children’. This works by styling every link inside a list-item when that list-item is hovered.