on click functions being applied to all divs with same class - javascript

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

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

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

Bottom-always (non-sticky) footer working with different window sizes

I'm working on a footer which always be on the bottom of the page BUT isn't sticky. It's demand It'll be responsive. At the moment it's only on the bottom in two cases: first when I set bottom property to -350px (giving bottom:0px causing my footer lands somewhere in the middle of the page) or second when I manually change it's window size (as you probably notice I'm using Bootstrap).
Because I want to set a dynamic gallery in the future (when you scroll down the
more images will be appearing) I've tried to cope with this using JQuery but ... it seems to have some bugs I can't see. What should I do ?
$(document).ready(function() {
var currentHeight = $(document).height();
/*alert(currentHeight);*/
var currentFooter = currentHeight - 50;
$('footer').css("bottom", currentFooter);
$(window).on('scroll', function() {
/*var navHeight = $(window ).height() - 67;*/
var heHeight = $('.header').height();
if ($(window).scrollTop() > heHeight) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
});
nav {
margin-bottom: -10px;
margin-top: 0px;
width: 100%;
height: 80px;
display: inline-block;
position: relative;
z-index: 3;
top: -75px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
}
.sticky {
position: fixed;
top: 0;
}
section {
background-color: rgb(242, 242, 242);
width: 100%;
height: 130px;
padding-top: 10px;
padding-bottom: 15px;
}
nav h2 {
font-weight: 700;
display: inline-block;
padding-right: 15px;
margin-left: 39px;
}
nav p {
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
}
nav p .yours {
letter-spacing: 3px;
}
section ul li {
list-style: none;
display: inline-block;
font-size: 12px;
margin-right: 9px;
}
section ul li a {
color: rgb(132, 132, 132);
text-decoration: none;
}
section li a:hover {
text-decoration: none;
color: black;
}
/*#lorem{
width:640px;
height:500vh;
font-size:14px;
padding-top:50px;
margin:0 auto 0;
}
*/
.bg-grey {
margin-top: 35px;
}
#their {
display: block;
/* padding-left: 10px;
margin-left:40px;
padding-right:500px;
margin-bottom: 60px;
padding-top:5px;
padding-bottom:5px;*/
width: 342px;
height: 15px;
background: rgb(242, 242, 242);
position: relative;
left: 250px;
margin-bottom: 60px;
}
p {
display: inline-block;
padding-left: 22px;
margin-top: 60px;
padding-top: 10px;
font-weight: bold;
}
#th p {
margin-top: 30px;
}
#th p:first-of-type {
margin-top: -20px;
}
.thumbnail {
border: none;
border-radius: 0;
background: rgb(85, 102, 119);
!important
}
#own {
position: absolute;
top: -100px;
padding: 20px 102px;
margin-right: -190px;
border-radius: 5px;
font-size: 13px;
font-weight: bold;
}
#own:hover {
/*background:rgba(255, 196, 0, 0.18); */
background: rgba(244, 97, 19, 0.72);
color: black;
}
#th {
/*
display: block;
position:relative;
top:-70px;
padding-top:20px;
right:-10px;
width:500px;
height: 2000px;
*/
display: block;
position: absolute;
top: 330px;
left: 810px;
margin-bottom: 30px;
}
#th input {
margin-left: 15px;
}
footer {
background-color: rgb(175, 175, 175);
position: relative;
width: 100%;
height: 80px;
/*bottom:-350px;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>TEAM</li>
<li>CONTACT</li>
</ul>
</section>
<nav>
<h2>TRAVEL MOOD</h2>
<p><span class="yours">what</span> is <span class="yours">your's ?</span></p>
</nav>
<div class="container-fluid all">
<div class="container-fluid">
<div class="row">
<p class="to_know">GET TO KNOW THEIR STORIES</p>
<div id="their"></div>
</div>
</div>
<div class="container-fluid bg-grey" id="portfolio">
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="china.jpeg" alt="china" class="img-responsive">
<p>Donald & Ronald</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="tatry.jpeg" alt="tatry" class="img-responsive">
<p>Louis</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="vienna.jpeg" alt="vienna" class="img-responsive">
<p>Alejandra</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="croatia.jpeg" alt="croatia" class="img-responsive">
<p>Marlene & Rita</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="almostcolorado.jpeg" alt="almostcolorado" class="img-responsive">
<p>X & Y </p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="country.jpeg" alt="county" class="img-responsive">
<p>Mr Doe & Mrs Doe</p>
</div>
</div>
</div>
<form id="th">
<div class="form-group row">
<div class="col-md-6">
<button type="submit" class="btn btn-sm active" id="own">CREATE YOUR OWN !</button>
</div>
</div>
<p>WEATHER</p><br>
<input type="radio" name="weather" value="no_matter" checked> no matter<br>
<input type="radio" name="weather" value="warmer"> warmer<br>
<input type="radio" name="weather" value="colder"> colder<br>
<input type="radio" name="weather" value="the_same"> the same<br>
<p>COMPANY</p><br>
<input type="radio" name="company" value="some_time_alone" checked> no matter<br>
<input type="radio" name="company" value="couple"> couple<br>
<input type="radio" name="company" value="with_family"> with family<br>
<input type="radio" name="company" value="girls_boys_adventure"> girls/boys adventure<br>
<p>HOW FAR</p><br>
<input type="radio" name="location" value="another city" checked> another city<br>
<input type="radio" name="location" value="another country"> another country<br>
<input type="radio" name="location" value="another continent"> another continent<br>
<p>PLACE WHERE YOU CAN</p><br>
<input type="radio" name="activity" value="active"> stay active<br>
<input type="radio" name="activity" value="leisure"> have some leisure time<br>
<input type="radio" name="activity" value="party"> part..y/cipate<br>
<input type="radio" name="activity" value="culture"> bite some culture<br>
</form>
</div>
<footer></footer>
</div>

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

View divs when click buttons

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>

JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

Categories

Resources