Responsive horizontal JS scroll

Responsive horizontal JS scroll - javascript

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>

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

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

Animated (shrinking) Resizing Header On Scroll in bootstrap

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
#section0{
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(
https://images7.alphacoders.com/669/thumb-1920-669739.jpg);
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
background-position:center top;
}
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
/*#banner{
background: url(.././img/banner/bg.jpg) no-repeat center top;
background-size: cover;
min-height: 100%;
}*/
.logo-name{
font-size: 65px;
margin-top: 140px;
color: #FFB03B;
}
.bannertext{
margin-top: 80px;
}
.bannerelements{
margin-left: 20px;
}
.mahaGov{
width: 70%;
margin-top: 70px;
margin-bottom: 80px;
}
/* button custom style */
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
margin-left:10px;
margin-right: 10px;
margin-top:25px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.logo{
margin-left: 50px;
margin-top: 20px;
}
#buildingblocks{
padding-left: 3%;
padding-right: 3%;
}
.text-color{
color :#114576;
}
.ptext-size{
font-size: 1.4em;
font-weight: bold;
}
.text-white{
color :#ffffff;
}
/* Custom font effects */
h1{
margin-top: 1px;
margin-bottom: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section align-center" id="section0">
<div class="heading">
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="http://findicons.com/files/icons/2796/metro_uinvert_dock/128/microsoft_new_logo.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate" id="donate">DONATE NOW</button>
</div>
</div>
</header>
<div class="col-md-12 home-col12">
<div class="col-md-5">
<div class="bannertext bannerelements">
<h1>45% of youth</h1>
<h1>make the wrong</h1>
<h1>career and</h1>
<h1>life choices.</h1>
</div>
<div class="bannerelements">
<br>
<p class="text-color ptext-size">The Right Education can change that</p>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-round" style="margin-left: 40px;">BE A PART OF CHANGE</button>
</div>
<div class="row bannerelements mahaGov">
<img src="assets/img/home/banner/mahaGov1.png" class="pull-left img-responsive" alt="Govt. of Maharashtra Logo">
</div>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
hello this code is for the menu-bar as well as section.my website is divided in sections.each section is full page height 100% for all screen.i want to set my header fixed on top but i want to shrink my menu or Resize my menu on Scroll of Page.as in this link "http://trungk18.github.io/Resizing-Header-On-Scroll/"

Jump on slideUp jQuery

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

Progress Bar with Cycle Divider [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to create a progress bar and I want a cycle divider so that I can divide the situations I have
Can someone give me a solution ?

I tried to recreate your progress bar, see my fiddle here.
Just add a class .current to the .cycle you want to be currently highlighted. I used pure CSS on this with floats for better compatibility.
You can add numbers to the circles by adding .counter class to the .progress element.
.progress, .progress * { box-sizing: border-box; }
.progress {
width: 410px;
padding: 15px;
padding-left: 25px;
margin: 20px;
border-radius: 3px;
background: #ddd;
}
.progress .cycle {
width: 90px;
height: 10px;
border: 1px solid #111;
float: left;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
Using Floats
<div class="progress">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
I also created another demo here using the CSS3 flex-box approach.
The contents of the .progress element will now adjust according to the width of the element. This gives way to adding more cycles dynamically and adjusting the progress bar width without worrying about fixed widths. Also, this prevents the cycles from wrapping in very compressed widths.
body { font-family: Arial; font-weight: normal;}
.progress, .progress * { box-sizing: border-box; }
.progress {
padding: 25px;
margin: 20px;
border-radius: 3px;
display: flex;
flex-flow: row nowrap;
background: #ddd;
}
.progress .cycle {
height: 10px;
border: 1px solid #111;
flex: 1 0 auto;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
flex: 0 0;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
/* Fixed Width */
.fixed1 {
width: 400px;
}
.fixed2 {
width: 300px;
}
<h2>Using Flex</h2>
6 cycles (fixed width)
<div class="progress fixed1">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
9 cycles (100% width)
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
5 cycles (fixed width, numbered)
<div class="progress counter fixed2">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
</div>
7 cycles (100%, numbered)
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
The only problem for the CSS3 flexbox approach is browser support. If the browser support is alright with you, then go for the flex-box approach :)

Develop Reference

JavaScript is the programming language of the Web.

Responsive horizontal JS scroll - javascript

Related

Change input spinner number and with that change input value

toggle Jquery doesn't work

Animated (shrinking) Resizing Header On Scroll in bootstrap

Jump on slideUp jQuery

Progress Bar with Cycle Divider [closed]

Categories

Resources