CODEWITHSUNDEEP
javascriptjquery
HDP
HDP

Reputation: 4221

Live change when browser resize

I have using this code for add div after 6 & 4 item in sequence according to screensize. It is working fine on load, but it does not work on browser resize.

$(document).ready(function () {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    }
});

$(function () {
    $screensize = $(window).width();
    if ($screensize < 1025) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
})
})

Updated:

Thanks for all answer. but, it is not work perfectly according to want I. When, I have change more than 1 time screensize so, it is every time call(add more than 1 div).

It would look like this:

if, device width is more than 1024. So, Counter will calculate 6(add clearfix div after 6 item). & if device width is less than 1024 So. Counter will calculate 4(add clearfix div after 4 item).

if device width is > 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

if device width is < 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

I hope, you can clearly understand my question. Thanks.

Upvotes: 0

Views: 127

Answers (2)

Bla...
Bla...

Reputation: 7288

To check when the user resize the browser use $.resize, like this:

$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } 
    if ($screensize < 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    } 
});

NOTE: please conside if the width == 1024 what will happen.

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108472

Try using the resize event and use conditional statements inside the handler to manipulate your DOM:

$(window).resize(function () {
    if ($(this).width() > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } else {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
});

To trigger this manually onload, do:

$(function() { $(window).resize() }); // trigger resize onload

Note that you might want to change your DOM manip logic to toggle classes and visibility using CSS instead, as it is now you will be adding multiple elements on resize.

Upvotes: 0

Related Questions