jQuery's .css() doesn't work

Question

This should be the easiest thing since sliced bread...

I just want to hide my buttons when logged in and show the log out button.

jQuery().ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none !important");
    $(".logged-in-button").css("display", "inline !important");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body class="logged-in">
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=register"><span>Register</span></a>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=login"><span>Login</span></a>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page logged-in-button"><a href="http://www.savingaddicts.com/wp-login.php?action=logout"><span>Logout</span></a>
  </li>
</body>

Any help appreciated.

I can't see any reason why it doesn't work. Do you have any error on the console. — IsraGab, Apr 08 '16 at 06:23
Removing the `!important` seems to do the trick: https://jsfiddle.net/w0a1w5m5/1/ — Pimmol, Apr 08 '16 at 06:23
By the way I prefer to use .css({'display': 'none !important'}). Have you tried with this syntax? — IsraGab, Apr 08 '16 at 06:24
Possible reason: http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css — Rayon, Apr 08 '16 at 06:24
Better you deal with classes....https://jsfiddle.net/rayon_1990/uhhkc8au/ — Rayon, Apr 08 '16 at 06:26

score 3 · Answer 1 · answered Apr 08 '16 at 06:45

3

Adding document to your ready function is a must for the script to know what its waiting for or else it doesn't know what its "ready" for. I removed the important tags and fixed the jQuery function and this works:

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

You can view the codepen here: http://codepen.io/erwstout/pen/zqpREW

answered Apr 08 '16 at 06:45

erwstout

1,277
1
13
30

This answer seems to work just fine. In addition, since I noticed a flash of all the buttons before they are hidden, you can use [Modernizr](https://modernizr.com/) with a no-js class on the tag and the CSS as in this codepen: http://codepen.io/anon/pen/zqpRWa – damo-s Apr 08 '16 at 07:12

score 2 · Answer 2 · answered Apr 08 '16 at 06:25

2

remove !important value, or you can use $( ".logged-out-button" ).hide(); jquery function

answered Apr 08 '16 at 06:25

Alexey G

1,068
1
14
18

What if `!important` is must ? – Rayon Apr 08 '16 at 06:25
2

looks like $( ".logged-out-button" ).attr("style", "display: none !important"); works in that case – Alexey G Apr 08 '16 at 06:28
What if there are other inline styles ? `.attr` will replace them! – Rayon Apr 08 '16 at 06:28
you cant' do trick with `none !important` because of [bug](https://bugs.jquery.com/ticket/11173) So try to store style attr and then update them – Alexey G Apr 08 '16 at 06:31

score 0 · Answer 3 · answered Apr 08 '16 at 06:28

Try like this:

<li class="menu-item menu-item-type-post_type menu-item-object-page logged- out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=register"> <span>Register</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-out-button"><a href="http://www.savingaddicts.com/wp-login.php?action=login"><span>Login</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page logged-in-button"><a href="http://www.savingaddicts.com/wp-login.php?action=logout"><span>Logout</span></a></li>

$("document").ready(function(){

if ($( ".menu-item" ).hasClass( "logged-in-button")) {
    $( ".logged-out-button" ).css( "display", "none" );
    $( ".logged-in-button" ).css("display", "inline");   
  }
 });

Fiddle: http://codepen.io/anon/pen/repJyY

score 0 · Answer 4 · edited May 23 '17 at 11:45

0

You can use .css("cssText", "display:none !important") just like mentioned here.

So your code would look like:

jQuery(document).ready(function($) {
  if ($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("cssText", "display:none !important");
    $(".logged-in-button").css("cssText", "display:inline !important");
  }
});

JsFiddle

edited May 23 '17 at 11:45

Community

1
1

answered Apr 08 '16 at 07:03

Ikhlak S.

8,578
10
57
77

score 0 · Answer 5 · 2016-04-08T11:29:53.520

A page can't be manipulated safely until the document is "ready"
jQuery can detect this state of readiness for you.

To wait for your document to become ready in with jQuery use:

$(document).ready(function() {
  // your document is ready do something amazing
});

To wait for your document to become ready in without jQuery use:

document.addEventListener("DOMContentLoaded", function(event) {
  // your document is ready do something amazing
});

To wait for your window to COMPLETELEY load with jQuery use:

$(window).load(function() {
  // your window has completely loaded do something amazing here
});

To wait for your window to COMPLETELEY load without jQuery use:

window.onload = function() {
  // your window has completely loaded do something amazing here
};

Your code did not work because you did not wait for the window to load or the document to become ready.
You can add $.fn.ready(...); to your code like this:

$(document).ready(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

You can even wait for the document to completely load (images and all) like this:

$(window).load(function() {
  if($("body").hasClass("logged-in")) {
    $(".logged-out-button").css("display", "none");
    $(".logged-in-button").css("display", "inline");
  }
});

Also remember that you can make showing and hiding elements easier by using $.fn.hide(...); and $.fn.show(...).
You can also toggle elements using $.fn.toggle(...)

You can even animate elements when you display or hide them using:

$.fn.fadeOut(...);
$.fn.fadeIn(...);
$.fn.fadeToggle(...);
$.fn.slideOut(...);
$.fn.slideIn(...);
$.fn.slideToggle(...);

For more info on effects in jQuery you can read the docs here

Jack, has my answer helped you? Do you mind sharing if and how you solved the problem? — , May 24 '16 at 03:26

jQuery's .css() doesn't work

5 Answers5