Removing float:none from CSS class - javascript

Using Google Chrome Developer Tools I uncheck "float:none;" from the Styles inspector and my DOM element lines up properly. A OK! However, if try to use jQuery to remove the style via $('#div_appointment_time_picker').removeAttr('float'); or $('#div_appointment_time_picker').removeProperty('float'); respectively (removeAttr and removeProperty) neither of which seem to work. So, basically, how can I programmatically "re-create" what occurs in Google Chrome by unchecking the property in the Style inspector (see img below)

You can use .css() to change css attributes:
$('#div_appointment_time_picker').css("float", "none");
or to edit multiple properties you can use:
$('#div_appointment_time_picker').css({"float" : "none", "another-rule": "value"});

Float isn't an attribute or property of the element like width or ID is, it's a style property, so you'd have to use $('#div_appointment_time_picker').css('float','none');

$('#div_appointment_time_picker').css('float', 'you are a wizard harry');

Use jQuery method .css();
It works like .css(property, value) or .css({property: value})
For example, in your case it would be:
$('#div_appointment_time_picker').css('float', 'initial'); // or 'none'
Read more about float: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Related

Attempting to change CSS using document.getElementById not working?

I'm attempting to change the CSS of a display:none to a display:block using the following command:
document.getElementById["pop-up"].style.display="block";
The problem is, despite defining the pop-up id in the css (see below), and following other instructions similar to this problem, I've not been able to get it to change.
#pop-up {
display: none;
}
What am I doing wrong?
getElementById is a function (not an object where every element with an ID exists as a property).
You need to call it with () and not access properties with []
Make sure you open the Developer Tools in your browser and read the console. It would have told you that document.getElementById["pop-up"] was undefined.
Try replacing the square brackets with parentheses;
document.getElementById("pop-up").style.display="block";

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.

JQuery - show/hide style attribute overriding css

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).

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");

opacity and style undefined when accesing element in js but defined in css

With this fiddle http://jsfiddle.net/mungbeans/f2ne6/2/
why is the opacity undefined when accessed in js when its defined in the css?
I presume the answer is because the style is also undefined, why is that, does the style need adding somewhere explicitly before the opacity can be defined?
EDIT
the lack of [] is a typo created as I copied from source to fiddle. The style/opacity problem still exits in the original code which is correct in that aspect.
title.style.opacity
should be:
title[0].style.opacity
since getElementsByTagName returns a nodeList.
EDIT:
This still doesn't get the value. You'll need to do the following:
window.getComputedStyle(title[0]).opacity
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle?redirectlocale=en-US&redirectslug=DOM%3Awindow.getComputedStyle
DEMO: http://jsfiddle.net/f2ne6/12/
For two reasons:
getElementsByTagName() returns a list of elements, not a single element as getElementById(). Thus, you need to subscript the resulting NodeList to get the required DOM element;
Most importantly, when you access the styles through the style property of the element, you'll only get the inline styles, not the ones that you assign through a CSS class.
To get the computed styles, you could use window.getComputedStyle(), which will give you the final used values of all the CSS properties of the element:
alert(window.getComputedStyle(title).opacity);
DEMO.
Unfortunately, getComputedStyle is not available in IE < 9, but you can easily find a polyfill, such as this one.
It's because the style property of an HTML element (in the DOM) does not contain the computed style, it contains the immediately defined style of the element. Consider the following HTML:
<div id="one" style="width: 50px;"></div>
If you call document.getElementById("one").style.width, you'll get "50px" back. However, if you remove the style attribute and instead use CSS to style the div to have a width of 50 pixels, it will return "". You can see this in action here:
http://jsfiddle.net/aAbJY/
You're probably looking for the computed style, which can be obtained in most browsers using getComputedStyle(). It doesn't work in IE until IE9, though there's probably a way to do it in IE<9. The computed style will return the opacity no matter where it's defined. See an updated example with getComputedStyle() here:
http://jsfiddle.net/aAbJY/1/
Chase is correct, but there's another problem in your code. The style property only contains styles that were set with the style attribute of the element, so Chase's solution will only go halfway to fixing your problem. What you want to do is use the getComputedStyle() function to get the runtime style of your element:
function test(id) {
var listElement = document.getElementById(id);
var titles = listElement.getElementsByTagName("div");
var style = getComputedStyle(titles[0]);
alert( "Opacity: " + style.opacity );
}
See my updated jsfiddle here: http://jsfiddle.net/7vQ4A/1/

Categories