jquery slide effect, hide one div and show another - javascript

I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.
I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?
code:
$("#slide2").on('click', function(){
$( "#blueDiv" ).effect( "slide", hideoptions, 1000);
$( "#redDiv" ).effect( "slide", showoptions, 1000);
});

You can use position: absolute to take them out of the flow and place them beside each other:
div > div
{
position: absolute;
}
If you want to make it more specific to this div, you can use a specific selector:
#contentWrapper div
{
position: absolute;
}
JSFiddle

http://jsfiddle.net/ggfA6/12
position: absolute
Both elements need to be absolutely positioned so that they don't occupy space in the flow.

Related

Hiding a <div> and showing a new one in the same spot?

Lets say I have 2 divs, one is hidden, the other is showing. When a button is clicked, I want to use the jQuery fade effect to fade out one div and fade in the hidden div.
So -
<div id="part1">Hello</div>
<div id="part2" style="display: none">Hello2!</div>
<button id="btn1">Click here!</button>
and the JS -
$("#btn1").on("click", function(){
$("#part1").fadeToggle();
$("#part2").fadeToggle();
});
Now, this works, but as you can imagine what happens is that it first hides the 1st div, then shows the second div, and then immediately takes the second div up to the place where the previous div was located.
What can I do about this? I want them to stay in the same position (something like they have here http://kenwheeler.github.io/slick/ in their fade demo.)
Thanks!
You can do it with jQuery. Fade out the first div and fade in the second one in the callback. Like this: http://jsfiddle.net/D2Cw9/
$(".one").fadeOut(500, function() {
$(".two").fadeIn(500, function() {
});
});
One solution would be using absolute positioning on both divs relative to their container.
#parts-container {
position: relative;
}
#part1, #part2 {
position: absolute;
left: 0;
top: 0;
}
Use css position absolute to set them to the same position.
At the time of writing, you have 4 answers that all seem to be correct solutions using CSS positioning. I noticed you have jQuery as a tag, so I thought I'd offer up a different solution.
Have you thought about not actually hiding the div, and replacing it with the other? For example, you could change the CSS class of the div with jQuery:
$('#part1').fadeOut(300, function() {
$('#part1').addClass('part2');
$('#part1').innerHTML('Hello2!');
$('#part1').fadeIn(300, function(){});
});
Of course you should use a synchronous fade to make sure the class change happens while the div is hidden.
It seems that a lot of people answered this question correctly. I would like to add that you can also keep the div and just set the css opacity to 0 using the jQuery UI color animation.
I believe this is yet another option.
Try adding position absolute to both of them and wrapping them in a relative div

Align slideToggle boxes to bottom of parent div

I have the follwing so far: jsFiddle
Just a small script that pops out list elements
$(function() {
$("li.content").hide();
$("ul.nav").delegate("li.toggle", "click", function() {
$(this).next().slideToggle("fast").siblings(".content").slideUp("fast");
});
});
I am trying to figure out how I can align the box that slides out when you click "about" to the bottom of the outer div as it is with the "contact" box. Contact should also stay pinned to the bottom as well.
Can I achieve this without having to modify the javascript purely by changing the css, or do I have to make different toggle functions for both boxes?
Thank you all, much appreciated.
All you have to do is add this to your .content.
jsFiddle
.content {
position: absolute;
bottom: 0;
}

jquery slide down effect - without moving inner contents

I am trying to achieve a simple slide up/down effect similar to the 'more' link on www.bbc.co.uk
YOu can see that the inner contents do not move up and down, instead it is like a screen is being pulled over them.
Using jquery slideUp slideDown does not achieve this, instead the whole div is moved up and down so the text looks like it moves.
How can a similar effect be achieved using jquery?
Just put your sliding div between the menu and the content:
<div id="menu">Menu example. Click here!</div>
<div id="slide">Whoa! sliding div<br>See how it moves the content down</div>
<div>Content here</div>
See fiddle: http://jsfiddle.net/2hZme/1/
slideUp/slideDown uses the top position when it animates, when you want to use the height. So I'd suggest to animate it manually:
// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();
// Set the height to 0
panel.height('0px');
// Animate it to its initial size
$('a').click(function() {
$('#panel').animate({'height' : panelHeight});
});
... and of course the CSS:
#panel {
overflow: hidden;
height: 300px; /* or whatever */
}
Fiddle: http://jsfiddle.net/3fsQr/

How to move an entire div element up x pixels?

I want to reposition an entire div and its contents up about 10-15 pixels.
How can I do this?
Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.
$('#div_id').css({marginTop: '-=15px'});
This will alter the css for the element with the id "div_id"
To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):
$('#div_id').animate({...}, function () {
$('#div_id').css({marginTop: '-=15px'});
});
And of course you could animate the change in margin like so:
$('#div_id').animate({marginTop: '-=15px'});
Here are the docs for .css() in jQuery: http://api.jquery.com/css/
And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/
$('div').css({
position: 'relative',
top: '-15px'
});
In css add this to the element:
margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */
you can use either one to position accordingly.
you can also do this
margin-top:-30px;
min-height:40px;
this "help" to stop the div yanking everything up a bit.

jQuery: hide div on hover, stay visible on click

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.
When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.
When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).
I thought this would be straightforward, but I can't get it to work.
with a little knowledge of your html, here's how I got it.
html
button
<div class="mydiv">some text in it.</div>
jQuery
$('.mydiv').addClass('hover').click(function(){
$(this).addClass('hover').fadeOut();
});
$('a.mybutton').click(function() {
$('.mydiv').toggleClass('hover').show();
// $('.mydiv').removeClass('hover').show();
}).hover(function() {
$('.mydiv.hover').fadeIn();
}, function() {
$('.mydiv.hover').fadeOut();
});
Crazy demo

Categories

Resources