This question already has answers here:
Equivalent of jQuery .hide() to set visibility: hidden
(6 answers)
Closed 8 years ago.
Is there any thing similar to the css property and value visibility: hidden in jQuery? The hide function doesn't maintain the space.
If you want the same effect as visiblity: hidden, then use that.
$('some selector').css('visibility', 'hidden');
Or set the opacity to zero, if you're looking for something that you can animate:
$('some selector').animate({'opacity': 0}, 1000);
JQuery is nothing more than a Javascript library, so if you know a way to do something with pure JS, then just do it. You don't have to rely on JQuery to do it. Both JS and JQuery have a way to get a DOM element and change its style attributes. Since Matt provided a JQuery answer, here is how it is done with pure Javascipt:
document.getElementById("id").style.visibility = "hidden";
Related
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 5 years ago.
I made this function to "split" my elements and give them background-colors:
var colors = ['red','yellow','green','blue'];
function splitColors($item) {
$item.each(function(i) {
$(this).addClass(colors[i % 4]);
});
}
splitColors($('.comment:before'));
now I want to apply this function on a before element in my DOM, but it doesn't work.
Can I access the ::before element in jQuery?
I can't use a real element, cause the WordPress comment section don't allow own markup..
Thanks!
I think this works:
splitColors($('.comment').before());
This question already has answers here:
Overriding !important style
(11 answers)
Closed 8 years ago.
I have an HTML element that looks like this:
<p style="font:12px verdana !important;margin:20px !important;">…</p>
Now at some point I need to edit the margin attribute through Javascript. The code looks something like this:
document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.margin='0'
document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.marginLeft = '150px'
However, this isn't working. After I check the value of 'margin' and 'marginLeft' before and after the code, the values remain the same. If I use Google developer tools and manually change the Javascript then the issue is resolved. Can anyone tell me why the code above is not changing the value of the style? I also tried using setAttribute but that did not work either.
You can try this with jquery:
$('selector').css('cssText','font:12px verdana !important;margin-left:150px !important;');
making of this way, it overrides your inline style, so be careful if you modify your style dinamically
You can use jquery for this its very easy:
$( ".selector" ).css( "background-color","#fff" );
OR you can access your element in this way
var elements = $( "body" ).find("div");
var p = elements[3].find("p");
$p[0].css("margin","0px");
$p[0].css("margin-left","150px");
if you don't want to use jQuery then you first check that you are accessing/selecting the right div and p tag you can alert the length of elements found and check is 3rd element have the one which you want to update?
This question already has answers here:
Changing CSS Values with Javascript
(9 answers)
Closed 8 years ago.
I'm looking for help regarding how to edit an object's style in a separate CSS file via JS. For example, if I have an object that I style with #objectid {left: 0%;} in my CSS file, how would I go about changing that left property via JavaScript? I'm aware you can do object.style.property but that hasn't been working for me as of late. What's the most efficient/easy method of doing this? Thanks in advance.
You have to get the element in the DOM
with pure javascript:
document.getElementById('objectid').style.left = '20%'
With jQuery
$('#objectid').css('left', '20%');
or
$('#objectid').css({'left': '20%'});
The standard way:
document.getElementById('objectid').style.left = "10%";
But if you're worried about efficiency, try not to modify any styles directly using JS... try adding/removing classes instead.
This is correct:
document.getElementById('thing').style.left="5px"
But I believe you need to set the position before it can work, e.g.:
document.getElementById('thing').style.position="absolute";
document.getElementById('thing').style.left="5px"
This question already has answers here:
How to change label text?
(3 answers)
Closed 8 years ago.
I'm trying to set the value of label using Jquery. I've tried .HTML(), .Val(), and .innerHTML but nothing seems to work. Any help would be appreciated.
JavaScript
$("#txtObjective").val(responseData[0].objective);
HTML
<label class="puma_Label" id="txtObjective"></label>
Use textContent (.text() in jQuery). Only input elements have a value property.
$("#txtObjective").text(responseData[0].objective);
Mandatory vanilla explanation:
document.getElementById("txtObjective").textContent = responseData[0].objective;
As for the html options -- those are simply bad practice to use here. Unless you're rendering HTML, never use innerHTML or html().
This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
There is a great method in jquery called wrap() that will wrap a selected element inside a new element, like so:
Start with:
<p>I wish I was wrapped!</p>
Add code:
$("p").wrap("<div></div>");
End with:
<div><p>I wish I was wrapped!</p></div>
But what I need is something that will unwrap, so that the above process is reversed. It seems that the issue is that when you select a bad item (let's say an unnecessary table) that it always grabs what is inside it as well, so if I want to remove all <td>s, I am left with nothing, since that removed the td and anything inside.
Is there a standard reliable way of removing elements but leaving any children/ancestors alone?
In JQuery 1.4 unwrap() was added:
http://api.jquery.com/unwrap/
A quick Google search reveals that there is such functionality, in the form of a small 576 byte plugin called jqueryunwrap. I have not tried it personally, but it is worth a shot. ;)
$("p").unwrap() will unwrap the wrapping div....................I hope this helps