Develop Reference

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.

CSS columns separating divs

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>

Tab dislocation for custom image expanding preview

I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.
Please refer my fiddle link.
Please help me with this. I am unable to figure out where I am going wrong.
And is there any way to change the pointer color dynamically based on the color of the circular div?
Thankyou.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.full-width-div {
position: relative;
width: 100%;
left: 0;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">
<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.
You can set the color of the pointer with just CSS, like for instance:
a[href="#tab1"]:after {
border-bottom-color: rgb(0, 188, 212) !important;
}
a[href="#tab8"]:after {
border-bottom-color: #8BC34A !important;
}

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});