I have created two parent <div>. Inside the first parent <div> I have written a loop,where twenty child <div> is getting created. I want at the time of child <div> creation, when the height of the first parent <div> will get full, then the rest of the child <div> will automatically get transferred into the second parent <div>.
I failed in every try. I am just sharing my basic codes.
Css
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.div1 {
height: 100%;
width: 50%;
background-color: red;
float: left;
}
.div2 {
height: 100%;
width: 50%;
background-color: blue;
float: left;
}
.child{
height:100px;
width:200px;
background-color:yellow;
margin:1px;
}
Html
<div class="div1">
#for (int i = 0; i < 20; i++)
{
<div class="child">#i</div>
}
</div>
<div class="div2"></div>
Can someone please help?
Do you wanna use columns? Then use that!
.parent {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
<div class="parent">
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
</div>
Related
I want to create a carousel that Looks like the photo below.
carousel photo
this shows the carousel and carousel created with some photos with different widths.
I want the carousel to be moved by the margin of each photo width.
my codes work seem correct but the carousel does not work :(
Which part of the codes are wrong??
this is my Html codes :
<div class="container">
<img src="./previous.png" alt="" class="previous">
<div class="frame">
<div class="carousel">
<div class="images">
<div> <img class="img" src="./images/avatar_1.png" alt="" width="50px"></div>
<div><img class="img" src="./images/avatar_2.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_3.png" alt="" width="150px"></div>
<div><img class="img" src="./images/avatar_4.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_5.png" alt="" width="200px"></div>
<div><img class="img" src="./images/avatar_6.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_7.png" alt="" width="140px"></div>
<div><img class="img" src="./images/avatar_8.png" alt="" width="180px"></div>
<div><img class="img" src="./images/avatar_9.png" alt="" width="190px"></div>
<div><img class="img" src="./images/avatar_10.png" alt="" width="100px"></div>
</div>
</div>
</div>
<img src="./next.png" alt="" class="next">
</div>
and this is my CSS codes :
.frame {
width: 350px;
height: 150px;
overflow: hidden;
margin: 0px 20px;
border-radius: 10px;}
.carousel{
overflow: hidden;
background-color: rgb(100, 98, 98);
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 100%;}
.images{
display: flex;
height: auto;
position: relative;
width: 100%;
height: 100%;}
.imgs{
height: 130px;
margin: 10px 0px 10px 10px;
border-radius: 5px;}
and this is my Javascript codes:
let images = document.querySelector(".images")
let next = document.querySelector(".next")
let previous = document.querySelector(".previous")
let carousel = document.querySelector(".carousel")
let img = document.querySelectorAll(".img")
next.addEventListener("click", RightClick)
let count = 0
function RightClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveRight(widthImage) {
images.style.marginRight = widthImage + "px"
}
previous.addEventListener(LefttClick)
function LefttClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveLeft(widthImage) {
images.style.marginLeft = widthImage + "px"
}
important: this is necessary to carousel moved by a margin every click on next or prev button
important 2 = The margin should be the size of the photos
I want my images in an image carousel to scale when I change the size of the window. If I add the following to the CSS,
.carousel-slide img {
display: block;
width: 100%;
}
then for some reason I think the browser is taking the div class="carousel-slide" as the parent of the img instead of the figure, and I get all 4 images displaying in the width of the figure. Or perhaps it is because I am using the CSS Grid? How do I fix this behaviour?
HTML:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main>
<section id="image-carousel">
<button id="leftButton">
PREV
</button>
<div id="carousel">
<div class="carousel-slide">
<figure>
<img id="lastClone" src="image-4.jpg" alt="">
<br>
<figcaption>
figcap1
</figcaption>
</figure>
<figure>
<img src="image-1.jpg" alt="">
<br>
<figcaption>
figcap2
</figcaption>
</figure>
<figure>
<img src="image-4.jpg" alt="">
<br>
<figcaption>
figcap4
</figcaption>
</figure>
<figure>
<img id="firstClone" src="image-1.jpg" alt="">
<br>
<figcaption>
figcap5
</figcaption>
</figure>
</div>
</div>
<button id="rightButton">
NEXT
</button>
</section>
</main>
</body>
</html>
CSS:
#image-carousel{
display: grid;
grid-template-areas:
". leftButton carousel rightButton .";
grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr;
grid-template-rows: auto;
}
#carousel{
grid-area: carousel;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 550px;
}
.carousel-slide img{
z-index: 1;
/*width: 100%; this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
width: 100%;
}
#leftButton{
grid-area: leftButton;
z-index: 3;
}
#rightButton{
grid-area: rightButton;
z-index: 3;
}
#carousel figcaption{
background-color: rgba(15, 27, 27, 0.7);
text-align: center;
height: 50px;
width: auto;
position: relative;
bottom: 50px;
z-index: 2;
}
There is a huge problem with masonry: it makes some useless spaces between blocks. I already tried everything, but nothing helps it.I would really apreciate if someone could tell me how to resolve this problem. Check screenshot.Result
UPDATE: I figured out, that the problem starts with first figure "T-Shirts". Somehow, when I delete class width-1 from there everything fits as it's meant to be.
Why is it happening and how can I solve this problem? Any suggestions? I really can't delete that figure, there must be some way to fit it with other blocks. Please help.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 230
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
main
{
height: 630px;
margin-top: 40px;
margin-left: 18%;
width: 1500px;
}
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
.grid-item
{
width: 230px;
height: 180px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.height-1
{
height: 370px;
}
.width-1
{
width: 360px;
}
.width-2
{
width: 470px;
}
.height-2
{
width: 360px;
height: 370px;
}
.width-2 img
{
width: 470px;
height: 180px;
}
<main class="grid">
<figure class="grid-item height-1 width-1">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="grid-item">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item width-2">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="grid-item height-1">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="grid-item">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item width-1">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
You're missing imagesLoaded.
example:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
The below code is a slider that manipulates between two dividers, previous and next. Each divider represents a set of ten images, as you can see in two parallel vertical lines. I'm trying to make each divider 2 parallel horizontal lines (5 images on each line), However it's getting messed up and the 2 dividers are getting connected. Any help please?
HTML:
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JQUERY:
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
src="js/jquery.scrollTo.js"
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
JSFIDDLE: http://jsfiddle.net/2ghovmww/
As I see it you can achieve what you want with display:inline for each horizontal block, but as you have implemented it, the width of your container is smaller than the width of five elements in a row, so they can't be displayed. If you use overflow:hidden you will have two rows but the elements that exceed the width of the container will be hidden. So first you must adjust the width of the container and its parent elements.
I'm trying to create a slider with a next button, the images inside my horizontal div are different sizes. I can animate the images with a fixed-width once, I would like to click through the images with one button. So far I have this:
//function will slide 500px but images are different size so 500px wont work?
$(function() {
$("a.right").click(function() {
$(".rolodexSlider").stop().animate({
left: "-500px",
}, 500);
return false;
});
});
<!-- wrapper holds slider -->.rolodexWrapper {
width: 500px;
height: 300px;
margin: 0 auto;
}
<!-- slider holds images -->.rolodexSlider {
height: 300px;
width: 2000px;
position: relative;
}
img {
border: #FF0 solid 1px;
margin: 10px;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rolodexLetters">
<li>L</li>
<li>R</li>
</ul>
<div class="rolodexWrapper">
<div class="rolodexSlider">
<div><img src="" width="250px" height="100px" /></div>
<div><img src="" width="200px" height="100px" /></div>
<div><img src="" width="300px" height="100px" /></div>
<div><img src="" width="275px" height="100px" /></div>
</div>
</div>