Placing div after click between two other without moving them

jquery move element after another
div below fixed div
drag and drop javascript demo
javascript drag and drop example
multiple divs with fixed position and scrolling
jquery move element position
fixed div position when scrolling
position div below another div with position: absolute

What I want to achieve is: I click a button, div appears and it is placed between other two containers without moving them.

So in this fiddle: http://jsfiddle.net/7tbsR/26/ I will only have box 1 and box 3 visible, but when I click button, box 2 appears between these two containers like in the fiddle, but without moving them. I want help only with CSS part.

<div class="container">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
  <button class="cta">
    Click
  </button>
</div>

CSS

.box-1{
  background-color: gray;
  padding: 20px 40px;
}

.box-2{
  background-color: darkgray;
  padding: 20px 40px;
}

.box-3{
  background-color: gray;
  padding: 20px 40px;
}

Using visibility:hidden keeps the space occupied. On click, the visibility becomes "visible".

$("body").on("click", "button", function() {
  $(".box-2").css("visibility", "visible");
});
.box-1{
  background-color: gray;
  padding: 20px 40px;
}

.box-2{
  background-color: darkgray;
  padding: 20px 40px;
  visibility: hidden;
}

.box-3{
  background-color: gray;
  padding: 20px 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
  <button class="cta">
    Click
  </button>
</div>

Sliding a div without moving neighbouring content, up vote 2 down vote accepted position:absolute; /* add this */ left:100%; /* add this */ width: 50px; height: </div> <div id="content"> content </div> <div id="​footer"> the footer </div> position:absolute; will have the menu position absolutely on top of other This way it will not re-flow the content of elements beneath it. Hello, And I want to place under these images another DIV, where the buttons are loacted. However, whatever I do the DIV that is to contain the buttons rather being located beneath the

If you are familiar with JavaScript what you want can be done easily using JS.

What you need to do is adding the code block below to the end of your html code:

<script>
function myFunction() {
var x = document.getElementById("box-2");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>

Then your button's code will change to:

<button class="cta" onclick="myFunction()">

Now when you click on the button your div will show up and when you click again it will disappear.

Finally your whole code will look like below:

<style>
.box-1{
background-color: gray;
padding: 20px 40px;
}

#box-2{
background-color: darkgray;
padding: 20px 40px;
display: none;
}

.box-3{
background-color: gray;
padding: 20px 40px;
}
</style>
<div class="container">
<div class="box-1">Box 1</div>
<div id="box-2">Box 2</div>
<div class="box-3">Box 3</div>
<button class="cta" onclick="myFunction()">
Click
</button>
</div>

<script>
function myFunction() {
var x = document.getElementById("box-2");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>

By the way, I used internal CSS. If your CSS is External you can remove the codes between <style> and </style> tags.

Drag'n'Drop with mouse events, These events allow us to support special kinds of drag'n'drop, such as handling And there are many other drag'n'drop tasks that can't be done using them. Then on mousemove move it by changing left/top with position:absolute . For instance, below are two <div> elements, red one on top of the blue  With CSS properties, you can easily put two next to each other in HTML. Use the CSS property float to achieve this.With that, add height:100px and set mar

I had only problem with CSS, when I put box 2 between box 1 and box 3 they changed position. I eventually solved the problem with position: absolute. Thanks everyone for answers though.

How to position a div after a fixed div, It is not an easy task to position a div after a fixed div, but it is possible. Here is When the user would scroll up, the content would move in sight. I made two divs, the first one of them fixed. You can read more that here. Put the four necessary items into the source code of a test page and you'll have a link that, when clicked, swaps the div currently on the page with another div. Every time the link is clicked, the divs are swapped.

.insertAfter(), Description: Insert every element in the set of matched elements after the target. insertAfter() , on the other hand, the content precedes the method, either as a 2. 3. 4. 5. <div class="container">. <h2>Greetings</h2> it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned:  I have two DIVs appearing one below the other. Sometimes the lower DIV collides with the above DIV and appear on top. I have set absolute positions for both DIVs but I tried relative position for the lower DIV also, but nothing improved. I want it to appear correctly on all browsers.

Move Element to Click Position, Just as the name of this snippet implies, click anywhere in the gray area below to see the red smiley move to the position of your click: clientHeight / 2); After you've done that, let's walk through this example together. When it comes to defining motion in user interfaces, there is no other relationship  Set size and make inline. Even if you were to reduce the size of a Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

Pro Silverlight 4 in VB, In other words, one ' mouse wheel notch expands or shrinks the Viewbox by about 9%. you may want to have a notification of mouse up events, even if they occur after the mouse has moved off your element. There are two ways to lose the mouse capture. To move a circle, you simply click and drag it to a new position. The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally. Note that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it’s really before or after the other content inside. The value for content can be:

Comments
  • You really need JavaScript for this. What have you tried?