Let's say we have:
<div id="view-item-hero-info">
<h2>{{name}}</h2>
<h4>{{location}}</h4>
<h3>
<span id="view-item-hero-header-score">
You scored {{userScore}}pts
</span>
</h3>
{{description}}
</div>
Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?
Note: I don't want to hide the element, just everything inside it.
Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.
You can try:
#view-item-hero-info {
color: transparent;
}
Using this CSS:
visibility: hidden;
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
display: none;
you can use this code if u need hide text
.text-hidden{
font-size: 0;
text-indent: -9999px;
}
to hide all direct child's
use
.hidden-nested > *{
visibility: hidden; /*or next line */
display:none ;
}
if you need all child's use last code but change class to
.hidden-nested *
Use css display property. In HTML this would look like <span style="display: none">
Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"
in css:
#view-item-hero-header-score {
display: none;
}
Using CSS you can set a style:
visibility:hidden
So to hide all descendants (*) within your element:
#view-item-hero-info * { visibility: hidden }
If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)
Rather than selecting all (*) you can select particular descendants eg divs:
#view-item-hero-info div { visibility: hidden }
Equally instead of the visibility you can use:
display:none
The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option
EDIT:
There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.
As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.
Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:
var items_i_want = document.getElementById("view-item-hero-header-score").elements
for(var i = 0; i < items_i_want .length; i++)
{
items_i_want [i].style.display="none"
}
Related
So I always thought if the parent container has a property set, it supercedes the child. So in my case I want the parent container to be hidden, but the child elements have a visibility of visible. But it seems the child elements visibility property supercedes the parents and thus will still show.
But the twist is if using display property, it works the way I want. Here is the html:
<div class="wrap">
title
</div>
<div class="wrap2">
title2
</div>
CSS:
.wrap { visibility:hidden; }
.wrap a { visibility:visible; }
.wrap2 { display:none; }
.wrap2 a { display:block; }
http://jsfiddle.net/yPXtB/
So what I want is the ability to hide the container if I set the visibility to hidden even if the child elements have visible.
Another workaround is to use opacity with values 0 and 1 instead of visibility.
(Though check out http://caniuse.com/#search=opacity for compatibility with too old browsers if it's important)
If you need the child css to have visibility: visible, then you can't simply set the parent to hidden, because parent doesn't override the child.
You'd need to either set each individual child to hidden as well, or wrap the children again in another div with visibility: visible, and toggle that to hidden instead of the parent, i.e.:
<div class="hiddenwrap">
<div class="visiblewrap"> /* toggle this instead */
/* content without visibility properties */
</div>
</div>
.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }
visibility: hidden causes the element not to be drawn, but it is still there and even the space it occupies stays occupied. The flow of the page isn't affected. Therefor it is possible to still draw the child in that space.
The child does use the parent's visibility if you don't specify it explicitly, as you can see here: http://jsfiddle.net/yPXtB/2/
display: none not only hides the element, but removes it from the flow of the page as well. Display affects the way the element behaves and changes the flow. There is no more space to draw the child in.
I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element
I am having trouble with elements inside an updatepanel losing their styles when the updatepanel refreshes. I know this isn't a new question and have already read the following threads
Someguys Blog on it
And another thread on it
And the possible work-arounds include: surround the update panel with a div, surround the update panel with a div.
This doesn't really work in my case because I have several elements inside my update panel but I want to only apply the style to two elements inside it and this method makes every element inside the update panel reflect the styles.
Any suggestions would be appreciated
-J
You can use a class on a surrounding div to control the style on elements inside the div. Put classes on some elements inside to identify them, and change the class on the surrounding div to trigger the change.
Example:
<div id="container" class="hide">
This is the content that can change
<div class="someelement">asf</div>
<div>qwer</div>
<div class="otherelement">uyhgf</div>
</div>
You can change the class on the outer div:
document.getElementById('container').className = 'show';
Now you can set up CSS rules to show changes on the inner elements depending on the outer class:
.hide .someelement { display: none; }
.show .someelement { display: block; }
.hide .otherelement { color: yellow; }
.show .otherelement { color: black; }
When the timer replaces the content the inner elements will still look the same, as the class controlling the appearence is on the outer div.
I'd like to affect multiple divs on a single :hover. For instance, two divs floated left and right of each other. When a :hover statement over one of them is activated (or, probably over a parent div) I would like for both of them to change width, color, opacity, etc.
<div id='maincontainer'>
<div id='mainleft'>
Left div that shrinks on maincontainer:hover
</div>
<div id='mainright'>
Right div that grows on maincontainer:hover
</div>
</div>
Do I need a container div for this? Is this even possible in CSS alone?
simply use
#maincontainer:hover #mainleft { ... }
#maincontainer:hover #mainright { ... }
and change your css properly. This will work everywhere except IE<7 which allows hover only for <a> elements
You could also think to trigger a CSS transition on newer browser so the size of inner divs change gradually.
By using this css it would be possible
#maincontainer:hover #mainleft{
width: 100px;
}
#maincontainer:hover #mainright{
width: 200px;
}
this is how u can do it with javascript
i prefer javascript because older browser restrict hover only to anchor tags
document.getElementById("maincontainer").onmouseover = func;
function func(event){
document.getElementById("mainleft").style.width = newwidth + px;
document.getElementById("mainright").style.width = newwidth + px;
}
try this to apply css for both:
#maincontainer > div:hover { *your css* }
#maincontainer:hover #mainleft css selector will match mainleft div when the maincontainer is hovered.
I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.