Home/ Questions/Q 8102507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T23:15:35+00:00

Why is this simple HTML document not working right? What have I missed? I

  • 0

Why is this simple HTML document not working right? What have I missed? I got this solution in another thread but I can’t get a hold of the person who submited it. All I’ve done is copied the parts he gave me from this: http://jsfiddle.net/UnQMU/

<html>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function cancelBubleEv(e)
        {
             e = e||event;
             e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;

        }

        $(document).ready(function () {
            $(document).click(function () {

                $("#exampleDiv").hide();

            });
            $(".testColor").click(function (e) {
                $("#exampleDiv").toggle();
                cancelBubleEv(e);
            });
           $("#exampleDiv").click(function (e) {
                cancelBubleEv(e);
            });

        });​

    </script>

    <style type="text/css">

        #exampleDiv 
        {
            position: absolute;
            top:22px;
            left: 0px;
            width:198px;
            height:150px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid #7F9DB9;
            display: none;
        }

    </style>

</head>
<body>

    <div style="position:relative;">
        <div ID="DropDownList1" runat="server" width="200" class="testColor">
            Choose Multiple
        </div>
        <div id="exampleDiv">
            <input type="checkbox" ID="CheckBox2"/>
            <br />
            <input type="checkbox" ID="CheckBox3"/>
            <br />
            <input type="checkbox" ID="CheckBox4"/>
            <br />
            <input type="checkbox" ID="CheckBox5"/>
            <br />
            <input type="checkbox" ID="CheckBox6" runat="server" />
            <br />
            <input type="checkbox" ID="CheckBox7"/>
            <br />
            <input type="checkbox" ID="CheckBox8"/>
            <br />
            <input type="checkbox" ID="CheckBox9"/>
            <br />
            <input type="checkbox" ID="CheckBox10"/>
            <br />
            <input type="checkbox" ID="CheckBox11"/>
            <br />
            <input type="checkbox" ID="CheckBox12"/>
            <br />
        </div>
    </div>​

</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue seemed to be that jsFiddle adds some unnoticeable characters to the source. If they are removed the code works. Note that the cancelBubleEv function is not necessary with jQuery, and why not use the latest version. There is no </html> either.

    <html>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $(document).click(function () {
                $("#exampleDiv").hide();
            });

            $(".testColor").click(function (e) {
                $("#exampleDiv").toggle();
                e.stopPropagation();
            });

            $("#exampleDiv").click(function (e) {
                e.stopPropagation();
            });
        });
    </script>

    <style>
        #exampleDiv
        {
            position: absolute;
            top:22px;
            left: 0px;
            width:198px;
            height:150px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid #7F9DB9;
            display: none;
        }
    </style>

</head>
<body>

    <div style="position:relative;">
        <div ID="DropDownList1" runat="server" width="200" class="testColor">
            Choose Multiple
        </div>
        <div id="exampleDiv">
            <input type="checkbox" ID="CheckBox2"/>
            <br />
            <input type="checkbox" ID="CheckBox3"/>
            <br />
            <input type="checkbox" ID="CheckBox4"/>
            <br />
            <input type="checkbox" ID="CheckBox5"/>
            <br />
            <input type="checkbox" ID="CheckBox6" runat="server" />
            <br />
            <input type="checkbox" ID="CheckBox7"/>
            <br />
            <input type="checkbox" ID="CheckBox8"/>
            <br />
            <input type="checkbox" ID="CheckBox9"/>
            <br />
            <input type="checkbox" ID="CheckBox10"/>
            <br />
            <input type="checkbox" ID="CheckBox11"/>
            <br />
            <input type="checkbox" ID="CheckBox12"/>
            <br />
        </div>
    </div>

</body>
</html>
    • 0