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}
Related
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
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.
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/
UPDATE:
The parent div (#container) must have a fixed height. I jsut want to shift the content in it so the active div is at the top and all overflow is hidden.
I am working on a webpage where a parent div has a fix size and will have several child divs in it. Each of these child divs will have an anchor tag that is always visible and it's own child div that will only be shown when it's sibling anchor tag is clicked.
I have this much working but I am running into the issue that when the sibling div is shown it sometimes goes out of the parent div and it's content is hidden. I would like to have the contents of this div repositioned to the top of the parent div so that it's content is never hidden. How would I accomplish this using jQuery?
You can see what I'm talking about by clicking Item2 in this Fiddle: http://jsfiddle.net/Broham/LA22t/1/
Html:
<div id="container">
<div class="item">
Item1
<div class="desc">A bunch of stuff about item 1!</div>
</div>
<div class="item">
Item2
<div class="desc">
A bunch of stuff about item 2!<br/>More stuff for item 2!<br/>last item 2 thing
</div>
</div>
<div class="item">
Item3
<div class="desc">
A bunch of stuff about item 3!<br/>More stuff for item 3
</div>
</div>
</div>
css:
.desc
{
display:none;
}
#container
{
height:75px;
overflow:hidden;
border-style:solid;
border-width:1px;
}
jQuery:
$(".item a").click(function () {
$(this).siblings(".desc").animate({ height: 'toggle' });
});
What I have tried so far:
http://jsfiddle.net/Broham/LA22t/3/
But this only moves the active div, what I need to do is shift all of the content up and hide the overflow...
You have two options.
You can either hid all of the div above it (thus making it appear at the top), or you can float the div over the top of the other elements, which sounds more like what you want. However, floating it to the top is difficult, and requires different methods in different browsers, so the easiest way for you is just to set all the other items to display:none, and then display:block again when you click to close the one you are viewing.
Here, this does what you want:
$(".item a").click(function () {
if(!this.opvar)this.opvar=false;
$(this).siblings(".desc").animate({ height: 'toggle' });
if(!this.opvar)$(this).parent().siblings(".item").css('display','none');
else $(this).parent().siblings(".item").css('display','block');
this.opvar = !this.opvar;
});
Just a crude example though, there are better ways to do it.
Wrap everything inside the container div in another div (e.g. wrapper) and then animate the position (top) of this wrapper div to achieve desired result.
HTML
<div id="container">
<div id="wrapper">
<div class="item">
.........
</div>
</div>
CSS
#wrapper{
height:100%;
position:relative;
}
JS
$(".item a").click(function () {
$(this).siblings(".desc").animate({ height: 'toggle' });
$("#wrapper").animate({top:-1*$(this).position().top},"slow");
});
Something like this might help you getting started:
http://jsfiddle.net/sethi/zfdmC/2/
this should do the trick,
but you probably want to close the inactive headers also
$(".item a").click(function () {
var a= $(this).parent();
$(this).parent().remove();
$("#container > div.item").first().before(a);
$('.removeMe').remove();
$(this).siblings(".desc").animate({ height: 'toggle' });
});
http://jsfiddle.net/LA22t/2/
Just removed height .
The trick is to actually move the elements in the DOM. Use .prependTo("#container"):
http://jsfiddle.net/LA22t/7/
$(".item a").click(function() {
$(".desc").hide();
$(this).parent().prependTo("#container").find(".desc").animate({height:"show"});
});