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;
}
Related
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have a long list of <div> tags that I want to stack side by side without any vertical scrolling. I want them to stack horizontally like a slider.
An example is the parent container has a height of 500px, and there are 25 Divs that are 500x500 squares that will sit side by side and scroll horizontally.
I'm trying to create a slider that will sit at the top of a webpage and scroll continuously.
Thanks!
----- EDIT 8/24/15 #2:22pm -----
What I have so far is :
<style type="text/css">
div.table {display:table; width:100%;}
div.table-row {display:table-row;}
div.table-cell {display:table-cell; width:500px; height:500px; margin:0px 5px; background:#1996e6; color:#fff;}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
</div>
</div>
Something like this?
CSS
#container {
overflow-x: scroll;
white-space: nowrap;
}
.child {
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid black;
}
HTML
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
https://jsfiddle.net/0bgqgkbL/
You can play with the size of the container but all you have to do is add the images (captions optional) http://jsfiddle.net/b7so9870/
$(document).ready(function() {
$('#rotator > a.arrow.left').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({
marginLeft: "-=310px"
}, function() {
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({
marginLeft: "0"
});
});
});
#rotator {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
position: relative;
}
#rotator .images {
width: 100%;
position: relative;
z-index: -5;
}
#rotator a.arrow {
width: 18px;
height: 41px;
display: block;
text-indent: -50000em;
position: absolute;
top: 220px;
z-index: 50;
}
#rotator a.arrow.left {
left: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_left.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator a.arrow.right {
right: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator .images .imageHolder {
width: 500px;
float: left;
height: 500px;
position: relative;
}
#rotator .images .imageHolder span {
width: 480px;
margin: 10px;
color: #FFF;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: -3;
}
#rotator .images .imageHolder img {
width: 500px;
height: 500px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="rotator">
<div class="images">
<div class="imageHolder">
<span>Daisies</span>
<img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Whole choir</span>
<img src="http://www.musicmatters.ie/images/bara2.jpg" />
</div>
<div class="imageHolder">
<span>Choir</span>
<img src="http://www.musicmatters.ie/images/bara4.jpg" alt="" />
</div>
</div>
<a href="#" class="arrow right">
<img src="http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png">
</a>
</div>
</body>
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>
$(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()