How to apply .animate to function - javascript

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');
}
});

Related

Make entire div act as a link except one div which also has another link

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->

Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>

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;
}

jQuery.addClass() is not working [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am having an issue with addClass(). Somehow, it does not work with this example:
https://jsfiddle.net/0g1Lvk2j/20/
scroll to the end and close the last box by clicking on the orange box. The orange borders of the closed box should transfer to another visible box by removing the class photo-src-as-main from the closed box and adding it to the first visible box. However, it does not work!
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div><div data-form="1" class="photo fn-photo-1 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="2" class="photo fn-photo-2 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="3" class="photo fn-photo-3 grid-25 tablet-grid-50 mobile-grid-100 ">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="4" class="photo fn-photo-4 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="5" class="photo fn-photo-5 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame photo-src-as-main">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="6" class="photo fn-photo-6 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="7" class="photo fn-photo-7 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div>
HTML:
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div><div data-form="1" class="photo fn-photo-1 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="2" class="photo fn-photo-2 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="3" class="photo fn-photo-3 grid-25 tablet-grid-50 mobile-grid-100 ">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="4" class="photo fn-photo-4 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="5" class="photo fn-photo-5 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame photo-src-as-main">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="6" class="photo fn-photo-6 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="7" class="photo fn-photo-7 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div>
CSS
.display-none{
display:none;
}
.photo-src-control{
width: 40px;
height: 40px;
background-color: orange;
cursor: pointer;
}
/*.photo-src-main{
background: url('img/star.png') no-repeat center #c0c0c0;
}
.photo-src-main:hover{
background-color: gold;
}*/
.photo-src-remove{
width: 40px;
height: 40px;
}
.photo-src-remove:hover{
background-color: red;
}
.photo .photo-src{
/* border: 3px dashed #D2D2D2; */
background-color: white;
width:100%;
height: 100%;
background-image: url("img.png");
background-repeat: no-repeat;
background-position: center 40%;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius: 3px;
}
.photo-frame{
width: 95%;
margin: 5% auto;
padding:3px;
height: 200px;
border-radius: 3px;
}
.fn-photo-upload{
background-image: url("img.png");
background-repeat: no-repeat;
background-position: center 40%;
cursor: pointer;
}
.photo-loading .photo-src{
background-image: url("imgLoader.gif")!important;
background-position: center!important;
}
.photo-loading .photo-src-control{
display: none;
}
.pu-btn-container{
position: absolute;
bottom: 25%;
width:100%;
}
.pu-btn-container span{
width: 100px;
margin: 0 auto;
display: block;
text-align: center;
}
.pu-form{
width:0;
height:0;
border:0px solid #fff;
overflow: hidden;
position: absolute;
}
.photo-src-as-main{
background: #DC7416;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}
/*.photo-src-as-main .photo-src-main{
background-color: #DC7416;
}*/
.photo-src-as-main .photo-src{
box-shadow:none!important;
}
javascript/jquery
$(document).ready(function(){
$(".photo-src-remove").click(function(){
var photo=$(this).parents().eq(3);
var photoFrame=$(this).parents().eq(2);
photo.addClass("display-none");
if (photoFrame.hasClass("photo-src-as-main")) {
//I dont understand why it refuses to add and remove this classname
$(".photo").not(".fn-photo-upload,.display-none").find(".photo-frame").eq(0).addClass("photo-src-as-main")
photoFrame.removeClass("photo-src-as-main");
}
})
$(".photo-src").not(".fn-photo-upload-src").click(function(){
$(".photo-frame").removeClass("photo-src-as-main")
$(this).parent().addClass("photo-src-as-main")
})
})

I think the problem is that both your "click" handlers fire when you click on that orange square "photo-src-remove" element. Its parent is a "photo-src" element, so the click bubbles up to that. Thus, your code does add "photo-src-as-main" as you intend, but then the other click handler immediately removes it.
You can cancel event bubbling to fix that:
$(".photo-src-remove").click(function(e){
e.stopPropagation(); // <=== stop bubbling
var photo=$(this).parents().eq(3);
var photoFrame=$(this).parents().eq(2);
photo.addClass("display-none");
if (photoFrame.hasClass("photo-src-as-main")) {
//I dont understand why it refuses to add and remove this classname
$(".photo").not(".fn-photo-upload,.display-none").find(".photo-frame:first").addClass("photo-src-as-main")
photoFrame.removeClass("photo-src-as-main");
}
})
I would strongly suggest that instead of navigating by nesting depth up the .parents() chain (eg, .parents().eq(2)), use .closest() to explicitly search by class name for the target parent. Using DOM structure is very fragile.

You're not getting the right element, for sure. I try it like this and it work. Very ugly I know, but the problem is not the add/remove class, is the element returned on the selection.
$(".photo-src").not(".fn-photo-upload-src").click(function(){
$(".photo-frame").removeClass("photo-src-as-main")
var frameList = $(".photo-frame").filter(':visible');
$(frameList[frameList.length - 1]).addClass("photo-src-as-main")
})

Categories

Resources