Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,026
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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;
    Code:
    $("#myButton").click(function () {
          $("#myContent").slideToggle("slow");
        });
    For us to understand more, please provide a link to your page.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, so I worked a little and I got this:
    Code:
    $(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.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,026
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks.
    Got it.

    Code:
     <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
    Code:
     $(function () {
                $("#loginDiv").hover(function () {
                    $("#popupContent").show(300);
    
                }, function () {
                    $("#popupContent").hide(300);
                });
            });

Similar Threads

  1. Resolved Drop Down Tabs (5 styles) - IE6 / IE7 problem
    By student101 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-30-2010, 11:08 AM
  2. Drop Down Tabs (5 styles) Positioning
    By vegasweb in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-06-2008, 01:10 AM
  3. Help with Drop Down Tabs (5 styles)
    By slothdog in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-24-2007, 04:01 AM
  4. Drop Down Tabs (5 styles)
    By BNArun in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-03-2007, 09:48 AM
  5. Drop Down Tabs (5 styles) question
    By mjurmann in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-23-2007, 08:33 AM

Bookmarks

Posting Permissions

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