Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Virginia Beach
    Posts
    5
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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:
    Code:
    #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:

    Code:
    /*
    #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:
    Code:
                  <div class="titleCell">
                  <strong>Home</strong>
                  </div>
                  <ul>
    to
    Code:
                  <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:
    Code:
    <input type="hidden" name="last_shown" id="last_shown" value="" />
    We then need to create the toggle_menu function:
    Code:
    <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

  • Users who have thanked bwmarkle for this post:

    Barons (02-21-2011)

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •