CODEWITHSUNDEEP
jqueryhtmlajax
php.exe
php.exe

Reputation: 95

jquery/html/ajax - jquery not showing/hiding elements

I am trying to make a spy phone (pls dont ask) using html, jquery, and css the css isn't the problem its more of the jquery

    <div id="spyphone" class="spyphone">
            <button id="messagebutton"class="spyphonebutton">Messages</button>
            <div id="messages">
                <p>hai</p>
            </div>
            <button class="spyphonebutton">Browser</button>
            <iframe id="browser" src="http://www.google.com"></iframe>
            <button id="exit">Exit</button>
            <script>
                $("#messages").hide();
                $("#browser").hide();
                $("#exit").hide();
                $("#messagebutton").click(function () { 
                    $("#exit").show(); 
                    $("#messages").show();
                });
                $("#exit").click(function () { 
                    if ($("#messages:visible") == true) {
                        $("#messages").hide(); // does not hide the messages
                        $("#exit").hide(); // does not hide exit button
                    } else if ($("#browser:visible") == true) {
                        $("#browser").hide();
                    }
                });
            </script>
        </div>
    </div>
    <!-- End of spy phone -->

This is very strange problem. No output... It should work but it doesn't... I have no other information about it....

Upvotes: 0

Views: 131

Answers (1)

guest271314
guest271314

Reputation: 1

$("#messages:visible") returns jQuery object , not Boolean .

Try utilizing .is() , substituting $("#messages").is(":visible") for $("#messages:visible") == true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spyphone" class="spyphone">
            <button id="messagebutton"class="spyphonebutton">Messages</button>
            <div id="messages">
                <p>hai</p>
            </div>
            <button class="spyphonebutton">Browser</button>
            <iframe id="browser" src="http://www.google.com"></iframe>
            <button id="exit">Exit</button>
            <script>
                $("#messages").hide();
                console.log($("#messages:visible")
                            , $("#messages:visible") === false);
                $("#browser").hide();
                $("#exit").hide();
                $("#messagebutton").click(function () { 
                    $("#exit").show(); 
                    $("#messages").show();
                });
                $("#exit").click(function () { 
                    if ($("#messages").is(":visible")) {
                        $("#messages").hide(); // does not hide the messages
                        $("#exit").hide(); // does not hide exit button
                    } else if (!$("#browser").is(":visible")) {
                        $("#browser").hide();
                    }
                });
            </script>
        </div>
    </div>

Upvotes: 1

Related Questions