Changing Visibility of HTML elements - javascript

I want to change the visibility of HTML elements except some particular elements. I want the elements to be at the same positions and alignments and just the visibility of elements to be changed. Can somebody please help me doing that?
I tried doing the same using jquery by seeing the answer to How to hide all elements except one using jquery? but this changes the positions and alignments of elements.
$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position
I currently have locators to elements like xpaths/CSS Selectors which I don't want to hide.
For e.g. I have this link. And I want to view only at the place it is right now by hiding all other elements.

VISIBILITY USAGE
jQuery
$("#element").css("visibility", "hidden");
CSS
#element {
visibility: hidden;
}
If you want all the others elements than #element to be "invisible":
jQuery
$(":not(#element)").css("visibility", "hidden");
CSS
:not(#element) {
visibility: hidden;
}
ANSWERING YOUR 'AFTER' QUESTION - LET ALL INVISIBLE EXCEPT ONE
If you can't assign an 'invisible' class to the elements that should be invisibile (best solution), you can render visible only one child element in this manner, see JsFiddle.
That mean:
set all 'invisible': $("*").css("visibility", "hidden");
set visible the element you want to show: $("#element").css("visibility", "visible");
In your case the element you would like to show is a little 'nested' and you can do in this manner:
// set all 'invisible'
$("*").css("visibility", "hidden");
// set visible the element with their 'sub-child'
$("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");
Not nice, but it works.
With a html tree complex like this one and without any possibility to assign some custom class. I think that this is the only solution...

Use visibility: hidden;. Unlike display: none; the element will still be there.
Too apply to all elements except one use a style like this:
* {
visibility: hidden;
}
#element {
visibility:visible !important;
}
JSFiddle
Information on visibility.

If you are looking to hide everything but #element then use this:
:not(#element) {
visibility: hidden;
}
See here for more info on the :not() selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
UPDATE
You can also chain :not() selectors together to exclude multiple elements. For example, if you have #element1 and #element2 that should not be hidden from view, then do something like this:
:not(#element1):not(#element2) {
visibility: hidden;
}

You can set up in CSS, where class is the class that's on all the elements you want to hide:
.class {
visibility: hidden;
}
and then
$('#element').css('visibility', 'visible');

use this
jquery
$("#elementid").onclick(function() {
$('body').css({ 'visibility': 'hidden'});
$('#elementid').css({ 'visibility': 'visible'});
});

Related

Hide CSS Element Without Changing Display Property [duplicate]

