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

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

Related

jQuery - slide down panel

I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor

How to add a class to a div, make it wait a while, and then add another class to another div?

So far I can apply a class to one div but I want it to then add another class to another div to make that show and fade in down.
http://www.penguinie.co.uk/test/
I want the first page to fade out and the about page fade in (or the projects or contact page).
<li>About</li>
That is what I used to make the main page fade out. The class hidden is used to hide the about page until the user clicks on the about link.
.hidden {
display: none;
}
.show {
display: inline;
}
You can do this with built-in jQuery methods fadeIn and fadeOut.
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
})
This way, #about will fade in right after #start fades out. If you want different a different animation, you can use the animate method to specify your animation.
You can also use the setTimeout method but as far as I can see, you want one div to disappear and the other div to appear right after. I think chaining two animations would be the better option in this case.
Also, #pszaba is right. You shouldn't use onclick attributes. You should use event handlers like the click handler like this:
$("#about").click(function(){
$('#start').fadeOut(500, function(){
$('#about').fadeIn(500);
});
});
(This code actually doesn't make sense since the #about element is invisible so it cannot be clicked :) Just use it as a reference for your own implementation.)
I think you're looking for setTimeout() function :
$('#start').addClass('fadeOutUp');
setTimeout(function() {
// executed after 2 seconds
$('#about').addClass('animated fadeInDown');
}, 2000);
EDIT: but about fadeIn / fadeOut, you can also take a look on $("selector").fadeIn("slow", function(){ /* callback here */ });

How to make an underlaying element unclickable/deactive?

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??
Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.
This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable
You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)
Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})

Hover over image to show buttons and don't trigger when hovering over actual buttons

I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>​
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }​
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)

jQuery toggle changes element's width? I don't want it to

I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?

Categories

Resources