Jump on slideUp jQuery

Jump on slideUp jQuery - javascript

I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?

Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump

Related

Change input spinner number and with that change input value

I'm trying to make an item card for a web shop that sels food. What I'm trying to do is that on the first click on the button with the cart icon the amout of item is increased by +1 (now it is increasing by steps that I have set on input element). But I also want it to increase the value (weight/amount) of the product by the step that is defined on the input value and the cart icon has to change to the plus icon (That I managed to do). And for the minus button the logic is reversed... so i click the - button the value/weight goes down and amount goes down and if it reaches 0 they should dissaper.
EXAMPLE:
I click the cart icon the amount increases to 1 and value/weight increases to 0.25kg... if I click the cart button again the amount goes to 2 and weight increases to 0.5kg. Now if I click the - button the amount goes down to 1 and weight to 0.25kg and if I click it again the amount should go to 0 and weight to 0 and the button wit - icon and the input field should disappear.
MY PROBLEMS:
My first problem is that I cant manage to set the amount to increase
by 1 and value/weight by the defined step
My second problem is that my code keeps hiding the [-] button and
input field on every click not when it reaches 0
Is this approach even correct or have I overcomplicated the thing I'm
trying to do? Is there an easier solution to this?
I'm providing the jsfiddle in this link so that you can have a loot at my code and hopefully understand and help me out with a couple of my problems...
My HTML layout:
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
<div class="product-card">
<div class="row">
<div class="col-12">
<div class="product-card-image-wrapper">
<a href="#" class="product-image-link">
<div class="product-card-image"></div>
</a>
<div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
</div>
</div>
<div class="col-12">
<div class="product-card-body">
<div class="product-heading">
<h3>File mignon</h3>
</div>
<div class="heartIT-btn-holder">
<a href="#" class="heartIt">
<div class="crossFadeImg">
<img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
<img src="./assets/images/heart_black.svg" alt=""
class="img-fluid top transparent" />
</div>
</a>
</div>
<div class="product-desc">
<p class="m-0">Dry aged steak cca. 250g</p>
</div>
<div class="product-price-box">
<div class="product-price">8,78<span> €/pc.</span></div>
<div class="price-per-full-unit">Price per kg: 43.89 €</div>
</div>
<div class="product-weight">
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value=""
data-decimals="2" min="0.25" max="999" step="0.25" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My javascript + jQuery:
$(document).ready(function () {
$("input[type='number']").inputSpinner({
decrementButton: "<strong class='decreaseInCart'>-</strong>",
incrementButton: "<strong class='addToCart'>+</strong>",
buttonsClass: 'btn-outline-secondary',
groupClass: 'flex-nowrap'
});
var $changedInput = $('#changedInput');
var $valueOnInput = $('#valueOnInput');
var $valueOnChange = $('.valueOnChange');
$changedInput.on('input', function (event) {
$valueOnInput.html($changedInput.val());
});
$changedInput.on('change', function (event) {
$valueOnChange.html($changedInput.val());
});
//Klik event ki zamenja sliko košarice z plus znakom
$('.btn-increment').click(function () {
$('.input-group-prepend').css('display', 'block');
$('.input-group-text').css('display', 'block');
$('.form-control').css('display', 'block');
$('strong').removeClass('addToCart');
});
$('.btn-decrement').click(function () {
$('.input-group-prepend').css('display', 'none');
$('.input-group-text').css('display', 'none');
$('.form-control').css('display', 'none');
$('strong').addClass('addToCart');
});
});
For the input field I'm using this plugin