This question already has answers here:
Equivalent of jQuery .hide() to set visibility: hidden
(6 answers)
Closed 4 years ago.
I would like to keep a element with initial display preserved but that is hidden (at first). I know there are other methods of hiding an element with CSS, however I also don't want the element to take up space at first. As an example
.target_element {
display: table;
}
// event happens later...
$('.loader').hide()
$('.target_element').show()
Is there a way to accomplish this? I don't want to set display to 'none' and then later come back and set it to 'table' in some JS when I want to show it.
There are several ways. Either you can make the element position: absolute or position: fixed so it doesn't take up any room and then use any of visibility: hidden, opacity: 0, etc. One thing you'd need to look out for is that if they don't have display: none, they can still receive click events, so use pointer-events: none to stop that.
My preferred combination:
#myElement {
position: absolute;
opacity: 0;
pointer-events: none;
}
And then when you want to show it:
$("#myElement").css({
'position': 'static',
'opacity': 1,
'pointer-events': 'all'
})
The bonus here is that you can transition the opacity, as opposed to visibility or display.
display:none; is definitely the way to go, unless I'm misunderstanding your question. If your issue is that .show() switches it to display:block; then just use jQuery to add a class to the element instead.
setTimeout(function() {
$('table').addClass('visible');
}, 2000);
table {
display:none;
}
table.visible {
display:table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
How long do you want to hide your element for?
There are various ways to do this, you can set a cookie in your browser or you can use a Javascript function such as setTimeout to display an element after a fixed period of time.
setTimeout( function() {
$("#your_element").show();
}, 5000); // Time in milliseconds
Use a wrapper for hiding and showing your table.
HTML
<div class="target_wrapper">
<div class="target_element"></div>
</div>
CSS
.target_element {
display: table;
}
.target_wrapper {
display: none;
}
JS
$('.target_wrapper').show()
Explanation
.show() sets display: block;. To avoid chanding the property of your table, use a wrapper, that does not depend on that property. It will be simply shown as soon as you trigger $('.target_wrapper').show() and shows up your table correctly.
// styles.css
.e.hidden {
position: 'static',
opacity: 0,
pointer-events: 'all'
}
// main.js
setTimeout(() => {
$('.e').removeClass('hidden')
}, 5000)
// index.html
<div class="e hidden">
...
</div>
How about this?
It sounds like the simplest solution would be to use visibility hidden
.target_element {
visibility: hidden;
}
Based on comments, it seems you don't want to affect your overall layout so this will make the item "invisible" but it will still take up place.

Highlight an element on hover

I want to highlight an element on hover, and only that element.
This should mimic the behaviour of hovering over an element with chrome dev tools when you have the magnifying glass selected.
It's for a chrome extension I'm making.
I think I need a JS solution, as the pseudo :hover in css seems to apply to all elements in the background, i.e. container elements, so I'd need to prevent event bubbling in css, which as far as I can tell you can't do.
I have tried
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(this).addClass("hova");
}).mouseout(function(e) {
$(this).removeClass("hova");
});
-css-
.hova {
background-color: pink;
}
and jquery's hover(), both always selects the container too.
I have also tried with css opacity, incase the background was covered, but it seems it always selects the parent element. I want the furthest child down the DOM that I am hovering over.
I'm sure there's some simple solution out there, maybe its over complicating as its in a chrome extension... I'm not sure
Is this what you need? http://jsbin.com/vidojamece/1/
Instead of adding the class to $(this) inside the handler, add the class to e.target (span) and return false so it doesn't bubble up to the div:
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
return false;
}).mouseout(function(e) {
$(this).removeClass("hova");
});
You need to use the target element instead of 'this', which is the actual element that you hover over and use stopPropagation in order to not repeat the process for each element behind:
$('body').children().mouseover(function(e){
e.stopPropagation();
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
}).mouseout(function(e) {
$(e.target).removeClass("hova");
});
You can do this with css (and js too):
*:hover {
background-color: pink;
}
or even
div:hover {
background-color: pink;
}
In js:
$('body').children().each(function() {
$(this).hover(function() {
$(".hova").removeClass("hova");
$(this).addClass("hova");
}, function() {
$(this).removeClass("hova");
});
});

Changing visibility property

I have a div which has a class name myClass and id name myId. The div has following style.
.myClass {
height: 74%;
margin-top: -1px;
position: relative;
overflow-y: auto;
width: 100%;
overflow-x: hidden;
visibility: hidden;
}
When i try to change visibility from hidden to visible doing this
$('#myId').css({ 'visibility': 'visible' });
I am using id in JQuery instead of class because same class is applied to others elements too. My div is still not visible. What am I doing wrong?
Yes you can do this by the following ways
$('#myId').css('display','block');
$('#myId').css('display','inline');
$('#myId').show();
Why do not you try :
$('#myId').css('display', 'block');
or Try:
<style>
.visible { display:block !important;}
</style>
$('#myId').addClass('visible');
Replace your visibility: hidden; to display: none;
then update jQuery
$('#myId').css('display','block');
in css the visibility property effects to content inside the tag while display property effects to total tag, that means if you apply display:none; it will remove entire tag but visibility:hidden hide the content inside that tag.
Since :visible is a jQuery selector you can use opacity instead of visibility to hide the content inside the tag.
$('#myId').css('opacity','1');
$('#myId').css('opacity','0');
if you need to hide the entire tag, better go with display none
just go simple, there is an api available in jquery for hiding and showing up DOM elements. Try as follows
$('#myId').hide(); // for hiding the element
$('#myId').show(); // to show up the element

Fading In and out inline div's without changing the position?

The question might be a little bit confusing.
I have an inline div and the first one is meant to be a close/delete button. I'm trying to fadeIn the close button on hover, although when it's faded out the rest div's move to the left.
How would you prevent this?
Here is a fiddle: http://jsfiddle.net/x2SEv/
Hover on top of 'Some text goes here'
jQuery functions .show() and .hide(), use the CSS attribute display.
When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.
You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.
Let's try :
In your JS :
$(".todo").mouseover(function() {
$('.closebtn').css("visibility", "visible");
});
$(".todo").mouseout(function() {
$('.closebtn').css("visibility", "hidden");
});
And your CSS :
.closebtn, .actions{visibility:hidden;}
You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .
.parent {
position: relative;
padding-left: 40px;
}
.div-to-fade {
display:none;
position: absolute;
left:0; top:0;
}

Show and Hide a DIV with CSS or Javascript?

I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}

Categories