CSS columns separating divs - javascript

I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..


Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

Related

How to apply .animate to function

var elementPosition = $(".total-value-bottom").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$(".total-value-bottom").css("position", "fixed").css("top", "4.5em").css('left', '0em');
$(".total").css("font-size", "70%");
} else {
$(".total-value-bottom").css("position", "static");
}
});
:root {
--white: #ffffff;
--dusty-red: #ab3428;
--black: #000;
--grey: #808080;
--green: #28ab34;
--shadow: #00000044;
--icbf-blue: #2d69a8;
--border: #ccc;
--icbf-green: #6ead2b;
}
.total-value-bottom {
box-shadow: 0 1px 3px var(--shadow);
background: var(--white);
z-index: 2;
height: 60%;
width: 50%;
}
.circle {
border-radius: 50%;
padding-top: 70%;
width: 76%;
}
.dash-flex-cell {
padding: 11px;
}
.circle-total {
border: 4px solid var(--icbf-blue);
margin: 0 auto;
}
.circle-amount {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
align-items: center;
justify-content: center;
text-align: center;
max-height: 0.1em;
}
.circle-amount .amount {
font-size: 130%;
font-weight: 600;
margin: -5px;
padding-bottom: 95%;
}
span.amountSpan,
.amountSpanTwo {
font-size: 20px;
color: var(--icbf-green);
}
.circle-amount,
.total,
.totalTwo {
font-size: 76%;
font-weight: 550;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container total-value-bottom">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">10</span>
<div class="total">Total Farm Emissions</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">CO2 Footprint</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Upon scroll, I was able to get my div to move with a fixed position and when you return to the position it was before it becomes static. However, when I first scroll it's a little rough (Jumpy), I'd like to apply animation to that so it's a bit smoother on the first scroll. I read that I can use .animate, but I am not sure how to implement it with my function.
var elementPosition = $('.total-value-bottom').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('.total-value-bottom').css('position', 'fixed').css('top', '4.5em').css('left', '0em');
$('.total').css('font-size', '70%');
} else {
$('.total-value-bottom').css('position', 'static');
}
});

why my owl carousel items are sorted vertical not horizontal?

i want to ask, i have a problem in my owl carousel.
I want to make a center drag slider with the owl carousel, when I've made the code, the items are vertical not horizontal. what's wrong? I've also included a
Codepen
Is the owl carousel not automatic like the slick carousel? If you know, please help me. I need your help, because this is my first time using the owl carousel
HTML
<div class="slider-news">
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
</div>
SCSS
.card{
border: none;
border-radius: 20px;
&.secondary-card{
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 13px 26px rgba(0,0,0,0.07);
.card-img-top{
height: 250px;
position: relative;
background-color:#c1c1c1;
#tags{
position: absolute;
top: 20px;
left: 20px;
.tags{
&:nth-child(1){
margin-right: 10px;
}
}
}
}
.card-body{
padding: 40px 30px;
.title{
h2{
position: relative;
font-size: 20px;
line-height: 27px;
&::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
height:4px;
width:23px;
background-color: red;
}
}
}
}
}
}
.tags{
display: flex;
justify-content: center;
align-items: center;
padding: 5px 8px;
color: #fff;
font-size: 13px;
&.yellow{
background-color: yellow;
}
}
JS
$(document).ready(function() {
$('.slider-news').owlCarousel({
center: true,
items: 4,
loop: false,
margin: 10,
nav:false,
dots:false,
// responsive: {
// 600: {
// items: 4
// }
// }
});
});

Hello instead of using the class .slider-news try using the owl-carousel on your mark up and javascript. I think it has some default styling on the libary. I worked on this library before and I used owl carousel. If you want custom style you can use a secondary class on owl carousel.
This is the the link on the codepen I edited.

Jquery — Set child to fill remaining width of parent

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).
Layout when above 900px
Layout when below 900px
HTML for reference
.row {
width: 100%;
}
.colm-span-2 {
position: relative;
float: left;
margin: 15px auto;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
background-clip: content-box;
}
.colm-span-2 {
width: 33.3333333333%;
}
#media screen and (max-width: 900px) {
.colm-span-2 {
width: 50%;
}
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

I would suggest adding:
.colm-span-2:last-child {
width: 100%;
}
to your media query. This will change the final .colm-span-2 to have a 100% width.

With flexbox and :last-child (assuming you have rows) this is possible
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.bg-white {
background: whitesmoke;
}
.bg-cta-green {
background: green;
}
.bg-dark-purple {
background: rebeccapurple;
}
.row {
display: flex;
}
.colm-span-2 {
flex: 0 0 33%;
margin: .25em;
border: 1px solid grey;
}
.colm-span-2:last-child {
flex: 1;
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

jQuery: Keep submenu open while hovering over submenu items

This has been asked a lot. But I can't seem to find a solution that works. I have a jQuery code that opens my submenu on hover, but it vanishes after I try to go over the submenu items. How can I fix that?
Here's my code:
$('.hover').hover(
function() {
$('.drop-box').show();
},
function() {
$('.drop-box').hide();
})
});
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
top: 60px;
left: 0;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover</div>
<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>

Just place .drop-box and all its contents inside .hover.
Plus, you need to remove the top property to prevent the gap between the text and the .drop-box.
$('.hover').hover(
function () {
$('.drop-box').show();
},
function () {
$('.drop-box').hide();
}
);
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
// top: 60px;
left: 0;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>
UPDATE:
If you can't move .drop-box into .hover, you can wrap everything with a div and add the hover event using CSS:
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
// top: 60px;
left: 0;
display: none;
}
.everything:hover .drop-box {
display: block;
}
<div class="everything">
<div class="hover">hover</div>
<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>

How to Scroll vertically in one div and at the same time affecting another div that scrolls horizontally

I have 2 div, A and B, I need a way that when I scroll vertically in A, the div B also move at the same time in the Horizontal direction.
I searched and can't find a solution to this problem, and if possible, a solution without a framework.
click here to see what I mean in on picture
.content-up-down {
background: pink;
margin: auto;
width : 400px;
height: 300px;
overflow-y: scroll;
}
.content-1 {
background: rgb(250,230,230);
padding : 32px;
margin: 16px;
}
.content-left-right {
background: rgb(200,250,200);
margin: auto;
margin-top:32px;
padding-top: 16px;
width : 400px;
height: 96px;
overflow-x: scroll;
overflow-y: hidden;
}
.wrap-content-2 {
white-space: nowrap;
}
.content-2 {
background: rgb(100,255,150);
display: inline-block;
width:64px;
height: 64px;
margin:0px 32px;
}
<div class="content-up-down">
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
</div>
<div class="content-left-right">
<div class="wrap-content-2">
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
</div>
</div>

For this, you would need to listen for scrolling on the pink div using jQuery. Here's a rough estimate:
$(".pink").scroll(function() {
$(".green").scrollLeft(($(".pink").scrollTop() / $(".pink").height()) * $(".green").width());
});
.pink {
background-color: pink;
height: 100px;
overflow-y: scroll;
padding: 10px;
}
.green {
background-color: green;
height: 25px;
overflow-x: scroll;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pink">
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
</div>
<div class="green"> efghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghef
</div>
Hope the code makes enough sense.

Categories

Resources