Change element css styling with js or jquery on the fly

Question

I want to be able to change my navbar position on the fly adjusting remaining content accordingly.

So, I have a functiona website. There is a menu navbar on top by default. What I did is added an 'edit' button to that menu so that when you click it, you get a list of 4 checkboxes with the ability to choose if you want that menu positioned on top (default), left, right or bottom with the other content moving accordingly (e.g menu on the left, content goes slightly right, etc). So basically, I have something like this:

// css for menu positioning to the left
.navbar-left {
    width: 25%;
    height: auto;
}

.content-right {
    position: relative;
    left: 200px;
}

// css for menu positioning to the bottom
.navbar-bottom {
    position: relative;
    bottom: 0;
    left: 0;
    height: 200px;
}

.content-up {
    position: relative;
    bottom: 200px;
}

And in JS I do something like this

if($("#left"):checked){
    $("#menu-bar").addClass("navbar-left");
    $("#content").addClass("content-right");
} else if ($("#bottom"):checked){
    $("#menu-bar").addClass("navbar-bottom");
    $("#content").addClass("content-up");
}

Now, I have much more styling than this, but it is irrelevant to the issue at hand. The problem is when I choose 'left' it styles properly but when I change it to 'bottom' after that it still uses the styles from 'left' positioning and adds the new ones to it.

Right now I solved the issue by removing the previous classes with .removeClass() method, like that:

if($("#left"):checked){
    $("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
    $("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
    $("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
    $("#content").removeClass("content-down").addClass("content-up");
}

Basically, right now I have about a hundred lines of just adding classes of the chosen positioning while removing all the classes of 3 other choices that I added each time.

So, finally the question: Is there any other way to strip all the classes that were used before (just set everything to initial values like when the page was loaded) instead of deleting all these classes by hand?

user_9587457 · Answer

I haven't ever tried resetting the classes to their initial state, but you can certainly clear them all off of a single element in one line of code:

To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead. source: https://api.jquery.com/removeclass/

You could probably combine that with the .toggleClass or another method.

If I had to sit down and do it right now, based on my understanding of your question I'd just hide the original elements and add new elements with the classes that you'd like, then to revert delete the new elements and restore the original one.

Change element css styling with js or jquery on the fly

1 Answers