Window Events in jQuery

 <!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Events jQuery</title>
<style>
    body {
        font-family: arial
    }

    #box {
        width: 70%;
        height: 200px;
        background: pink;
        padding: 10px;
        border: 1px solid #000;
        overflow: auto;
    }
</style>

<body>
    <!-- Window Events : load(), unload(), resize(), scroll() -->
    <h1>jQuery Window Events</h1>
    <div id="box">
        <h2>Test Box</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus repellat quod esse quas laboriosam.
            Assumenda, velit? Blanditiis voluptates consectetur voluptas explicabo dolore at beatae voluptatem quidem
            placeat facere quibusdam odit, non tenetur corporis, laboriosam, eos dignissimos molestiae. Nihil
            cupiditate, itaque vero veniam, accusamus laborum iste accusantium blanditiis fugiat sapiente atque eos
            nulla expedita? Officia minima dolorem, eveniet explicabo, totam temporibus recusandae voluptas iusto
            quaerat voluptatibus doloremque est, dicta fugit aut! Minus praesentium obcaecati ab nulla fugit vero facere
            esse minima aspernatur doloribus, hic quaerat cum ex. Laudantium nobis quo alias modi accusamus labore minus
            facere, officia adipisci quisquam. Dolore, labore!</p>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam libero illo quaerat nisi ad, adipisci ipsum qui
        necessitatibus sit assumenda optio excepturi enim, rerum facere, repudiandae velit. Reprehenderit consectetur
        numquam maxime voluptatum doloribus unde, tempora nulla? Velit minus nihil totam repellendus nam voluptate
        molestias quasi iste voluptates, delectus aperiam ea dolorem accusantium optio, reiciendis perspiciatis officiis
        vel iure, at explicabo rerum ullam? Recusandae perspiciatis eligendi itaque, cumque vero, saepe, facilis
        sapiente reiciendis pariatur ad impedit autem corporis beatae reprehenderit. Molestiae possimus repellat
        ratione, earum pariatur alias eaque laudantium debitis reprehenderit mollitia aut labore at delectus vel vero
        nam magnam inventore dolore dolores nostrum quod laboriosam? Quaerat quod dolor harum odio quae iure fugiat
        nesciunt commodi debitis architecto vel delectus, inventore incidunt consequatur sapiente ut quas quos fugit et,
        esse nemo tempora. Quidem iure quae illo, necessitatibus accusamus adipisci dolorum, quis ipsam eos consectetur
        ex omnis doloribus expedita, vel nulla? Praesentium, quisquam libero veniam animi alias impedit quos cumque
        nesciunt repudiandae neque! Molestiae, ea accusantium neque eum eaque magni possimus harum porro consequuntur
        error quisquam nesciunt distinctio voluptate natus numquam nulla et minus temporibus illum ut quasi aliquid
        doloremque! Possimus, molestias. Amet voluptate magni nihil ab delectus impedit vel at culpa.</p>

    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/eventsTwo.js"></script>
</body>

</html>





eventsTwo.js File
$(document).ready(function () {
    //While scrolling page, "scroll()" event will automatically call
    //Below, "window" is Object, so we can write direct(without quotes) window
    $(window).scroll(function () {
        console.log("You are scrolling");//We can check in browser console to print message
    });

    $("#box").scroll(function () {
        console.log("Box content scrolling");
    });

    $(window).resize(function () {
        console.log("You are resizing window");
    });

    //Below functions are closed after 3.0 jQuery version
    // $(window).load(function(){
    //     console.log("Window load");
    // });

    // $(window).unload(function(){
    //     console.log("Window unload");
    // });
});



Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more