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");
Related
I am trying to expand toggle class using JavaScript but its not working, i am using setAttribute('aria-expanded', 'true') its giving error set-attribute is null.
(document.getElementById("collapseid")as HTMLTextAreaElement).setAttribute('aria-expanded', 'true')
How can we expand the toggle area with div id using JavaScript and without use of click. i am not sure set attribute will solve the issue, i tried to set the attribute true using Edit Html option but it dint work.
unless i click on the toggle button its not expanding, please let me know how to achieve this
Document.getElementById will already return you an Element object, no need for that 'as ...' that you're doing.
The function .setAttribute is supposed to work in any Element object, so you can fix it by simply doing:
let collapseObject = document.getElementById("collapseid")
collapseObject.setAttribute('aria-expanded', 'true')
Now, if you need to add or remove a class, I recommend using the classList.add() and classList.remove() functions.
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.
I tend to have a lot of these in my code
if(shouldElementBeVisible)
$element.show()
else
$element.hide()
Is there any more elegant way packaged with javascript, jquery, or underscore? Ideally I want something that looks like this
$element.showOrHideDependingOn(shouldElementBeVisible)
Apparently you can just pass a boolean to the toggle function
$element.toggle(shouldElementBeVisible)
Yes there is!
$element.toggle();
Without any parameters, toggle just toggles the elements visibility (I don't mean the visibility property) and depends on the current state of the element.
$element.toggle(display);
If you call toggle with a boolean parameter, element is shown if it is true and hidden if it is false
source
jQuery has toggle: http://api.jquery.com/toggle/
$element.toggle();
This will show the element if it's hidden, and hide it if it's shown.
$element[ shouldElementBeVisible?'show':'hide' ]()
Following is the form with id msform that I want to apply style="display:none" attribute to.
<form id="msform" style="display:none;">
</form>
Also the check should be performed before adding the "style=display:none;" property. That is if it is already set like in above code it should not set again.
But if it's not set then it should.
How should I achieve this? Please help me.
Why not just use $('#msform').hide()? Behind the scene jQuery's hide and show just set display: none or display: block.
hide() will not change the style if already hidden.
based on the comment below, you are removing all style with removeAttr("style"), in which case call hide() immediately after that.
e.g.
$("#msform").removeAttr("style").hide();
The reverse of this is of course show() as in
$("#msform").show();
Or, more interestingly, toggle(), which effective flips between hide() and show() based on the current state.
As an alternative to hide() mentioned in other answers, you can use css() to set the display value explicitly:
$("#msform").css("display","none")
$(document).ready(function(){
var display = $("#msform").css("display");
if(display!="none")
{
$("#msform").attr("style", "display:none");
}
});
You can use the hide and show functions of jquery. Examples
In your case just set $('#msform').hide() or $('#msform').show()
Based on the comment we are removing one property from style attribute.
Here this was not affect, but when more property are used within the style it helpful.
$('#msform').css('display', '')
After this we use
$("#msform").show();
You can just use: $("#msform").hide(). This sets the element to display: none
You can use the jquery attr() method to achieve the setting of teh attribute and the method removeAttr() to delete the attribute for your element msform
As seen in the code
$('#msform').attr('style', 'display:none;');
$('#msform').removeAttr('style');
Please try below code for it :
$('#msform').fadeOut(50);
$('#msform').fadeIn(50);
I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});
This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});
I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});
Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.