Unable to add class dynamically on window resize

Question

Here is the div to which I am trying to add class

<div id="sidebar" class="addthis_recommended_horizontal col-lg-4 col-md-4 col-sm-6 col-xs-12""></div>

and this is the script I am using

<script>window.onresize=function()
{var width=document.getElementById("#sidebar").clientWidth;
if(width<640) {document.getElementById("#sidebar").setAttribute("class",".sidebar");}
</script>

After adding this class, this CSS code changes the width

.sidebar.at4-recommended-item{width:45%!important}

But the class was not being added, I don't know why?

EDIT I am using media queries. In this case two classes have same name If I change one other will change too so I am adding a class dynamically, and it is a div not whole window width that I need to change.

WHY ARE PEOPLE SO KEEN ON DOWNVOTING EVERY QUESTION HERE?

You just got only one downvote.. :/ (_I didn't downvote you_) — Mr_Green, Feb 09 '15 at 07:24
The point is this question is not that bad so as to receive a downvote. — Asain, Feb 09 '15 at 07:29

Rahul Desai · Answer 1 · 2015-02-09T07:22:58.253

1

Since you are changing the element's width on window resize, ideally you should be using CSS3's @media queries instead!

In your case, the @media query will be:

<style>
    @media (max-width: 640px){
        #sidebar{
            width: 45%;
        }
    }
</style>

It is a bad idea to write Javascript just for this purpose.

Learn more: CSS @media queries | MDN

EDIT:

If you are adding the class dynamically, just mention that in the @media query:

<style>
    @media (max-width: 640px){
        .sidebar{
            width: 45%;
        }
    }
</style>

Keep it simple. :)

edited Feb 09 '15 at 07:22

answered Feb 09 '15 at 06:56

Rahul Desai

15,242
19
83
138

1

[Note to OP] media queries doesn't support IE8 and below. – Mr_Green Feb 09 '15 at 07:06
[Note to OP] Respond.js is mandatory if you want to use mediaqueries in IE8. This is the polyfill that enables media queries for the browser. [See this answer](http://stackoverflow.com/a/7777281/586051). – Rahul Desai Feb 09 '15 at 07:09
I am using media quesies but I can't use them In this case. – Asain Feb 09 '15 at 07:16
@Asain You can set media query for the dynamically added class too. :) Please see the edit in my answer. – Rahul Desai Feb 09 '15 at 07:21
My width of div does not directly depend on width of window. Width of window is 1366px and width of div is less than 640px – Asain Feb 09 '15 at 07:26
1

@Mr_Green IE8 does not exist – knitevision Feb 09 '15 at 07:26

score 0 · Answer 2 · edited Feb 09 '15 at 07:20

Don't use # when you select an element by document.getElementById. # is used in css/jQuery selectors, not in plain JavaScript. and also you are adding a class name on window resize to below 640, you should also consider removing that class when resized above 640.

Please try using following code:

<script>
    window.onresize=function() {
       var sidebar = document.getElementById("sidebar");
       var width = sidebar.clientWidth;
       if(width<640) {
           sidebar.className ="sidebar";
       }
       else{
           sidebar.className = ""; //assuming this element doesn't have any other classes.
       }
    }
</script>

If you want use jQuery then,

<script>
   window.onresize=function() {
       var sidebar = $("#sidebar");
       var width = sidebar.width();
       if(width<640) {
           sidebar.addClass("sidebar");
       }
       else{
           sidebar.removeClass("sidebar");
       }
   }
</script>

There is no `class` but a `className` property. One can also use `.classList.add("sidebar")`. — Kagami Sascha Rosylight, Feb 09 '15 at 06:54
"*`#` is only used in jQuery selectors, not in plain JavaScript.*" - `#` is used in CSS selectors, rather than 'jQuery selectors,' and is used in plain JavaScript methods such as `document.querySelector()` and `document.querySelectorAll()` (among a couple of others). — David Thomas, Feb 09 '15 at 07:03

Unable to add class dynamically on window resize

2 Answers2