Live change based on device width

[harnishdesign]

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>');
    }
})
})

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></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

if device width is < 1024

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

Some help would be appreciated. Thank you!

[Senff]

@Soronbe is right, you may want to look into media queries to make things look different based on screen size. However, if you really need to use jQuery cause (for whatever reason) you have to add something to the DOM, you might want to use this:

$(document).ready(function () {awesomeFunction();});
$(document).resize(function () {awesomeFunction();});

function awesomeFunction() {
    $screensize = $(window).width();
    if ($screensize > 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>');
    }
}

[harnishdesign]

@Soronbe Thanks. I have found perfect solution(on load & change screensize width ) with your suggest code.

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

[Author]

Posts