jQuery Tutorial #03 Form and Document/Window Events (Submit, Scroll and Resize)

Image Source

Repository

 https://github.com/jquery/jquery 

What Will I Learn?

I will learn the jquery events part 3 , in this part we will take the form and document/window with examples . 

• What's the submit event and how to use it.
• The definition of scroll event and their uses.
• The concept of resize event and its contribution  in responsive.

Requirements

• Knowledge about HTML5 and CSS3
• Knowledge about jQuery
• A text editor like notpad ++ 

Difficulty

• Basic

Description

In this tutorial we will continue the jQuery events , we will take the form and document/window events.

1- Submit Event :

The submit event is issued when a form is submitted to the server.

This event only fires on the form element, not on the button or input submit elements.   

To use the submit event we must select the element then apply the submit() method

 $('element').submit(function () { // something here })); 

Inside the function I will prevent the default action of the submit event by ' preventDefault() ' method , then I will show the message and change the opacity to be more beauty .

My code : 

 /******* Submit Event ********/

    $('.contactform').submit(function (e) {

        e.preventDefault();

        $('.thanks').slideDown(600);

        $(this).css('opacity', '0.1');

    });

    /******* Submit Event ********/

And when I click on the ' contact us ' button this is what will happen 

2- Scroll Event :

The scroll event is emitted when the document or an item is scrolled. 

We can do many things when we scroll an element for example to show or hide elements , to get an alert ..etc to create a function when the scroll equals to a number .

To use the scroll event we must select the element then apply the scroll() method

$('element').scroll(function () { // something here })); 

Often we use this event with the window element, in this example I will scroll to the bottom when I arrive to 300 px from the top I will show a div.

My code : 

/***** Scroll Event ****/

    $(window).scroll(function () {

        if ($(this).scrollTop() > 300) {

            $('.showDiv').fadeIn(600);

        } else if ($(this).scrollTop() < 100) {

            $('.showDiv').fadeOut(600);

        }

    });

I used the scrollTop() method that returns the vertical scrollbar position for the selected elements for a condition if the value is bigger than 300 px I will show the div else if it's less than 100 px I will hide it.

3 - Resize Event :

The resize event is fired when the document view has been resized. 

I will make a responsive div by the resize event without anyframe work to see uses of this event .

To use the resize event we must select the element then apply the resize() method

$('element').resize(function () { // something here })); 

I will test if the width of window bigger than 992 so am in the large screen I will show the red div , else if am in the medium screen I will show the second div ..etc , with the resize event also I will test to show the compatible element.

My code :

/***** Resize Event ****/

    if ($(window).width() > 992) {

        $('.showLg').show(600);

    } else if (($(window).width() > 768) && ($(window).width() < 992)) {

        $('.showMd').show(600);

    } else if ($(window).width() < 768) {

        $('.showSm').show(600);

    }

    $(window).resize(function () {

        if ($(window).width() > 992) {

            $('.showLg').show(600);

            $('.showMd').hide(600);

            $('.showSm').hide(600);

        } else if (($(window).width() > 768) && ($(window).width() < 992)) {

            $('.showLg').hide(600);

            $('.showMd').show(600);

            $('.showSm').hide(600);

        } else if ($(window).width() < 768) {

            $('.showLg').hide(600);

            $('.showMd').hide(600);

            $('.showSm').show(600);

        }

    });

    /***** Resize Event ****/

I will resize my window and see the result between the large and small screen 

And when I resize the window to the small screen less than 300px of width this is the result

Video Tutorial

Curriculum   

•  Create a slideshow using HTML5 , CSS3 and jQuery
•  jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)
• Create a loading page using HTML5 , CSS3 and jQuery
• jQuery Tutorial #02 Keyboard and Form Events ( Keyup, Keydown, Keypress, Change, Focus and Blur)

Proof of Work Done

https://github.com/alexendre-maxim/jQuery-Events/tree/master/jQuery%20Events%203