I am bit confused to achieve following thing
1. disable visibility of one parent div
2. but child div visibility are allowed by another code
<div style="background-color:#999 ; height:80px;visibility:hidden">
<div style="background-color:#550; height:30px;"></div>
<div style="background-color:#900; height:30px;visibility:visible"></div>
</div>
http://jsfiddle.net/cbXxU/
I want to hide all the child div if parent div is not visible or any suggestion for this.
Set display: none for parent element. To make it visible use display: block.
DEMO: http://jsfiddle.net/cbXxU/1/
Related
Is there some way I can prevent a child div from contributing to its parent div's scrolling? I want the parent div to scroll on overflow, but there is only one child element I don't want that to apply to.
<div style="height:200px; overflow-y:scroll;">
<div style="height:900px;" /> // don't cause parent to scroll on overflow
</div>
I basically want the overflow-y:hidden; functionality, but only for a certain child element.
I have a container with overflow hidden and an element inside which is a select made with li's with absolute position but it is too long for the parent container, so I want this element to go out of the container, but the overflow hidden (the parent container has many other elements and it has horizontal scroll) doesn't allow this one to go out.
Below is the screenshot of this:
Set the width (not "auto") to your child container
<div id="pCont" style="overflow:auto; height: 200px; width: 200px;">
<div id="cCont" style="overflow:hidden; width: 200px;">
<ul>
<li>
</li>
</ul>
</div>
</div>
What you see is the expected behavior for an absolute positioned child of an element whose overflow is hidden. The only way around this is to make your fake select box dropdown a child of the <body> element, and position it by the fake select box, which breaks some of the HTML semantics.
The bigger question is, why do you need the overflow hidden to begin with? If removing overflow: hidden on the parent breaks something, that becomes the problem to solve. Otherwise, the answer to your current question is:
Overflow and absolute positioning is behaving as designed
I have div that is like this
<div style: "display:none;">
<div class="displayMe">
</div>
</div>
I need to how to make the div displayMe show while keeping the parent Div hidden
you can use this:
//this class for parent div
.hide {visibility: hidden;}
//this class to the child div
.reshow {visibility: visible;}
It's not totally clear, where exactly you want to show the visible part of the hidden parent. Here's a pure CSS solution, which more or less replaces the parent with a child on screen.
As you can see, there's a drawback in this solution concerning the rest of the content on the page. However, setting display:none removes the hidden element taken space from the textflow, hence this is probably exactly what would happen, if it was possible to show elements inside none-displayed elements.
#wrapper {
position: relative;
height: 0px;
visibility: hidden;
}
#content {
position: absolute;
top: 0px;
visibility: visible;
}
<div id="wrapper">
Text in the wrapper<br/>
more text ...<br/>
... and one more line.
<div id="content">Some visible content</div>
This text is below the visible
</div>
<div>This is outside of invisible</div>
No, this is not possible. You could instead move/clone the child element and insert it somewhere else in the markup (e.g. via JavaScript).
var element = jQuery('.Inner-Div').clone();
and then append to any visible element that be appropriate.
element.appendTo('some element');
Example http://jsfiddle.net/xmo9bpot/
EDIT
Another clever way would be to hide all siblings of the chosen child element and in fact leave the parent visible
DEMO http://jsfiddle.net/xmo9bpot/1/
$(".child").siblings().hide();
No this is not possible, as container should be visible when you want to display its child,
explain your scenario so much relevant solution can be provided, or you can try following
If you have multiple divs inside parent div, and you want to display any one child div at a time using jquery/javscript, then you can arrange your divs as
<div>
<div id="div1" style="display:none;">
</div>
<div id="divq" style="display:none;>
</div>
<div id="div3" style="display:none;>
</div>
</div>
then write your javascript / jquery code as
if (YourCondition == 1)
{
$('#div1').show();
}
else if (YourCondition == 2)
{
$('#div2').show();
}
if (YourCondition == 3)
{
$('#div3').show();
}
Cheers !
.displayMe{display:block !important}
Structure:
<div id="content">
<div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
<br />
some text
</div>
After the document loads, I have a js script that looks up all elements with "ParentCollapser" and attatches click driven functions to them that allow the user to collapse the parent when clicked (sets height to 0 right now).
The clicking action works great except for some styling issues - .FancyTitle is defined as such:
.FancyTitle{
margin-left:-40px;
margin-right:-40px;
margin-top:-20px;
margin-bottom:10px;
}
So basically it reaches outside the parent container by 20px on left/top/right. To hide the content, when collapsed i had to set the #content overflow:hidden but that also hides the parts of #contentTitle that reach outside and that looks like poo.
Is there any kind of exception that I can define for the title so it wouldn't be hidden no matter what? Other option would be to make structure alterations but I'd like to avoid that if possible since right now its super easy to use.
You could try fiddling with the negation CSS pseudo class not() with an appropriate selector. Example:
#content:not(#contentTitle) {
overflow:hidden;
}
CSS negation pseudo class
Just be mindful of browser compatibility.
Since the title should be shown all time there is no idea to hide it's parent. Therefore I added a child with the content in.
HTML
<div style="padding:100px;background:gray">
<div id="content" style="background:blue">
<div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
<div class="contentChild">some text</div>
</div>
</div>
Now we hide the contentChild with js
JavaScript
this.Collapse = function() {
this.parent.querySelector("div.contentChild").style.display = "none";
this.collapsed = true;
};
this.UnCollapse = function() {
this.parent.querySelector("div.contentChild").style.display = "block";
this.collapsed = false;
};
Demo
I have a nested div with text. Text overflows from child to parent div by design.
<div style="position:absolute;width:300px;background:yellow">
<div style="position:relative;height:20px;width:150px;left:0;
background:red;overflow:visible;white-space:nowrap">
this text will overflow into the parent div!
</div>
</div>
My question : Is there a way to change color of the text starting at the border of the child inside the parent div with css? Right now color is the same as text overflows to the parent div.
Kind of cheating, but this would work:
<div style="position:absolute;width:300px;background:yellow">
<div style="position: absolute; top: 0; color: pink;">
this text will overflow into the parent div!
</div>
<div style="position:relative;height:20px;width:150px;left:0;
background:red;overflow:hidden;white-space:nowrap">
this text will overflow into the parent div!
</div>
</div>
Proof: http://jsfiddle.net/8m6v2/
http://jsfiddle.net/JpSEv/
<div style="position:absolute;width:300px;background:yellow;color:red">
this text will overflow into the parent div!
<div style="position:absolute;top:0;height:20px;width:150px;left:0;
background:red;overflow:hidden;white-space:nowrap;color:yellow">
this text will overflow into the parent div!
</div>
</div>
:)
Try wrapping it with a span tag and styling it that way.
I don't believe this is possible, since the text is a child of the inner div, the color of the inner div will take precedence.
A solution is to split the text across two elements and manually coloring each, although I concede that is not a nice solution.
The only way I can think of accomplishing this would be to place a partially transparent div over the part of the parent which is not part of the child. This will however also mess with the background-color of the parent and not allow you to select the text underneath the transparent div.