JQuery - show/hide style attribute overriding css - javascript

I understand how CSS works in that the styling applied closest to the element overrides any previous styles. My question is, how do the JQuery functions show() and hide() operate when there is a style attribute defined to a <div> tag like this:
<div class='menuTab' style="display:block">
For the sake of this example, assume that the css is something like:
div.menuTab{
/* ..other css...*/
display:none
}
Would applying the function $('div.menuTab').hide() change the style attribute of the menuTab HTML to display:none?

In short: Yes.
.hide() is shorthand for:
.css("display","none");
So it will override your display:block inline style with display:hidden.
Unless !important is used, inline styles override CSS.

Yes.
$('div.menuTab').hide() will result in style="display:none"

Yes,
It will hide the class and override its property.
.hide()
is shorthand for:
.css("display","none");
It will override
.css("display","block");
As you can see in inspect element of chrome

If you use $('div.menuTab').hide(); js will change style in html literally as display:none;
Here you have an example. You can see the .hide() function changes the display from block to none.
http://jsfiddle.net/2tfuxzq5/3/
Hope it helps!

You may easily find how .hide() works by checking jQuery source (search for: function showHide).
jQuery .hide() and .show() are wrappers for jQuery.css() which change element's style.display property depending on its type (.hide() to display = 'none' and .show() to 'inline', 'block' etc).

Related

Understanding .removeClass in jQuery

Can some one please explain to me what exactly is this jQuery call doing
$("header").removeClass("alternative full-width").addClass("full-width");
What exactly is it doing to the CSS file, Many Thanks
removeClass() function will remove the css selector applied to the element. In your case, if the header element has css attribute with value "alternative full-width", then those will be removed and it will add "full-width"
I also observe that, the above code has two values and you're trying to remove those two and add one of them.
Instead you could do this -
$("header").removeClass("alternative");
since you wish to add "full-width" which is already available!
NOTE I assume the .full-width css value is constant in that field. If it's not the case, we may have to use hasClass() to determine the existence!
For more info on removeClass - https://api.jquery.com/removeclass/
What exactly is it doing to the CSS file?
It has no effect on the CSS file
Can some one please explain to me what exactly is this jQuery call
doing
it remove the classes ( alternative and full-width )from the header with removeClass() and then it add the class ( full-width ) with addClass()
Header Element
$("header")
Select a header tag via JQuery
.removeClass("alternative full-width")
This method remove the "alternative full-width" class
.addClass("full-width")
This method add the "full-width" class.
As a matter of fact the JQuery it doesn't do anything in the CSS file.The only thing that is done with this example is to inherit the class properties that you have alredy define in the css file

Do jquery styles change after the css class changes?

I am new to jquery, and I was looking at the .css() function. I also looked at the .addClass() and the .removeClass(). If I use .css(), on a element and then I change the element's class, would the element still have the styles that I put from .css()? Here is some example code:
$(".myClass").css({
"someStyle": "someValue"
});
setTimeout(function() {
$(".myClass").removeClass("myClass");
// Do the styles still exist?
}, 1000);
This code:
$(".myClass").css({
"someStyle": "someValue"
});
is not adding those styles to the class myClass. It's doing two completely separate and unrelated things:
Looking up elements using a CSS selector (in this case, a class selector), and
Adding styles to those elements directly (e.g., to the elements' style objects).
Removing the class later has no effect on the styles directly attached to the elements.
Answer is No.
The function .css() add inline styles to the DOM element, even if the class is remove later it will have no effect with the CSS rule applied using .css() method.

how to disable this document.getElementById("failedUpdateMessage").style.visibility = "hidden"; in javascript

after I used that code to hide the element with the id "failedUpdateMessage", I would like to show that hidden element in some page in html, how would I do that using java script? I'd try to replace the "hidden" to "show" but it doesn't work.
You must use :
document.getElementById("failedUpdateMessage").style.visibility ="visible";
Note : show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
Look up the visibility property. See what values are acceptable. Don't guess. show isn't one of them. visible is.

change existing css attribute and use it by removing or adding the css element

I have a question about changing existing css attribute.
I use Jquery in my html codes.
I would like to know how to change a existng css class attribute and apply changed class to other element.
thanks for concerning my question.
★ css code example
.AccentColor{color:#fff;background:#000;}
★ javascript
<script>
$(document).ready(function(){
$('.AccentColor').css('background','yellow');
$('#target').addClass('AccentColor');
});
</script>
★ html
<p id="target"> still background color is #000, not yellow.</p>
You should remove the dot from the class name passed to the addClass function
$(selector).addClass("classname")
Make sure you're using the right classname. In your case AccentColor
The fix to your problem is to simply switch the order of your jquery functions:
<script>
$(document).ready(function(){
$('#target').addClass('AccentColor');
$('.AccentColor').css('background','yellow');
});
</script>
Explanation:
You have to add the class to your target first before you can manipulate the css on it. In fact, if you switch your jquery selector to #target instead of .AccentColor, the code will work as you're expecting. In this case, you could easily rewrite it using jquery chaining to keep it a little cleaner.
$('#target').addClass('AccentColor').css('background','yellow');
Hope this helps.
You are changing the css to all elements with the class "AccentColor", which do not exist. And then you are adding a class "Accent" to an element that does exist, however the class "Accent" is not defined in your css. Try this:
$('#target').addClass('AccentColor'); //notice no dot "." is needed here.

Hiding button in JQuery using .prop(hidden: true)

I am trying to figure out how to hide a button with JQuery using the .prop(hidden: true) method. For some reason, in Chrome when I set this value and view the html, the button has a hidden element, but the button still shows up as visible on the page.
Any ideas?
A button does'nt have a hidden property ?
$('button').hide();
or
$('button').toggle(true); //shows button
$('button').toggle(false); //hides button
You can use set the display style to none. For example,
$("#button").css("display", "none");
Or, .hide() for brevity,
$("#button").hide()
There's also visibility and opacity but these two may not generate the effect you desired.
You can't hide a button using jQuery's .prop() function, you have to use either .hide() or .fadeOut() or you can try with .css() method:
using .css():
$('input[submit]').css('display','none');
using fadeOut():
$('input[submit]').fadeOut();
using .hide():
$('input[submit]').hide();
Your syntax is incorrect, but there's no "hidden" property anyway. You probably want:
$('#your_button').hide();
or possibly
$('#your_button').addClass('hidden');
if you've got a "hidden" class in your CSS.
The incorrect part of your syntax is that the parameters to your function call are expressed incorrectly. Setting a property should look like:
$("#your_button").prop("name", "value");
jQuery.prop is intended for HTML attributes only, things defined on the DOM node. CSS styles aren't applicable things to set with prop, and hidden just doesn't exist, whereas href or class is applicable. Instead you must use $(el).css('display', 'none') or $(el).hide().
What you described is actually correct if you happen to use jquery alongside bootstrap4.
just do the following:
$element.prop('hidden', true);
If no bootstrap 4 available it is still works for modern browser.
prop() is a getter function: http://api.jquery.com/prop/ I suggest using hide: http://api.jquery.com/hide/
If you want to use prop, then
$("#my_button").prop("style").display="none"
I would go w/o jquery. (back to the basic)
document.getElementById("mybutton").style.display = "none";
You can use a ternary operator and the css() method to accomplish the same thing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
$("#button").css("display", (mycondition) ? "block" : "none");

Categories