how to reset style that changed by using javascript

Question

I am trying to make a full RWD webpage using HTML5, CSS3, and JavaScript.

I have used @media in my CSS stylesheet file to set aside width:0; and hidden overflow, in small devices. I added a button that calls java scripts to minimize article and maximize aside menu, and another button to minimize aside and return article.

The following code is called:

function openaside() {
    document.getElementById("article").style.width = "0";
    document.getElementById("aside").style.width = "100%";
    document.getElementById("showasidebtn").style.width = "0";
    document.getElementById("hideasidebtn").style.width = "25pX";
}
function closeaside() {
    document.getElementById("article").style.width = "100%";
    document.getElementById("aside").style.width = "0";
    document.getElementById("showasidebtn").style.width = "25px";
    document.getElementById("hideasidebtn").style.width = "0";    
}

My page correctly responds to screen size and my scripts work fine. However when I use these scripts to change style and then change screen size, my article and aside width do not dynamically change until I refresh the page.

I have added the following JavaScript code to refresh page when screen is resized:

window.addEventListener("resize", onresize);
function onresize(){
   location.reload(false)
}

Thanks every one I Find a way, instead of

function onresize(){
   location.reload(false)
}

I use:

function onresize(){
    document.getElementById("article").style.width = "";
    document.getElementById("aside").style.width = "";
    document.getElementById("showasidebtn").style.width = "";
    document.getElementById("hideasidebtn").style.width = "";
}

But article minimize when the screen is moved in phones (e.g. scrolling). So now phone users should first scroll then open side menu. Could you help me find a better way? Is there any way to call a script when screen width exceed a certain amount?

Possible duplicate of How to reset a CSS attribute that's been changed using JavaScript? — Mike
– Mike, Commented Jul 4, 2018 at 17:26
Drop the onresize listener and try .width = "calc(100%)" etc. That will recalculate 100% when the screen size changes. — Teemu
– Teemu, Commented Jul 4, 2018 at 17:26

Farshid Ahmadi · Accepted Answer · 2018-07-04 19:26:35Z

0

I seems in java script we don't have independent event listener for screen size. But I realized we can get screen size, so I use following code:

function onresize() {
    window.addEventListener("resize", onresize);
    var viewportwidth;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth
    }
    //then I checked size to reset if nesecery
    if (viewportwidth > 600) {
         document.getElementById("article").style.width = "";
         document.getElementById("aside").style.width = "";
         document.getElementById("showasidebtn").style.width = "";
         document.getElementById("hideasidebtn").style.width = "";
    }

JAVA SCRIPT IS AMAZING. Thanks all.

edited Jul 4, 2018 at 19:26

answered Jul 4, 2018 at 18:20

Farshid Ahmadi

5311 gold badge8 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

how to reset style that changed by using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related