Modifying CSS width with Jquery according to screen width

Question

Hey guys I'm running into some problems with the following code. What I'm trying to do is modify the width of a div via css according to the width of the screen.

<html>
<head>
     <script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code.   </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
    if (screen.width = 1024) {
        $(#something).css('width':'200px', 'background-color':'blue');
    }
    elseif (screen.width = 1366) {
        $(#something).css('width':'300px', 'background-color':'blue');
    }
}
</script>
</body>

What is the problem here? do you want to know how to get the screen width? — surajRahel
– surajRahel, Commented Apr 21, 2014 at 4:54
My first problem is getting the width to compare with the range, and then my second problem is modifying the css to the appropriate definitions. I hope that makes sense. — Hodds
– Hodds, Commented Apr 21, 2014 at 5:03
Thanks for all the help, I finally worked out my final problem which was I had name instead of id in the div command. I've updated above to help others that may read this. — Hodds
– Hodds, Commented Apr 21, 2014 at 9:45

Daniel Cheng · Accepted Answer · 2014-04-21 05:02:19Z

2

You have a few problems. The width should be checked with range

$(document).ready(function() {
  if ($(window).width() >= 1366) {
    $('#something').css({ 'width':'300px', 'background-color':'blue' });
  } else if ($(window).width() >= 1024) {
    $('#something').css({ 'width':'200px', 'background-color':'blue' });
  }
});

Edit: Combined with window.resize, then I think it'll behave exactly what you want. But you can also consider using css media query to achieve responsive layout.

@media only screen and (min-width:1024px){
    .my-style {
        background-color: blue;
        width: 200px;
    }
}
@media only screen and (min-width:1366px){
    .my-style {
        background-color: blue;
        width: 300px;
    }
}

edited Apr 21, 2014 at 5:02

answered Apr 21, 2014 at 4:50

Daniel Cheng

8705 silver badges14 bronze badges

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

1 Comment

Fabrício Matté Over a year ago

Yeah, >= makes more sense. +1

Rajaprabhu Aravindasamy · Accepted Answer · 2014-04-21 04:54:02Z

0

Try to use the window's resize event, by the way you are assigning the values inside the if statement,

$(document).ready(function() {
  $(window).resize(function(){
    var something = $('#something');
    if ($(this).width() >= 1366) {
        something .css({'width':'200px', 'background-color':'blue'});
    }
    else if ($(this).width() >= 1024) {
        something.css({'width':'300px', 'background-color':'blue'});
    }
  });
});

Note: your code has lot of syntax errors like passing a undefined var as selector, error with else if etc.. and as well as i received a downvote for that.

edited Apr 21, 2014 at 4:54

answered Apr 21, 2014 at 4:50

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

3 Comments

Rajaprabhu Aravindasamy Over a year ago

@FabrícioMatté what about now..?

Fabrício Matté Over a year ago

It was missing the object's curly braces still but I've fixed it. I didn't DV you btw, anyway +1 for the effort.

Hodds Over a year ago

Hmmmmmm for some reason its still not working for me.

Collectives™ on Stack Overflow

Modifying CSS width with Jquery according to screen width

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related