You are just assigning the value from amount to kilos without processing it. You can solve it with this code $changedInput.val() * 0.25.
You are hiding the minus button without checking the value. You can solve it by if($changedInput.val() != 0).
You can combine selectors if you are performing the same action like this: $(".input-group-prepend, .input-group-text, .form-control").css('display', "none");.
You also have an issue with input values:
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0.25" max="999" step="0.25"/>. Step should be 1 and min should 0.
Here is an example fixing all these issues:
$(document).ready(function() {
$("input[type='number']").inputSpinner({
decrementButton: "<strong class='decreaseInCart'>-</strong>",
incrementButton: "<strong class='addToCart'>+</strong>",
buttonsClass: "btn-outline-secondary",
groupClass: "flex-nowrap",
});
var $changedInput = $("#changedInput");
var $valueOnInput = $("#valueOnInput");
var $valueOnChange = $(".valueOnChange");
let $dataFactor = $changedInput.attr("data-factor");
$changedInput.on("input", function(event) {
$valueOnInput.html($changedInput.val())
})
$changedInput.on("change", function(event) {
$valueOnChange.html($changedInput.val() * $dataFactor);
})
//Klik event ki zamenja sliko košarice z plus znakom
$(".btn-increment").click(function() {
$(".input-group-prepend, .input-group-text, .form-control").css('display', "block");
$("strong").removeClass("addToCart");
});
$(".btn-decrement").click(function() {
if ($changedInput.val() != 0)
return;
$(".input-group-prepend, .input-group-text, .form-control").css('display', "none");
$("strong").addClass("addToCart");
});
});
/*___Color_variables___*/
.product-card-wrapper {
padding-left: 10px;
padding-right: 10px;
}
.product-card {
border-radius: 15px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
background: #FFFFFF;
margin-bottom: 15px;
}
.product-card .product-card-image-wrapper {
position: relative;
}
.product-card .product-card-image-wrapper a .product-card-image {
height: 220px;
background: url("https://sharpmagazineme.com/uploads/2018/10/05102018195139.jpg") no-repeat center;
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.product-card .product-card-image-wrapper .prodAmountBox {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
left: 9px;
bottom: 0;
position: absolute;
color: #FFFFFF;
background: red;
padding: 4px 6px;
font-size: 0.875em;
}
.product-card .product-card-body {
position: relative;
height: 180px;
padding: 10px;
}
.product-card .product-card-body .product-heading {
width: 95%;
}
.product-card .product-card-body .product-heading h3 {
text-transform: uppercase;
font-size: 1em;
}
.product-card .product-card-body .product-heading h3 a {
text-decoration: none;
color: #000000;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt {
position: absolute;
top: 9px;
right: 9px;
background-color: #FFFFFF;
height: 30px;
width: 30px;
border-radius: 50px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg {
position: relative;
height: 30px;
width: 30px;
margin: 5px auto;
text-align: center;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg img {
height: 18px;
position: absolute;
top: 2px;
left: 6px;
}
.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg .transparent {
opacity: 0;
}
.product-card .product-card-body .product-desc {
width: 100%;
}
.product-card .product-card-body .product-desc p {
font-size: 0.875em;
line-height: 18px;
}
.product-card .product-card-body .product-weight {
padding-top: 15px;
padding-bottom: 5px;
position: absolute;
bottom: 7px;
right: 9px;
}
.product-card .product-card-body .product-weight .input-group {
white-space: nowrap;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend .input-group-text,
.product-card .product-card-body .product-weight .input-group .input-group-append .input-group-text {
display: none;
border: none;
background-color: transparent;
color: #000000 !important;
padding-left: 0;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend button,
.product-card .product-card-body .product-weight .input-group .input-group-append button {
color: #000000 !important;
background-color: #DEDEDE;
border-radius: 60px;
padding: 5px 0px;
border: none;
font-size: 1.25em;
}
.product-card .product-card-body .product-weight .input-group .input-group-prepend {
display: none;
}
.product-card .product-card-body .product-weight .input-group .input-group-append .btn-increment .addToCart {
content: url("https://w7.pngwing.com/pngs/1022/32/png-transparent-shopping-cart-icon-shopping-cart-logo-icon-shopping-cart-label-coffee-shop-shopping-mall.png");
height: 16px;
width: 16px;
}
.product-card .product-card-body .product-weight .input-group .form-control {
display: none;
padding-right: 6px;
flex: unset;
width: 60px;
border: none;
color: #000000 !important;
background: transparent;
}
.product-card .product-card-body .product-price-box {
padding-top: 0;
position: absolute;
top: 70px;
right: 10px;
width: 100%;
}
.product-card .product-card-body .product-price-box .product-price {
font-size: 1.5em;
text-align: right;
}
.product-card .product-card-body .product-price-box .product-price span {
font-size: 0.675em;
}
.product-card .product-card-body .product-price-box .price-per-full-unit {
margin-top: -5px;
text-align: right;
font-size: 0.75em;
color: #797979;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/src/_bootstrap-input-spinner.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
<div class="product-card">
<div class="row">
<div class="col-12">
<div class="product-card-image-wrapper">
<a href="#" class="product-image-link">
<div class="product-card-image"></div>
</a>
<div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
</div>
</div>
<div class="col-12">
<div class="product-card-body">
<div class="product-heading">
<h3>File mignon</h3>
</div>
<div class="heartIT-btn-holder">
<a href="#" class="heartIt">
<div class="crossFadeImg">
<img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
<img src="./assets/images/heart_black.svg" alt="" class="img-fluid top transparent" />
</div>
</a>
</div>
<div class="product-desc">
<p class="m-0">Dry aged steak cca. 250g</p>
</div>
<div class="product-price-box">
<div class="product-price">8,78<span> €/pc.</span></div>
<div class="price-per-full-unit">Price per kg: 43.89 €</div>
</div>
<div class="product-weight">
<input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0" max="999" step="1" data-factor="0.50"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your second problem can be solve by wrapping these statements.
$(".btn-decrement").click(function(){
if (someValue === 0){
$(".input-group-prepend").css('display', "none");
$(".input-group-text").css('display', "none");
$(".form-control").css('display', "none");
$("strong").addClass("addToCart");
}
});

on click functions being applied to all divs with same class

I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>

Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');

CSS deactivating href links with unrelated line, "left: 0;"

Two divs on my homepage contain nav elements: the .header-nav and the .visualizer.bars nav. For some reason my .header-nav links weren't active, and I've narrowed down the culprit to a single line in my css file: .bars {left:0;}.
When I remove this line, the links in my .header-nav work fine. I have no idea what's linking these two div elements, but I need that line in place for the visualizer effect to work properly.
Everything I've seen in my research indicates a problem with the JavaScript, but unlinking the JS doesn't affect the hrefs so I don't think that's it.
What can I do to keep all links active with the correct styling?
https://jsfiddle.net/vespertron/Leebz05q/
HTML
<header>
<div class="header-left">
<h3>This Is A Site </h3>
<nav class="header-nav">
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="header-right">
<form class="login">
<fieldset>
<input type="text" name="username" tabindex="1" placeholder="Username">
</fieldset>
<fieldset>
<input type="text" name="password" tabindex="2" placeholder="Password">
</fieldset>
<fieldset>
<button type="submit" tabindex="3" value="submit">Login</button>
</fieldset>
</form>
</div>
</header>
<main>
<p class="blurb">stuff that makes me sound like a badass</p>
<div class="visualizer">
<p>What am I up to?</p>
<nav>
<ul class="bars">
<div class="bar">
Link 1
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 2
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 3
<li>
<a href="http://www.dappergrind.com" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 4
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 5
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
</ul>
</nav>
</div>
</main>
<footer>
<span>Copyright © 2018, Entity</span><br />
Privacy
</footer>
<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
var showWidth = 1;
if(showWidth == 1) {
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
});
});
}
</script>
CSS
html,
body {
background-color: #22201d;
background-image: url(../img/leather.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #b7b7b6;
font-family: 'Playfair Display SC', serif;
}
a {
color: #686766;
text-decoration: none;
}
a:hover {
color: #b7b7b6;
}
a:after {
color: #141311;
}
li {
list-style: none;
}
header {
height: 100px;
letter-spacing: 1em;
}
.header-left {
float: left;
}
form {
float: right;
}
fieldset {
border: 0 none;
}
input[type=text] {
float: right;
color: #686766;
}
.header-nav ul {
clear: both;
}
.header-nav li {
float: left;
}
main p.blurb {
font-size: 2rem;
text-align: center;
letter-spacing: 1em;
}
.visualizer {
text-align: center;
font-weight: bold;
letter-spacing: .5em;
}
.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 75px;
left: 0;
margin: 10px auto;
text-align: center;
overflow: hidden;
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 15%;
height: 50%;
min-height: 30px;
background: #800000;
opacity: 0.7;
-moz-opacity: 70%;
-webkit-opacity: 70%;
-webkit-transition: height 0.5s ease-out;
color: #141311;
padding-top: 10px;
font-family: 'Anton', sans-serif;
font-size: 1.75em;
writing-mode: vertical-lr;
text-orientation: upright;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
transition: 0.75s ease-out;
box-shadow: 0px -3px 4px #141311;
}
.bar:hover {
opacity: 1;
-moz-opacity: 100%;
-webkit-opacity: 100%;
color: #b7b7b6;
transition: .25s ease-in-out;
}
.bar:after {
color: #686766;
}
.link-spanner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
footer {
position: fixed;
height: 75px;
width: 100%;
bottom: 0;
text-align: center;
letter-spacing: .2em;
}

toggle Jquery doesn't work

I have an issue with jquery toggle, it does not toggle the current div but instead the next div of the current one, when I try to change the class of the toggle div it doesn't work at all. Can anyone help me please ?
P.S: I'm toggling the SITES block, I wrapped it's content (background: yellow) in the class="clsDashRegion_sitesBloc", when I put this class in my JS it does not work.
Here is my code
(function zipContentBloc($) {
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
// Toggle the panel next to the item that was clicked
$(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
})(jQuery);
/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
position: absolute;
top: 6%;
right: 0.5rem;
transform: translateY(-50%);
font-size: 1.8rem;
}
/* Plus */
.clsDashRegion_zipIndicator::after {
content: '\002B';
}
/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
content: '\002D';
font-size: 3rem;
}
.clsDashRegion_levelOne {
width: 25rem;
/* height: 100%; */
background: #3c4647;
position: relative;
}
.clsDashRegion_catgBloc {
position: relative;
left: 2%;
width: calc(100% - 1rem);
height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.9);
opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
height: 2.5rem;
background: aqua;
}
.clsDashRegion_catgLogoBloc {
width: 2.5rem;
height: 2.5rem;
float: left;
}
.clsDashRegion_catgTitleBloc {
float: left;
width: calc(100% - 5.5rem);
height: 2.5rem;
color: #000000;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
float: right;
width: 3rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
/* position: absolute; */
/*float: none;*/
display: block;
float: right;
width: 10rem;
height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
float: left;
width: 5rem;
height: 2.5rem;
color: #000000;
text-align: center;
font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
position: relative;
float: right;
display: block;
width: 100%;
height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
float: left;
width: 50%;
height: 2.5rem;
font-weight: bold;
margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
float: right;
width: 5rem;
height: 2.5rem;
text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
position: relative;
float: left;
display: block;
width: 100%;
height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
position: relative;
float: left;
display: block;
width: 100%;
height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
position: relative;
float: left;
top: 1rem;
text-align: center;
}
.clsDashRegion_buttonValue {
width: 5rem;
height: 1.5rem;
margin-left: 2rem;
border: 1px solid;
line-height: 1.4rem;
background: chartreuse;
border-style: groove;
}
.clsDashRegion_buttonTitle {
margin-left: 1.5rem;
line-height: 1.4rem;
font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
position: relative;
float: right;
display: block;
width: 100%;
top: 0.5rem;
text-align: center;
font-weight: bold;
}
.clsDashRegion_valueTech {
float: left;
width: calc(100% - 4rem);
margin-bottom: 0.5rem;
border-style: groove;
letter-spacing: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
<div class="clsDashRegion_levelOne">
<div class="clsDashRegion_catgBloc">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
<div class="clsDashRegion_catgTitleBloc">ALARMES</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Critique</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:8em;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TICKETS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocTicket">
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:20rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
<div class="clsDashRegion_catgTitleBloc">SITES</div>
<div class="clsDashRegion_zipIndicator"></div>
</div>
<div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">-3dB</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Rx</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Perte HF</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocGE">
<div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V2</div>
<div class="clsDashRegion_buttonTitle">- 10 jrs</div>
</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:18rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
</div>
</div>
</div>
</div>
</div>

Happens because you use extra selector with on('click', '.clsDashRegion_catgBloc',...
Try this:
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
// Toggle the panel next to the item that was clicked
$( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
$(this) = $('.clsDashRegion_levelOne'); - block which you add .on();
$( event.target ) =$('.clsDashRegion_catgBloc'); - block which was exactly clicked
Fiddle example: https://jsfiddle.net/z4tdxmbk/
Check this also

Responsive horizontal JS scroll

I've created a horizontal scroll, but I need some help with my javascript.
What I want is, when I click on the right button, it should align perfectly with the second box, and then the third one and so on. My javascript is set to scroll 100px. But I want it to align perfectly with the other boxes.
IMPORTANT! The horizontal scroll will be added to a responsive website. So I cant use px here :) Hope somebody can help :) Thanks
$(document).ready(function(){
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+100});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+100});
});
});
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.content{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.content > .portfolio-item{
width: 10%;
background-color:blue;
margin-right:50px;
float:left;
height:100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='content'>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
</div>
</div>

You must be check the width and margin of your element and add to your scroll. But warning, your content width inside the box must be: the number of boxe X the (width + margin) of box:
Example: 6 x (200+50)
because otherwise your scroll will not full: Please try below
$(document).ready(function(){
var margin = parseInt($(".portfolio-item").css("margin-right").replace("px",""));
var width = parseInt($(".portfolio-item").width()) ;
var widthitem = width + margin;
console.log(widthitem)
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+widthitem});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+widthitem});
});
});
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.content{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.content > .portfolio-item{
width: 10%;
background-color:blue;
margin-right:50px;
float:left;
height:100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='content'>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Jump on slideUp jQuery - javascript

Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content. It should stop abrupt jump

Related

Change input spinner number and with that change input value

on click functions being applied to all divs with same class

CSS deactivating href links with unrelated line, "left: 0;"

toggle Jquery doesn't work

Responsive horizontal JS scroll

Categories

Resources