Okay, so I have the same button in every div. When it is clicked, I would like Div4 to appear under the div that the user pressed the button in. So, for instance, if user presses Button inside Div2, then Div4 would appear between Div2 and Div3. It would push Div3 down rather than appearing over/hiding Div3.
How can this be achieved, hopefully through jQuery?
Thank you.
$('#Button').click(function() {
$('#Div4').fadeIn(200);
});
body {
color: white;
text-align: center;
}
#Button {
width: 40px;
height: 20px;
background: brown;
cursor: pointer;
margin-left: auto;
margin-right: auto;
}
#Div1 {
width: 100px;
height: 50px;
background: blue;
}
#Div2 {
width: 100px;
height: 50px;
background: green;
}
#Div3 {
width: 100px;
height: 50px;
background: purple;
}
#Div4 {
width: 100px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Div1">
Div1
<div id="Button">Click</div>
</div>
<div id="Div2">
Div2
<div id="Button">Click</div>
</div>
<div id="Div3">
Div3
<div id="Button">Click</div>
</div>
</body>
Here is a possible solution: http://jsfiddle.net/2nxd6fon/7/
Instead of same ID for div's (which is not correct approach), use class as shown below,
[As I don't see Div4 in your HTML, I have taken the following approach.]
<body>
<div id="Div1">
Div1
<div class="button">Click</div>
</div>
<div id="Div2">
Div2
<div class="button">Click</div>
</div>
<div id="Div3">
Div3
<div class="button">Click</div>
</div>
</body>
var div4Content = '<div id="Div4">'+
'Div4'+
'<div class="button">Click</div>'+
'</div>';
$('.button').click(function() {
$(this).parent().after(div4Content);
});
First of all, IDs have to be unique, you can't repeat id="Button". You should use a class for that.
You can use .after() to move #Div4 after the current DIV, and then fade it in.
$('.Button').click(function() {
$(this).parent().after($('#Div4').fadeIn(200));
});
body {
color: white;
text-align: center;
}
.Button {
width: 40px;
height: 20px;
background: brown;
cursor: pointer;
margin-left: auto;
margin-right: auto;
}
#Div1 {
width: 100px;
height: 50px;
background: blue;
}
#Div2 {
width: 100px;
height: 50px;
background: green;
}
#Div3 {
width: 100px;
height: 50px;
background: purple;
}
#Div4 {
width: 100px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Div1">
Div1
<div class="Button">Click</div>
</div>
<div id="Div2">
Div2
<div class="Button">Click</div>
</div>
<div id="Div3">
Div3
<div class="Button">Click</div>
</div>
<div id="Div4">
Div4
</div>
</body>
Related
I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>
Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>
I am trying to make simple css layout. I want 3 box
{Left} {center} {right}
So I write this code
#myleft {
position: relative;
float: left;
width: 20%;
background-color: #CC6600;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
* html #mycenter {
height: 1%
}
#myright {
position: relative;
float: right;
width: 20%;
background-color: #FF6633;
}
<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>
but instead of
{left} {center} {right}
{left}
{center}
{right}
I don't know why but it goes like this even the float is left and right
You didn't name your div id's correctly. they should be myleft and myright
body {
width: 100%;
}
#myleft {
position:relative;
float:left;
width:20%;
background-color:#CC6600;
}
#mycenter {
width:60%;
float: left;
background-color:#f2f4f4;
}
#mycenter {
height:1%
}
#myright {
float:left;
width:20%;
background-color:#FF6633;
}
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
Wrap your divs into a main div and try to use Flexbox
Stack Snippet
.d-flex {
display: flex;
flex-wrap: wrap;
}
#myleft {
position: relative;
width: 20%;
background-color: cyan;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
#myright {
position: relative;
width: 20%;
background-color: cyan;
}
<div class="d-flex">
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
</div>
And, of course, there is grid. First wrap the "gridded" elements
<div id='wrapper'>
<div id='left'> Left </div>
<div id='center'> Center </div>
<div id='right'> right </div>
</div>
#wrapper {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
}
Then, optionally, if you want the content of each sub-div to be centered:
#left, #right, #center {
margin-left:auto;
margin-right:auto;
}
.container {
display: flex;
}
.box1 {
flex: 1 ;
text-align: center;
background-color: gray;
}
.box2 {
flex: 2;
text-align: center
}
.box3 {
flex: 1;
text-align: center;
background-color: gray;
}
<div class="container">
<div class="box1">
<p> text</p>
</div>
<div class="box2">
<p> text</p>
</div>
<div class="box3">
<p> text</p>
</div>
</div>
I develop custom image box html control which contains image area along with small image thumbnails collection located at the bottom, top, left or right from the main image.
The problem is the main image div container doesnt stretch to fill remain area in main frame div.
Here is my code
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
Here I need thumbnails div container (with black background) placed in the bottom of main (red) frame div, while main image div (with green background) should stretch to fill remain area.
What am I do wrong?
Give height and width as 100% to .wvIBoxMainImageDiv
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
height:100%; /*this here*/
width:100%; /*and here*/
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
You can also use flex, (using auto-prefixer):
<div class="fullGallery">
<div class="mainImage">
</div>
<div class="bottomImages">
<div class="navigationButton">
</div>
<div class="imageContainer">
<div class="oneImage"></div>
<div class="oneImage"></div>
<div class="oneImage"></div>
</div>
<div class="navigationButton">
</div>
</div>
</div>
.fullGallery {
width: 300px;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.mainImage {
width: 100%;
flex: 1;
background-color: yellow;
}
.bottomImages {
width: 100%;
height: 70px;
background-color: green;
display: flex;
}
.navigationButton {
width: 40px;
height: 100%;
background-color: pink;
}
.imageContainer {
flex: 1;
display: flex;
justify-content: space-around;
}
.oneImage {
background-color: blue;
width: 26%;
}
http://codepen.io/anon/pen/JYrdQJ
I like it more
I have created two snippets to show what I'm trying to do.
Here's the first one where the top left box holds a single image. The bottom right box has an image that overflows the box from right to left.
#one{
height: 200px;
background-color: red;
float: left;
}
#two{
height: 100px;
background-color: pink;
}
#three{
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
.row{
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
#wrapper{
max-width: 500px;
}
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
Here's the second snippet where the top left box holds two images that are cycled using the jquery cycle plugin. I can't seem to get the image that is in the lower right to appear in front of the slideshow.
Does anyone know how to make this happen?
jQuery(document).ready(function () {
jQuery('#one').cycle({
containerResize: 0,
fx: 'fade',
timeout: 1500,
});
});
#one {
height: 200px;
background-color: red;
float: left;
}
#two {
height: 100px;
background-color: pink;
}
#three {
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
#wrapper{
max-width: 500px;
}
.row {
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Emoji_u1f532.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
You just need to set your div position to relative and give it a high enough z-index, like this:
#three {
position: relative;
z-index: 10;
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
$(document).ready(function() {
$(".main_box").click(function() {
$(".sliding_box").slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
When I click on "main_box" div, both the "sliding_box" divs go up. I want only the first "sliding_box" div go up after clicking on first "main_box" div.
Does anyone know how to do it?
You have to target $(this).siblings('.sliding_box') instead of $(".sliding_box").
$(document).ready(function() {
$(".main_box").click(function() {
$(this).siblings('.sliding_box').slideToggle();
});
});
div.wrapper {
width: 300px;
float: left;
margin-right: 10px;
}
div.main_box {
width: 300px;
height: 30px;
background-color: #FF0000;
}
div.sliding_box {
width: 300px;
height: 300px;
background-color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box"></div>
<div class="sliding_box"></div>
</div>
Reference: .siblings()