CODEWITHSUNDEEP
jquerycsshtmlmargin
London Smith
London Smith

Reputation: 1659

Css margin-left not executed if jQuery change it

Strange behavior of my CSS which is:

@media (min-width: 800px) {
    #DivWraper {
        margin-left: 250px;
        transition: 0.5s;
    }
}

Somewhere in page, I have this JS code:

function sidebarClose() {
    $("#DivWraper").attr("style", "margin-left: 0px");
}

function sidebarOpen() {
    if (this.window.innerWidth > 800) {
        $("#DivWraper").attr("style", "margin-left: 250px");
    }
}

If we call sidebarClose() and sidebarOpen(), then the CSS behaviour doesn't work anymore.

If I comments these 2 lines $("#DivWraper").attr(...), then the CSS keeps on working. Why do $("#DivWraper").attr(...) prevent the CSS from working?

Upvotes: 1

Views: 612

Answers (3)

Sahil Popli
Sahil Popli

Reputation: 2003

jQuery apply inline style to the element so they get more specificity than CSS code. If you apply !important (Not recommended) after margin in CSS it will override the jQuery style.

Use a class .open which defines margin left and add it via jQuery.

function sidebarClose() {
    $("#DivWraper").addClass("open");
}


function sidebarOpen() {
    if(this.window.innerWidth > 800) {
      $("#DivWraper").removeClass("open");
    }
}

Upvotes: 0

ITomas
ITomas

Reputation: 839

Think it's because you're trying to override the CSS style which is defined by id "#DivWrapper" using the style attribute of the element. Think would be better to either only defined "margin-left" in the style attribute or instead use css classes and replace the class in your methods.

CSS:

.sidebarOpen
{
        margin-left: 250px;
        transition: 0.5s;
}
.sidebarClose
{
        margin-left: 0px;
        transition: 0.5s;
}

JS:

function sidebarClose() {
    $("#DivWraper").attr("class", "sidebarClose");
}


function sidebarOpen() {
    if(this.window.innerWidth > 800) {
        $("#DivWraper").attr("class", "sidebarOpen");
    }
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337733

The issue is with your use of this.window.innerWidth. window is a global, so you should remove this.:

function sidebarOpen() {
    if (window.innerWidth > 800) {
        $("#DivWraper").attr("style", "margin-left:250px");
    }
}

Working example

Also note that your use of attr() to set inline styles is not ideal. You could use css(), but even that doesn't follow best practice. A better solution would be to set a class on the element. This way you don't even need to check the width of the window as the media query will take care of that for you:

$('#open').click(sidebarOpen);
$('#close').click(sidebarClose);

function sidebarOpen() {
  $("#DivWraper").addClass("open");
}

function sidebarClose() {
  $("#DivWraper").removeClass("open");
}
#DivWraper {
  width: 200px;
  height: 200px;
  border: 1px solid #C00;
}
@media (min-width: 200px) { /* required to make this snippet work, use 800px in production */
  #DivWraper {
    transition: 0.5s;
  }
  #DivWraper.open {
    margin-left: 250px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="DivWraper" class="open"></div>

<button id="open">Open</button>
<button id="close">Close</button>

Note that I amended the width in the media query of the snipper to 200px so that it works there.

Upvotes: 2

Related Questions