Moving content inside of a div? - javascript

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"});
});

Related

Display div while parent is display None

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}

Can I hide a parent div when I hover on it's child div element?

Is there a way to hide a parent div when I hover over a div inside it.
<div class="parent" style="width:500px; height:800px;">
<div class="child" style="width:250px; height:250px; margin:250px auto 0 auto;">
</div>
</div>
I want to hover on the child to make it disappear both the parent and child div elements.
If there is a way even with jquery / javascript then please let me know.
I have 4 parent div and their respective child div and when I hover on another parent div then the hidden div re-appears.
You can use mouseenter event, then hide the closest parent like this
$('.child').on('mouseenter',function(){
$(this).closest('.parent').hide();
});
DEMO
$('.child').on('mouseover',function(){
$(this).parent().hide();
});
$('.child').hover(function(){
$(this).parent().hide();
},
function(){
$(this).parent().show();
});
Demo:
http://jsfiddle.net/JsmVm/
For that you can use jquery hover.
$('.child').hover(function(){
$(this).parent().hide();
});
DEMO
Note: hover function can handle both mouseover and mouseenter and it is best to handle UI element.For example: Fiddle

jQuery: horizontal scroll to div

What I'm aiming to achieve in the end in something similar to the bbc site: http://www.bbc.co.uk with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:
jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/
HTML:
<div class="wrapper">
<div class="container">
<div class="contentContainer red"></div>
<div class="contentContainer blue"></div>
<div class="contentContainer orange"></div>
</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
jQuery:
$(document).ready(function () {
$('.right').click(function () {
$('.container').animate({
'left': '-100%'
});
});
$('.left').click(function () {
$('.container').animate({
'left': '0%'
});
});
});
Firstly I don't know if it's possible to stack the .contentContainer divs next to each other without having to set a 300% width on the .container div. As the site is going to be CMS I don't want to keep changing the width of the .container div to suit. There will only ever be one .contentContainer div in view at one time too, thus I've set the overflow to hidden.
I can't seem to figure out a nice scroll function too, the one I have currently only scrolls the .container div once by 100%, ideally I'd want this to work more like a slideshow, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!
I have updated your JSFiddle . With the code below you can count how many elements you got inside your slider and thereafter set the % width automatically.
var length = $('div .container').children('div .contentContainer').length;
$(".container").width(length*100 +'%');

Setting Div position up on another content

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.

jQuery animate div size

I have a div with hidden visibility, and I'm putting text in to that div from database so don't know it's height.
What I would like to do is make an animation which would increase that div's size until all text is visible. What I have so far is this:
function display_form () {
$("#form_container").css("visibility", 'visible');
$("#form_container").animate({
height: $("#form_container").height(),
}, 1500);
}
<div id="container">
<div id="form_container"><?php echo $form; ?></div>
<div id="content">
some stuff here which should slide down as the form_container div gets bigger
</div>
</div>
So my problem is that my form_container is hidden, but its size remains, so I have huge empty space. If I set its size to 0px then I have no way of knowing its real size...
I don't think you need to mess with the visible CSS property.
Just do something like this in your CSS:
#form_container { display: none; }
Then your display_form function can just do this:
function display_form() {
$('#form_container').slideDown(1500);
}
Have a look at the jQuery's slideDown. Then you don't have to worry about the height on your own.
Not sure how you are getting text from the database but if you initial have the div hidden, then place the text in the div, then you can simple use the slideDown(1000) function on that div like so:
$('#mydiv').slideDown(1000);
The div will slide down until all the content is shown.

Categories