CODEWITHSUNDEEP
javascriptjquery
user8751821
user8751821

Reputation: 21

need to increase or decrease the width of <div> , when browser resizes, jquery

I need to increase or decrease the width of <div>, when the browser resizes, using jquery. here is my code.

if ($(window).width() > 990 && $(window).width() < 1190) {
    $("#greybor").width(268)
    $("#srchclnt").width("245")
} else if ($(window).width() > 1200 && $(window).width() < 1300) {
    $("#greybor").width(400)
} else
    $(window).width() > 1350 {
        $("#greybor").width(580)
}

It's taking the last entered width, when I am resizing the browser, the <div> width doesn't decrease, it remains the last same.

I even tried by addClass and removeClass methods but still, it's the same thing. thanks & regards.

Upvotes: 1

Views: 57

Answers (2)

Anastasios Selmani
Anastasios Selmani

Reputation: 3699

You should use css rules for this kind of operations and preferably by appending classes to your div elements. With Id's you could do something like that:

@media (max-width: 1189px) {
    .graybor  {
        width: 268px;
    }
    .srchclnt{
        width: 245px;
    }
}
@media (min-width: 1190px) {
    .graybor  {
        width: 400px;
    }
}

@media (min-width: 1301px) {
    .graybor  {
        width: 580px;
    }
}

<div class='graybor'>
    graybor area 
</div>
<div class='srchclnt'>
   srchclnt area 
</div>

https://jsfiddle.net/m1ofw5hv/

Upvotes: 2

Tim Gerhard
Tim Gerhard

Reputation: 3607

Why aren't you doing it with css media querys? https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Upvotes: 3

Related Questions