jQuery css() not applying

Question

<a href="https://www.timeatthebar.co.uk" target="_blank"><img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width:113px; top: 43%!important; z-index:0;" alt=""></a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" style="top: 84%!important; font-size:22px;" href="#">Save The British Pub</a>

I am having an issue with JQuery, my code above is the HTML and is all correct, and the code below targets a button on the page. I have checked using test and the button works however the CSS isnt applying.

var button = $( "#collapser" );
var tabimg = $( "#icon-img" );
var stp = $( "#savethepub" );

var bntclicked = false;

button.click(function() {
    if (bntclicked === false) {
        tabimg.css({"max-width":"70px", "top":"8%!important", "left":"21%!important", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"7%!important"})

        bntclicked = true;
    }
    else if (bntclicked === true) {
        tabimg.css({"max-width":"113px", "top":"43%!important", "left":"50%!important", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"84%!important"})

        bntclicked = false;
    }
});

Button Code:

<button id="collapser" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

Have you tried `fontSize` instead? JavaScript CSS rules are camelCase. — Mr. Polywhirl, Mar 10 '21 at 17:12
Can you include the HTML for button `id=collapser`? If it's ` — freedomn-m, Mar 10 '21 at 17:17
The positioning is not applying, such as moving the image to the left side of the screen instead of central and moving both the image and text to the top of the screen on click and reversing the effects on the second click — Daniel Armstrong, Mar 10 '21 at 17:20
@Mr.Polywhirl note it *should* be `font-size` as it's a css property, not a javascript one. Having said that jquery will convert camel `fontSize` to hyphenated `font-size` - but not `fontsize` - so partially correct :) https://jsfiddle.net/7afr3hym/ — freedomn-m, Mar 10 '21 at 17:23

Rory McCrossan · Accepted Answer · 2021-03-10T17:27:07.610

The issue is because you've included the !important flag in the values of the CSS properties in the object you provide to css(). These are invalid and need to be removed.

You also need to remove the !important flag on the inline styles you have added in the HTML, as they are entirely redundant. Inline styles have the highest precedence so !important has no effect there, unless you've included !important somewhere else in your stylesheets, which again means that should be removed.

The !important flag should be avoided where possible, in favour of using selector precedence. The only real legitimate use for it is when you're attempting to override styles applied by a third party source which you have no control over - and even then rule precedence should be the primary solution.

Try the following example:

var button = $("#collapser");
var tabimg = $("#icon-img");
var stp = $("#savethepub");

var bntclicked = false;

button.click(function() {
  if (bntclicked === false) {
    tabimg.css({
      "max-width": "70px",
      "top": "8%",
      "left": "21%",
      "z-index": "0"
    });
    stp.css({
      "font-size": "22px",
      "top": "7%"
    })

    bntclicked = true;
  } else if (bntclicked === true) {
    tabimg.css({
      "max-width": "113px",
      "top": "43%",
      "left": "50%",
      "z-index": "0"
    });
    stp.css({
      "font-size": "22px",
      "top": "84%"
    });

    bntclicked = false;
  }
});

#icon-img { position: absolute; }
#savethepub { position: absolute; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="collapser">Collapser</button>

<a href="https://www.timeatthebar.co.uk" target="_blank">
  <img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width: 113px; top: 43%; z-index: 0;" alt="">
</a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" style="top: 84%; font-size: 22px;" href="#">Save The British Pub</a>

However it should be noted that the logic can be made much simpler if you use classes to apply the styling. The JS logic to update the styling effectively then becomes a single line:

var $button = $("#collapser");
var $tabimg = $("#icon-img");
var $stp = $("#savethepub");

$button.on('click', () => {
  $tabimg.add($stp).toggleClass('active');
})

#icon-img {
  position: absolute;
  max-width: 113px;
  top: 43%;
  z-index: 0;
}
#icon-img.active {
  max-width: 70px;
  top: 8%;
  left: 21%;
}

#savethepub {
  position: absolute;
  top: 84%;
  font-size: 22px;
}
#savethepub.active {
  top: 7%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="collapser">Collapser</button>

<a href="https://www.timeatthebar.co.uk" target="_blank">
  <img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" alt="">
</a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" href="#">Save The British Pub</a>

score 0 · Answer 2 · answered Mar 10 '21 at 17:23

The reason this is failing is because you are trying to add the !important in the CSS function, and that's not allowed. To make this work as you would like you have a couple options. You could put the desired CSS in a class and then toggle the class (This is what I'd do). Another option is you could use the .attr() function to modify the style attr as a whole. One other option is to use the cssText selector, which allows you to add multiple CSS rules with one key. Example below:

// Change width
$('#txt').css({
    'cssText': 'width: 220px !important; font-size: 12px;'
});

Here's a link to help: https://makitweb.com/how-to-add-important-to-css-property-with-jquery/

Here's your code with the !important taken out:

button.click(function() {
    if (bntclicked === false) {
        tabimg.css({"max-width":"70px", "top":"8%", "left":"21%", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"7%"})

        bntclicked = true;
    }
    else if (bntclicked === true) {
        tabimg.css({"max-width":"113px", "top":"43%", "left":"50%", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"84%"})

        bntclicked = false;
    }
});

jQuery css() not applying

2 Answers2