Ways to make on-hover content stay in place when you stop hovering?

[Barons]

Hello,


I have my site setup to display its content when you hover over the buttons on my nav bar. Once you hover over the button the content will stay up as long as your mouse pointer is over the content box. I'm running into two problems that make me want to get the content box to stay open unless you click off of it.

The first issue is that some of my buttons are close the the bottom of the content box and its not very hard at all to let the box close by mistake. I could fix this by making the content boxes larger and giving padding to the content.

The second issue is worse. Most of my content boxes hold forms. The text boxes inside the forms remember what you have previously typed into them. The problem is that once you start typing into the box it has a drop down that gives you the ability to choose from text that you have already typed into the box. When your mouse goes over this drop down it closes the content box. This happens almost every time you type into a box because your mouse is normally left near the text box that you have just clicked on to type into.

I like having the browser remember whats been typed in the text boxes but I don't know how to get it to stop closing my content boxes. I've seen some image and video galleries that pop up an image or video and then the only way to close it is by clicking off of the pop up window or pressing esc.

How would I apply that feature to my site?

Its a

www.wararmada.com/tdb

[bwmarkle]

Hi Barons,

The first thing we need to figure out is why the content is hidden in the first place. This hover show/hide is controlled by the style.css file.

This makes all of the content hidden:

#contentBox ul ul {
position:absolute; left:0px;
display:none;  
z-index:100;
}

It is the display:none that hides the content.

If you simply remove this code, all of the content will show and overlap, and this is not what you want.

For what it is you're trying to do, I'm not able to think of an easy way of doing it using css. For this task, I would use javascript.

The first thing I would do is comment out the section of css that shows the content when you mouse over it:

/*
#contentBox ul li:hover ul {
display:block; top:-1px; top:19px;
}
*/

Everytime you mouse over one of the links, we need to call a javascript function. I'll include the code for the "home" link below, and you would do the same thing for all of the other links as well:

change:

              <div class="titleCell">
              <strong>Home</strong>
              </div>
              <ul>

to

              <div class="titleCell" onMouseOver="toggle_menu('home');">
              <strong>Home</strong>
              </div>
              <ul name="home" id="home">

We then need to create a hidden variable on the page to keep track of the last content shown. We need to know the last content so we know what to hide:

<input type="hidden" name="last_shown" id="last_shown" value="" />

We then need to create the toggle_menu function:

<script type="text/javascript">
        function toggle_menu(menu_item)        {
                // grab the last content that is shown
                last_content = document.getElementById('last_shown');

                // hide the last item shown
                if(last_content.value)
                {
                        document.getElementById(last_content.value).style.display = "none";
                }

                // show the current item
                document.getElementById(menu_item).style.display = "inline";

                // set the current item now as the last item
                last_content.value = menu_item;
        }
</script>

That should give you the basics. You can view it in action here (and view the source code):
http://blog.bradmarkle.com/testing/tdb/

I hope that helps. Let me know if you have any questions.

Thanks,

- Brad

[Barons]

Brad you are epic!

I can't thank you enough for the effort you put into this. I was worried I would have to spend ages trying to figure out JavaScript.

Epic!