changing div width using Jquery

Question

To Change the Div width according to window size, I googled and attempt with below JQuery script (combined answer from stackoverflow posts):

JQuery script:

<script>  
function checkWindowSize() {  
    if ($(window).width() > 1800) {  
        $('#divwidth').addClass('large');  
    }  
    else {  
        $('#divwidth').removeClass('large');  
    }  
}  
$(window).resize(checkWindowSize);     
</script>

CssClass:

#divwidth{  
    width: 1200px;
}  
#divwidth .large{  
    width: 2200px;
}

And here's my html using the class:

<div style="text-align: left; margin-left:auto;margin-right:auto;  overflow-x:auto;" ID="divwidth">

<!-- my gridview here -->
</div>

It doesn't seems to work to set the Div width. changing giving script type "text/Javascript" does not help either.

I also linked that page because that page may help you to solve the problem on your own. #divwidth is more specific than .large so .large is being ignored. — Draco18s no longer trusts SE
– Draco18s no longer trusts SE, Commented Jan 21, 2016 at 18:45
You could handle the screen size with the viewport meta tag. This tag is very useful when designing a responsive website. Can be combined with relative measurements like 100% or 5em to control the experience on different sized devices. — Nathan
– Nathan, Commented Jan 21, 2016 at 19:06

marc_s · Accepted Answer · 2016-02-07 19:08:00Z

3

I don't think you need jQuery for this. You could set your width to percent like in this jsfiddle https://jsfiddle.net/n3gw5613/

.divWidth {
    float:left;
    width:50%;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}

Or use media queries like in this jsfiddle https://jsfiddle.net/90jaxah9/1/

.divWidth {
    float:left;
    width:350px;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}
@media only screen and (max-width:320px) {
   .divWidth {
       width:100px;
       margin:0;
    }
}

Drag and resize your browser to see the change

edited Feb 7, 2016 at 19:08

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 21, 2016 at 19:02

badsyntax

3115 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

The moment i change the width from a fixed number to %, it expands as the gridview I had is longer than the page's width.

badsyntax Over a year ago

How about css media queries like in the seconds example?

Alex Over a year ago

The css media queries wasn't working at the time i attempted with my code. However it works after I tried with Ivan's code and then I realize it would work with your 2nd answer as well. Wish I could accept both answers

Ivan Modric · Accepted Answer · 2016-01-21 21:09:29Z

2

The problem you are experiencing with @kpucha's anwer is that you implemented his advice incorrectly. In yor CSS there is still a whitespace (' ') changing the meaning of CSS. Your code is:

#divwidth .large{  
    width: 2200px;
}

Where it should be:

#divwidth.large{  
    width: 2200px;
}

The difference is that your rule applies to descendants of #divwidth with the class large. Instead it should apply to #divwidth elements that also have the classlarge.

The best way however would be a CSS media query like so:

#divwidth {
    width: 1200px;
}
@media (min-width:1800px) {
    #divwidth {
        width: 2200px;
    }
}

This would result in the div being 1200px in width when the viewport is smaller than 1800px.

answered Jan 21, 2016 at 21:09

Ivan Modric

6196 silver badges14 bronze badges

2 Comments

kpucha Over a year ago

Indeed I didn't see the white space -_-

Alex Over a year ago

Thanks! using Css media query does quickly solve the problem

kpucha · Accepted Answer · 2016-01-21 19:17:07Z

2

You have a problem with the CSS selector.

You have this:

.large #divwidth{  
    width: 2200px;
}

You are saying that you want the element with the id divwidth WITHIN THE ELEMENT with the class large

You need this:

#divwidth.large{  
    width: 2200px;
}

This way you are saying that you want the element with id divwidth AND the class large

answered Jan 21, 2016 at 19:17

kpucha

7295 silver badges12 bronze badges

5 Comments

Alex Over a year ago

I updated my code (as well as the post here) and no changes is made

kpucha Over a year ago

Look here jsfiddle.net/tv0gLaLb it is working, maybe you are not triggering the event, see the comments in the code.

Alex Over a year ago

Thanks Kpucha, I checked and you're correct that the function didn't trigger.... I assume it should trigger the moment window (webpage) is resize? Thou CSS media query solved the issue, i'm curious why my jscript does not fire off

kpucha Over a year ago

Yes the event .resize() is triggered when the window size change. If you load the js but don't change the size of the window don't recognize and event of resizing and don't trigger the function.

Alex Over a year ago

Something is preventing me from calling the function. A simple alert() wouldn't run when window size changed. I will look into it now that you confirmed

Collectives™ on Stack Overflow

changing div width using Jquery

3 Answers 3

3 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related