0

I have the following code:

<div class="contentContainer">
        <div class="bild" id="bildDiv">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <div class="menubox" id="menuboxID">
                <table border="0" cellpadding="0" cellspacing="0" class="menutable">
                    <tr>
                        <td>
                            <asp:ImageButton ID="ImageButton1" CssClass="menuitem" ImageUrl="~/Images/Icons_Home.png"
                                OnClick="HomeClick" runat="server" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton2" CssClass="menuitem" data-ftrans="slide" ImageUrl="~/Images/Icons_down.png"
                                OnClick="DownClick" runat="server" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton3" CssClass="menuitem" ImageUrl="~/Images/Icons_up.png"
                                runat="server" OnClick="UpClick" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton4" CssClass="menuitem" ImageUrl="~/Images/Icons_Video_alternative.png"
                                runat="server" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton5" CssClass="menuitem" ImageUrl="~/Images/Icons_Mail.png"
                                runat="server" OnClick="MailClick" />


                        </td>
                    </tr>
                </table>
            </div>
        </div>
    <script>
        $("#bildDiv").click(function () {

            $("#menuboxID").toggleClass("fadein");
        });
        $('body').removeClass('ui-loading');
   </script>

So when I click on my #bildDiv, #menuboxID will be faded in! But now I have some textboxes in my #bildDiv! When I click on any textbox in order to write sth, my Menu fades in! But I don't want it to...it should only fade in if I click directly on my div! Solutions?

1
  • You may want to think about how your user interface is laid out. If you have text boxes inside of a div that is supposed to open a menu, this may be confusing to the user. You might want to think about making the menu open by something more apparent. Commented Jul 5, 2012 at 18:04

3 Answers 3

1

Try the following.

$("#bildDiv INPUT").click(function(event){
  event.stopPropagation();  
});
1

Stop the propagation of the event using the stopPropgation method:

$("#bildDiv input").click(function (e) {
     e.stopPropagation();
});
1
  • Your Solution made my day...Thank you!
    – davidOhara
    Commented Jul 5, 2012 at 18:07
0

If you want to use Faded in effect in Menubar only. Attach click event to #menuboxID not to #bildDiv.

$("#menuboxID").click(function () {

    $("#menuboxID").toggleClass("fadein");
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.