Drop Down Tabs (5 styles) Modified - Clicking in Text Box closes <div>

[yonahs]

I am using the Drop Down Tabs (5 styles) menus. (http://www.dynamicdrive.com/dynamici...roptabmenu.htm)
MY only change is that instead of having <a>'s inside the dropdown, I put another div with some textboxes (used as a login section)

Problem is that when I click into the textbox, it hides the <div>

Thanks ,
Yoni

[Beverleyh]

I don't know your particular setup but its seems that the usage of the script is flawed - its a menu script afterall, rather than a 'reveal content' script, so it makes sense that the dropdown disappears once you click on it (when you'd be directed to another page).

Maybe you should look at implementing something like this for your dropdown login box: http://www.dynamicdrive.com/dynamici...lapcontent.htm

or Use jQuery to make a simple toggled div - example;

$("#myButton").click(function () {
      $("#myContent").slideToggle("slow");
    });

For us to understand more, please provide a link to your page.

[yonahs]

Ok, so I worked a little and I got this:

$(function () {
            $("#loginDiv").hover(function () {
                $("#popupContent").show(1000);
            }, function () {
                $("#popupContent").hide(1000);
            });
        });

#loginDiv is the trigger and #popupContent is the popup.
Works beautifully, the popup slides out right into its place (directly below) the loginDiv box & slides away when I move off of #loginDiv.

I can not figure out how to get the next step.
If the mouse goes straight from #loginDiv to #popupContent, how can I get it to stay open until the user leaves both areas?


Thanks.

[Beverleyh]

It depends on your markup - we'll need a link to your page to advise a specific case example, but it sounds like the same logic as this: http://stackoverflow.com/questions/3...n-mouse-leaves

[yonahs]

Thanks.
Got it.

 <div id="loginDiv" style="float: left; position: relative; margin-left: 25px;">
                <div style="float: left; height: 40px;">
                       <div style="float: left; margin-right: 5px; margin-top: 3px;">
                             <asp:ImageButton ID="ImageButton1" ImageUrl="images/login_icon.png" runat="server" />
                        </div>
                        <div style="float: left; margin-top: 8px;">
                               <asp:LinkButton ID="linkLoginLogout" Font-Underline="false" runat="server" rel="popupContent"></asp:LinkButton>
                         </div>
                         <div class="clr"></div>
                 </div>
                 <div id="popupContent" class="dropmenudiv_e">

                 </div>
                 <div class="clr"></div>
         </div>

and

 $(function () {
            $("#loginDiv").hover(function () {
                $("#popupContent").show(300);

            }, function () {
                $("#popupContent").hide(300);
            });
        });