CODEWITHSUNDEEP
jqueryhtml
Trevor
Trevor

Reputation: 169

How do I call a jquery function to check for element visibility

I'm trying to detect visibility (partial or complete) with jQuery of an html element with an ID of cover and delete the element. As it is not working I've stripped down the function to just alert a message if the element is detected. I'm using the .visible method but it's not alerting the message.

The script I've created is called checkVisible.js and is simply:

$(function() {
    alert('START OF FUNCTION');
    $('#cover').visible(), function() {
        alert('COVER VISIBLE');
    };
});

The html is:

<!DOCTYPE html>

<head>
    <link rel="stylesheet" style="text/css" href="annie.css">
    <script src="js/visible.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/jquery.visible.min.js"></script>
    <script src="js/checkVisible.js"></script>
</head>

<body>

    <div id="nav">
        <div id="logo"><img id="logo_img" src="images/annie2.gif"></div>
        <div id="navbar">
            <p class="hdr">SHOP</p>
            <p class="hdr">JOBS</p>
            <p class="hdr">ABOUT US</p>
            <p class="hdr">BOOKINGS</p>
            <p class="hdr">PAYMENTS</p>
        </div>
    </div>

    <div class="holder">

        <div id="lh_top_bar">
            <div id="lh_top_bar_text">ANNIE</div>
        </div>
        <div id="rh_top_bar"></div>
        <div id="lh_bar">
            <div id="line"></div>
            <div id="lh_bar_text">Collection 2016/2017</div>
        </div>

        <div class="image1">
            <img class="cs--img1" src="images/shoe_black_pair_small.jpg" alt="black shoe">
        </div>

        <div id="rh_bar">
            <div id="rh_bar_text">We will be at White Show January 20, 2017</div>
        </div>
        <div id="bottom_bar">
            <div id="discover">DISCOVER COLLECTION</div>
            <div id="lh_bottom_bar"></div>
            <div id="rh_bottom_bar"></div>
        </div>

    </div>

    <div class="holder2">

        <div id="lh_top_bar">
            <div id="lh_top_bar_text">ANNIE</div>
            </div>
            <div id="rh_top_bar"></div>
            <div id="lh_bar">
                <div id="line"></div>
                <div id="lh_bar_text">Collection 2016/2017</div>
            </div>

            <div class="image1">
                <img class="cs--img1" src="images/canstockphoto28075264.jpg" alt="gucci">

            <!--  ID="COVER"  -->

            <div id="cover"></div>
        </div>

        <div id="rh_bar">

            <div id="rh_bar_text">Instagram</div>
        </div>
        <div id="bottom_bar">
            <div id="discover">[email protected]</div>
            <div id="lh_bottom_bar"></div>
            <div id="rh_bottom_bar"></div>
            <div id="copyright">© 2016 ALL RIGHTS RESERVED ANNIE COLLECTIONS</div>
        </div>

    </div>


    </body>

</html>

It is displaying START OF FUNCTION but when the element becomes visible it does not display COVER VISIBLE.

It seems it cannot find the .visible method. What am I doing wrong?

Upvotes: 0

Views: 537

Answers (1)

GROVER.
GROVER.

Reputation: 4378

Replace it with this instead:

$('#cover').visible(function() { // you must wrap your function within the parentheses of visible
    alert('COVER VISIBLE');
});

The problem was, you were not wrapping your function() within the parentheses of the visible() function. Therefore it won't run when visible() is run.

Hope this help! :-)

EDIT:

I have noticed that visible() isn't actually a jQuery native function.

So try this in replacement:

if ($("#cover").is(":visible") == true) { 
    alert("COVER VISIBLE");
}

Upvotes: 1

Related Questions