Develop Reference

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

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

JQuery slideUp and slideDown the whole <section>

Good night, morning, afternoon...
I'm developing a website that the whole content slides up and down... I have thought in many possibilities but still couldn't find an answer. Note that the index/intro/main page is the second section. My inspiration is :
http://www.pulpdesign.it/
Thanks , in advance.
<section class="tips-content">
</section>
<section id="intro">
<h1 id="intro-logo">bla</h1>
<span id="title">blabla</span>
<nav id="navigation">
<span class="curriculum"></span><span id="curriculum">currículo</span>
<span id="contact">agendamento</span><span class="contact"></span>
<span id="services">serviços</span><span class="services"></span>
<span id="tips">dicas</span><span class="tips"></span>
</nav>
</section>
<section id="curriculum-content">
<div style="height:100%; background:red;">
</div>
</section>
<script>
$(document).ready(function(){
$("#go_curriculum").click(function(){
$(".tips-content").slideDown("slow");
});
$("#go_tips").click(function(){
$("#curriculum-content").slideUp("slow");
});
});
</script>
</body>

I'm the developer who wrote that site :)
First, thanks for taking that as inspiration!
Then, to answer to your question, you'll need, as CP510 said, a general wrapper with
overflow:hidden; height: 100%; width: 100%
I used the body tag, that actually isn't the best choice, it's better to use a
and inside that container you'll have all of your section with
position: absolute;
width: 100%;
height: 100%;
because the you'll have to animate the
scrollLeft/scrollTop
properties of the container with jQuery, and using body as main container I had to deal with some safari's bugs.
Another trick is to think about your sections as the sides of an opened cube. So your main section won't be at
top: 0; left: 0
but at
top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;
and so on with the other sections.
I hope I made it quite clear, my English isn't so good. If you have any other questions just ask!

This is a tricky one. But I have done it. The basic idea is to use a raw $().animate() function to move all this fun stuff around. Since slide up/down are just helper functions for this.
The next requirement is that the sections are absolutely positioned in a wrapper. It's a bit wonky but heres the psuedo layout
<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
<DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
<CONTENT DIVS POSITIONED CORRECTLY>
</DIV>
<DIV>
Now what you do is move the absolutely positioned content container (the second div) to show the section using jquery.
$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);
Now the POSITION_TOP and POSITION_LEFT placeholders could be a variable that gets set based on the navigation button thats hit. The cleanup_callback is an optional function if you want something to happen when the document arrives on that location.
Thats the jQuery way. There is a CSS way by using classes and transitions. It works by changing the holding containers class to basically declare where the target page is, then because CSS transitions are on, the movement is animated. Each of these "navigation classes" basically just dictate the top and left position properties.

Have a look on this EXAMPLE just to understand the basic idea on how this logic works.
This example has 3x2 full page divs( 6 pages total) and we are not using any JavaScript at all it's all CSS and HTML.
Please note that in order to remove the scrollbars from the page you will need to uncomment the below in the body style
body {
white-space: nowrap;
/*overflow:hidden; UNCOMMENT THIS*/
}
jQuery for a smooth animation
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
You can also have a look on this Website as it is very similar to what you want to achieve

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?

When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}

After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.

Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)

How to set a target="_blank" in a DIV tag?

Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>

Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.

trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}

I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.