How can I make DIVs do this with jquery?

Question

I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.

Below is an image showing the different actions it does when clicked on.

I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?

Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.

Answer 1

You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
</div>

Once you've done that, you can use CSS to position the tooltip and show it when necessary.

#container {
    /* All child elements should be positioned relative to this one. */
    position: relative;
}

#container #tooltip {
    /* Hide by default. */
    display: none;
    /* Place the tooltip 2px above the button. */
    position: absolute;
    bottom: 2px;
    right: 0px;
}

#container #button:hover + #tooltip {
    /* Show it when someone's hovering over the button. */
    display: block;
}

To show the drop-down box, you probably will need JavaScript. Add another element to the container:

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
    <ul id="selection">
        <li>Something</li>
        <li>Something Else</li>
        <li>A Third Thing</li>
    </ul>
</div>

Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:

$('#button').click(function() {
    $('#selection').show();
});

You can then make your sub-items do whatever they like, as long as they also hide #selection.

$('#selection li').click(function() {
    // do something
    $('#selection').hide();
});

Finally, you want to change the background and text colours upon hover. That's easy enough:

#selection li {
    background-color: #ccc;
    color: black;
}

#selection li:hover {
    background-color: black;
    color: white;
}

This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.

Answer 2

Here is the approach I would take:

1. For hovering check out jQuery's hover event to change the different image states
2. For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
3. For clicking, jQuery's click event will do the trick
4. The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
5. Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.