Preventing apperance of jumping when fading elements in and out

Preventing apperance of jumping when fading elements in and out - javascript

Objective
Make it so that the text is the only thing that fades in and out, while the containers that hold the text have a fixed height to remove the apperance of text jumping
Remove any duplication of code in scripts.js especially with all the let statements
Codepen: http://codepen.io/onlyandrewn/pen/NbdGrg
Problem
I have a series of panels and on button click of either btn--previous or btn--next you get shown the next panel in the series .panel--one, .panel--two, the old one fades out and the new one fades in. However, when fading elements in and out the text appears to jump.
scripts.js
// Complete
function completeStepOne() {
$(".circle--one").removeClass("is-selected");
$(".check--one").removeClass("is-hidden");
$(".text--one").addClass("is-strikethrough");
$(".circle--one").addClass("is-completed");
$(".number--one").addClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".text--two").removeClass("is-grey");
}
function completeStepTwo() {
$(".circle--two").removeClass("is-selected");
$(".check--two").removeClass("is-hidden");
$(".text--two").addClass("is-strikethrough");
$(".circle--two").addClass("is-completed");
$(".number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
function completeStepsOneTwo() {
$(".circle--one, .circle--two").removeClass("is-selected");
$(".check--one, .check--two").removeClass("is-hidden");
$(".text--one, .text--two").addClass("is-strikethrough");
$(".circle--one, .circle--two").addClass("is-completed");
$(".number--one, .number--two").addClass("is-hidden");
$(".circle--three").addClass("is-selected");
$(".text--three").removeClass("is-grey");
}
// Incomplete
function incompleteStepTwo() {
$(".number--one").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".text--one").removeClass("is-strikethrough");
$(".circle--two").removeClass("is-selected");
$(".text--two").addClass("is-grey");
$(".check--one").addClass("is-hidden");
}
function incompleteStepThree() {
$(".number--two").removeClass("is-hidden");
$(".circle--two").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--two").addClass("is-hidden");
$(".text--two").removeClass("is-strikethrough");
$(".circle--three").removeClass("is-selected");
$(".text--three").addClass("is-grey");
}
function incompleteStepsOneTwo() {
$(".number--one, .number--two").removeClass("is-hidden");
$(".circle--one").addClass("is-selected");
$(".circle--two").removeClass("is-completed");
$(".check--one, .check--two").addClass("is-hidden");
$(".text--one, .text--two").removeClass("is-strikethrough");
$(".circle--two, .circle--three").removeClass("is-selected");
$(".text--two, .text--three").addClass("is-grey");
}
// Show panels
function showPanelOne() {
$(".inner--one").fadeIn();
$(".inner--one").removeClass("is-hidden");
// Hide panels two and three
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHim() {
$(".panel--him").fadeIn();
$(".inner--him").fadeIn();
$(".panel--him").removeClass("is-hidden");
$(".inner--him").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelHer() {
$(".panel--her").fadeIn();
$(".inner--she").fadeIn();
$(".panel--her").removeClass("is-hidden");
$(".inner--she").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelAnyone() {
$(".panel--anyone").fadeIn();
$(".inner--anyone").fadeIn();
$(".panel--anyone").removeClass("is-hidden");
$(".inner--anyone").removeClass("is-hidden");
// Hide panels one and three
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--spend").fadeOut();
$(".inner--spend").addClass("is-hidden");
}
function showPanelThree() {
$(".panel--three").fadeIn();
$(".inner--spend").fadeIn();
$(".panel--three").removeClass("is-hidden");
$(".inner--spend").removeClass("is-hidden");
// Hide panels one and two
$(".inner--one").fadeOut();
$(".inner--one").addClass("is-hidden");
$(".inner--two").fadeOut();
$(".inner--two").addClass("is-hidden");
}
$(".btn--next").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
if (circleOneSelected) {
if (giftsforHimSelected) {
completeStepOne();
showPanelHim();
} else if (giftsforHerSelected) {
completeStepOne();
showPanelHer();
} else if (giftsforKidsSelected) {
completeStepsOneTwo();
showPanelThree();
} else if (giftsforAnyoneSelected) {
completeStepOne();
showPanelAnyone();
}
}
if (circleTwoSelected && btnLikeSelected) {
completeStepTwo();
showPanelThree();
}
if (circleThreeSelected && btnSpendSelected) {
// Do action
}
});
$(".btn--previous").on("click", function(){
// Progress bar circles
let circleOneSelected = $(".circle--one").hasClass("is-selected");
let circleTwoSelected = $(".circle--two").hasClass("is-selected");
let circleThreeSelected = $(".circle--three").hasClass("is-selected");
// Panel One options
let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected");
let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected");
let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected");
let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected");
// Panel Two options
let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected");
let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected");
let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected");
let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected");
let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected");
let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected");
// Panel Three options
let under25 = $(".btn--option-25").hasClass("is-selected");
let under50 = $(".btn--option-50").hasClass("is-selected");
let under75 = $(".btn--option-75").hasClass("is-selected");
let under100 = $(".btn--option-100").hasClass("is-selected");
let under250 = $(".btn--option-u250").hasClass("is-selected");
let over250 = $(".btn--option-o250").hasClass("is-selected");
let btnLikeSelected = $(".btn--like").hasClass("is-selected");
let btnHimSelected = $(".btn--him").hasClass("is-selected");
if (circleOneSelected) {
}
if (circleTwoSelected) {
incompleteStepTwo();
showPanelOne();
}
if (circleThreeSelected) {
if (giftsforHimSelected) {
incompleteStepThree();
showPanelHim();
} else if (giftsforHerSelected) {
incompleteStepThree();
showPanelHer();
} else if (giftsforKidsSelected) {
incompleteStepsOneTwo();
showPanelOne();
} else if (giftsforAnyoneSelected) {
incompleteStepThree();
showPanelAnyone();
}
}
});
index.html
<!-- Panel One -->
<div class="panel panel--one">
<div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div>
<section class="panel__progress">
<ul>
<li>
<div class="panel__pick">
<p class="panel__circle circle--one is-selected">
<i class="fa fa-check check--one is-hidden" aria-hidden="true"></i>
<span class="panel__number number--one">1</span>
</p>
<p class="panel__text text--one">Choose a category</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--two">
<i class="fa fa-check check--two is-hidden" aria-hidden="true"></i>
<span class="panel__number number--two">2</span>
</p>
<p class="panel__text text--two is-grey">Pick some items</p>
</div>
</li>
<li>
<div class="panel__pick">
<p class="panel__circle circle--three">
<i class="fa fa-check check--three is-hidden" aria-hidden="true"></i>
<span class="panel__number number--three">3</span>
</p>
<p class="panel__text text--three is-grey">Name your budget</p>
</div>
</li>
</ul>
</section> <!-- .panel__progress -->
<div class="test">
<div class="panel__inner inner--one">
<div class="panel__info">
<h2 class="panel__title">Who is the gift for?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Eeny, meeny, miny, moe</h3> -->
</div>
<div class="button__group group--quarter">
<button class="btn btn--option btn--option-him btn--who">Gifts for him <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-her btn--who">Gifts for her <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-kids btn--who">Gifts for kids <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-anyone btn--who">Gifts for anyone <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--one"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--one">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div>
</div> <!-- .panel .panel--one -->
<!-- Panel Two -->
<!-- Gifts for Him -->
<div class="panel panel--two panel--him is-hidden">
<div class="test">
<div class="panel__inner inner--two inner--him">
<div class="panel__info">
<h2 class="panel__title">What are some things he might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--option-him-jewelry btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-scarves btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-fishing btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-cologne btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-shirts btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-him-sports btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .test -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Her -->
<div class="panel panel--two panel--her is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--she">
<div class="panel__info">
<h2 class="panel__title">What are some things she might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cashmere <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Perfume <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sweaters <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Beauty <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Candles <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Necklaces <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Sports jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Watches <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Two -->
<!-- Gifts for Anyone -->
<div class="panel panel--two panel--anyone is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--two inner--anyone">
<div class="panel__info">
<h2 class="panel__title">What are some things they might like?</h2>
<h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3>
</div>
<div class="button__group">
<button class="btn btn--option btn--like">Cookbooks <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Spirits <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Suitcases / bags <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Food<i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gardening <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gadgets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Made in St. Louis <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Gifts that give back <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Fitness <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Subscriptions <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Ornaments <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Pets <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Personalized <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like">Other <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--like is-hidden"> <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--two -->
<!-- Panel Three -->
<div class="panel panel--three is-hidden">
<!-- <div class="advertising advertising--horizontal">
<img src="http://placehold.it/720x90">
</div> -->
<div class="panel__inner inner--spend">
<div class="panel__info">
<h2 class="panel__title">How much do you want to spend?</h2>
<h3 class="panel__instructions pick--one">Pick one of the options below</h3>
<!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> -->
</div>
<div class="button__group">
<button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
<button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
</div>
<div class="button__group button__controls">
<button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button>
<button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div> <!-- .panel__inner -->
</div> <!-- .panel .panel--three -->
app.css
/*----------------------------------
BUTTONS
----------------------------------*/
.button__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin-top: 15px;
margin-bottom: 15px;
margin: 0 auto;
padding-left: 30px;
}
.button__group.group--quarter {
width: 50%;
}
.button__controls {
margin-top: 60px;
margin-bottom: 60px;
}
button {
display: block;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
padding-right: 60px;
padding-left: 60px;
cursor: pointer;
text-align: left;
border: none;
background: #ffffff;
}
.btn--previous,
.btn--next,
.btn--buy,
.btn--all,
.btn--recommend,
.btn--option {
text-transform: uppercase;
border-radius: 3px;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-weight: 700 !default;
}
.btn--previous,
.btn--next {
display: inline;
margin-right: 30px;
min-width: 225px;
text-align: center;
}
.btn--all,
.btn--recommend,
.btn--option {
border: 1px solid #aaaaaa;
}
.btn--previous {
color: #c62828;
border: 1px solid #c62828;
}
.btn--previous .fa-long-arrow-left {
color: #c62828;
}
.btn--all,
.btn--recommend,
.btn--option {
font-weight: 400;
text-transform: none;
color: #212121;
display: inline-block;
margin-right: 30px;
min-width: 225px;
min-height: 75px;
border-bottom: 2px solid #aaaaaa;
}
.btn--all,
.btn--recommend {
background: #c62828;
border: none;
color: #fff;
font-weight: 700;
text-align: center;
}
.btn--all:hover,
.btn--recommend:hover {
background: #990000;
border: none;
}
.btn--option {
text-align: left;
padding-left: 30px;
min-width: 260px;
min-height: 75px;
font-size: 1.6rem;
}
.btn--option.is-selected {
border: 2px solid #c62828;
color: #c62828;
}
.btn--option .fa-check {
color: #c62828;
float: right;
position: relative;
right: -40px;
top: -1px;
}
.btn--option .fa-check.is-grey {
color: #e7e7e7;
}
.btn--option .fa-check.is-red {
color: #c62828;
}
.btn--sidebar {
font-weight: 400;
text-transform: none;
margin: 0;
font-size: 1.6rem;
padding-left: 15px;
font-family: "Roboto";
background: transparent;
color: #212121;
margin-top: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.btn--sidebar:hover {
color: #aaaaaa;
color: #ccc;
}
.btn--next,
.btn--buy {
color: #ffffff;
border: none;
background: #c62828;
}
.btn--buy {
margin: 0;
width: 100%;
text-align: center;
margin-top: 15px;
text-decoration: none;
}
.btn--buy:visited {
text-decoration: none;
}
.btn--view {
border: none;
margin-bottom: 0;
}
.btn--view:hover {
color: #212121;
}
.btn--next {
border-bottom: 2px solid #990000;
}
.btn--next:hover {
background: #990000;
transition: 0.2s;
}
/* Custom query */
#media (max-width: 1250px) {
.button__group {
width: 80%;
}
.button__group.group--quarter {
width: 70%;
}
}
/* Large devices */
#media (max-width: 1200px) {
.button__group {
width: 90%;
}
}
/* Large devices */
#media (max-width: 1024px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 85%;
}
}
/* Medium devices */
#media (max-width: 768px) {
.button__group {
width: 100%;
}
.button__group.group--quarter {
width: 100%;
}
}
/* Medium devices */
/* Small devices */
#media (max-width: 480px) {
.btn--option {
min-width: 275px;
}
.btn--all,
.btn--recommend {
min-width: 275px;
}
}
/*----------------------------------
LIST
----------------------------------*/
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 15px;
text-align: center;
}
.panel {
width: 100%;
height: 100%;
position: relative;
}
.panel.is-hidden {
display: none;
}
.panel__progress {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.panel__circle {
width: 50px;
height: 50px;
margin: 0 auto;
padding: 15px;
border: 1px solid #aaaaaa;
border-radius: 50%;
font-size: 1.6rem;
font-weight: 300 !default;
}
.panel__circle.is-selected {
color: #ffffff;
border: none;
background: #c62828;
}
.panel__circle.is-completed {
border: 1px solid #c62828;
}
.panel__circle.is-completed .fa-check {
color: #c62828;
}
.panel__text {
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
}
.panel__number {
position: relative;
top: -22px;
}
.panel__number.is-hidden {
display: none;
}
.panel__pick {
padding: 15px;
text-align: center;
}
.panel__title {
font-family: "Merriweather";
font-weight: 900;
text-transform: none;
margin-top: 30px;
font-size: 4rem;
}
.panel__instructions {
text-align: center;
font-weight: 400;
font-family: "Open Sans";
font-size: 1.8rem;
color: #aaaaaa;
margin: 0;
margin-top: 15px;
margin-bottom: 30px;
}
/* Large devices */
/* Large devices */
/* Custom query */
#media (max-width: 875px) {
.panel__title {
width: 80%;
margin: auto;
margin-top: 30px;
}
}
/* Medium devices */
/* Medium devices */
#media (max-width: 640px) {
.panel__circle,
.panel__text {
display: none;
}
}
/* Small devices */
#media (max-width: 480px) {
.panel__title {
font-size: 3.5rem;
}
}

use combination of transition and visibility in CSS
.element {
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.element.is-selected {
visibility:visible;
opacity:1;
}

Related

.click function is executed multiple times on every click

I am using an expandable card grid from CodePen (https://cdpn.io/nailaahmad/fullpage/LGRxWJ).
I added a button at the end of each card to close the current card and open the next one. It works well when you open the first card and click through all the card using that button at the end of each card. The cards can also be opened and closed by clicking on the card__inner element. When I mix the card__inner and the end of card navigation method, the function closeThisAndOpenNext is executed multiple times on every click of the and not the adjacent card is opened, but one further away from the open card.
Does anyone know why and how to fix it so that only the card right next to the open card is opened with the "next"-button at the end of the card?
var $cell = $('.card');
$('.js-next').hide();
//open and close card when clicked on card
$cell.find('.js-expander').click(function() {
function getIndexOfList(list, element) {
var $index = 0;
for (let index = 0; index < $cell.length; index++) {
const item = $cell[index];
if (item == element[0]) {
$index = index;
break;
}
}
return $index;
}
function closeThisAndOpenNext() {
var $currentCard = $('.is-expanded')[0];
$($currentCard).removeClass('is-expanded').addClass('is-collapsed');
$($currentCard).find('.js-next:first').hide();
//var $index = getIndexOfList($cell, $currentCard);
$index = $($currentCard).data('index');
if ($index < 9) {
$nextCard = $cell[$index + 1];
} else {
return;
}
$($nextCard).removeClass('is-collapsed').addClass('is-expanded');
$($nextCard).find('.js-next:first').show();
$nextButton = $($nextCard).find('.js-next:first');
if ($nextButton.length > 0 && $nextButton[0].onclick == null) {
$($nextButton).click(closeThisAndOpenNext);
}
}
var $thisCell = null;
if ($(this).find('.is-expanded').length == 0) {
$thisCell = $(this).closest('.card');
} else {
$thisCell = $(this).find('.is-expanded:first');
}
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
$($thisCell).find('.js-next:first').show();
if ($cell.not($thisCell).hasClass('is-inactive')) {
//do nothing
} else {
$cell.not($thisCell).addClass('is-inactive');
}
$nextButton = $thisCell.find('.js-next:first');
$($nextButton).click(closeThisAndOpenNext);
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
$($thisCell).find('.js-next:first').hide();
}
});
//close card when click on cross
$cell.find('.js-collapser').click(function() {
var $thisCell = $(this).closest('.card');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
$($thisCell).find('.js-next:first').hide();
});
#charset "UTF-8";
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: flex;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
transition: all 0.2s ease-in-out;
}
#media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
#media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
transform: scale(1);
}
#media screen and (min-width: 992px) {
.card:nth-of-type(3n+2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n+3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n+4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n+2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n+3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Expanding Card Grid With Flexbox</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Slabo+27px|Yesteryear'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="wrapper">
<div class="header">
<h1 class="header__title">Expanding Card Grid</h1>
<h2 class="header__subtitle">with Flexbox</h2>
</div>
<div class="cards">
<div class=" card [ is-collapsed ] " data-index="0">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="1">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="2">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="3">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="4">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="5">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="6">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="7">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="8">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
<div class="text-center js-next"><i class="fa fa-angle-double-down"></i></div>
</div>
<div class=" card [ is-collapsed ] " data-index="9">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
</div>
</div>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

$($nextButton).click(closeThisAndOpenNext) assigns an event handler. Every time this line runs, another event handler is assigned. Or at least this is my memory of how this is supposed to work. I haven't researched it for this answer.
But the idea is the same. Any time you see the same behavior on click happen many times instead of the one time you expect, you probably have multiple handlers of the same func assigned.
I suggest not having multiple functions inside of functions here, and make sure that things that you only want to happen once, at least check to see if it's already happened (been assigned) before doing it again.

How to add Eventlisteners to all elements of a class but execute it only for a particular element during mouseover?

I've been trying to write a javascript code in which the user will be displayed three options (Purchase, Add to cart, Add to wishlists), whenever they will hover above an image of a book. The problem is that all the options for all the books are shown simultaneously when I hover above any image. Is there any way to display options only for the particular book on which the cursor is over.
let images = document.getElementsByClassName('images');
let options = document.getElementsByClassName('options');
for (const index of options)
{index.style.display = 'none';}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', () => {
for (const iterator of options) {
iterator.style.display = 'inline-block';
}
});
}
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseout', () => {
for (const iterator of options) {
iterator.style.display = 'none';
}
});
}
.slider {
display: flex;
justify-content: space-between;
margin: 25px 0px;
}
.book {display: inline-block; position: relative;}
.book a {display: block; width: 20vw;}
.info {
display: block;
text-align: center;
text-decoration: none;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
transition: color 250ms;
}
.info:hover {color: rgb(255, 0, 0);}
.book a:hover {color: rgb(255, 0, 0);}
.book .info:last-of-type {margin-top: 5px;}
.book_price {text-align: center; margin: 10px 0px;}
.book_price p {
display: inline;
color: rgb(90, 90, 90);
font-size: 17px;
font-weight: 500;
margin: 10px 5px;
}
.book_price span:last-of-type p {color: rgb(255, 0, 0);}
.options {
background-color: rgba(255, 255, 255, 0.7);
display: inline-block;
position: absolute;
bottom: 250px;
right: 62px;
padding: 10px;
}
.options a {
display: inline-block;
color: rgb(90, 90, 90);
font-size: 22px;
padding: 5px 10px;
width: auto;
transition: color 250ms;
}
.options a:nth-of-type(2) {border-right: 1px solid rgb(50, 50, 50); border-left: 1px solid rgb(50, 50, 50);}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="slider">
<div class="book" class="book_1">
<img src="http://www.cliometrics.com/bbw/images/product/1.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
$10,000,000 Marraige Proposal
-James Patterson
<div class="book_price">
<span><del><p>₹200.00</p></del></span>
<span><p>₹160.00</p></span>
</div>
</div>
<div class="book" id="book_2">
<img src="http://www.cliometrics.com/bbw/images/product/2.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
How to write your first Book
-Reader's Digest
<div class="book_price">
<span><del><p>₹400.00</p></del></span>
<span><p>₹260.00</p></span>
</div>
</div>
<div class="book" class="book_3">
<img src="http://www.cliometrics.com/bbw/images/product/3.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_4">
<img src="http://www.cliometrics.com/bbw/images/product/4.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_5">
<img src="http://www.cliometrics.com/bbw/images/product/5.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
<div class="book" class="book_6">
<img src="http://www.cliometrics.com/bbw/images/product/6.png" class="images">
<div class="options">
<i class="fal fa-plus"></i>
<i class="fal fa-shopping-cart"></i>
<i class="fal fa-heart"></i>
</div>
10,000 Time saving Ideas
-G.H. Miller
<div class="book_price">
<span><del><p>₹300.00</p></del></span>
<span><p>₹150.00</p></span>
</div>
</div>
</div>

You have to use the event object and the attribute target:
for (index = 0; index < images.length; index++) {
images[index].addEventListener('mouseover', (event) => {
for (const iterator of options) {
event.target.style.display = 'inline-block'; // Use event.target
}
});
}

Making a button appear on scroll with Javascript / jQuery

The button already has Javascript this is why I'm including it below - this code is separate to my question though. This is to change the button into something else ON CLICK - I want to keep the button hidden, until scroll... Looked all over and I'm unable to find the right way. (very new to JS).. and whenever I fiddle with the code it's breaking the JS which is why I'm seeking help.. it would be greatly appreciated.
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>

You need to attach a scroll function to the window if you want to show your div on scroll Jquery Scroll. Then the easiest way if you are not that familiar with javascript is to just add a class and control everything else with css. So you can just do something like the following:
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
This will add the class of scrolled when the window reaches 100px. If you want it to also remove the class when it goes back up instead of using addCLass you can just switch that to toggleClass and it will remove it as well.
So here it is:
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
body{
height:300vh;
}
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
opacity:0;
transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
opacity:1;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
If you dont want the transition effect you can instead just use the display property and remove opacity and transition from the css like so:
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
display:none;
}
.btn-purple.scrolled{
display:block;
}

Not 100 percent sure your requirement so I gave you something to start with. I added an element to measure on window scroll that will scroll (first .big) that when off screen a bit will trigger one event and when back on screen shows via another event trigger. I also put some style in the CSS that was in the markup. Note you probably only need one of the hide/show and just need the up/down class thing instead but I left that alone for you.
$(document).ready(function() {
$("#show").on('click', function() {
$("#mydiv").toggle(true);
$("#show").toggle(false);
});
$("#hide").on('click', function() {
$("#mydiv").toggle(false);
$("#show").toggle(true);
});
$(window).on('scroll', function() {
var t = document.getElementsByClassName("big")[0];
var tt = t.getBoundingClientRect().top;
if (tt < -100) { // as soon as its 100px off screen
setTimeout(function() {
$("#show").trigger('click');
}, 1000);
}
if (tt >= 0) { // as soon as its back on screen
setTimeout(function() {
$("#hide ").trigger('click');
}, 1000);
}
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
display: none;
}
#show>i,
#hide>i {
color: #fff;
font-weight: bolder;
font-size: 20px;
}
.big {
height: 20em;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch S<i class="fa fa-angle-up pull-right" aria-hidden="true">^^^</i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch H<i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true">xxx</i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
<div class='big'>make me scroll</div>
<div class='big'>(I just take up space)</div>

Laravel star ratings with font awesome

I am retrieving an average rating on my batsmen and currently displaying it as the number itself out of 5. I want to replace the number of the average rating with font awesome stars, so if its 4.63/5 then show 4.63 font awesome stars out of 5 rather than the number i'm currently showing. What is the best way to go about this?

For example, only with percent:
<div class="star-rating" title="75%">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="front-stars" style="width: 75%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
Style for star rating
/*---------- star rating ----------*/
.star-rating {
display: flex;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
display: flex;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
display: flex;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
var frontStars = document.getElementsByClassName("front-stars")[0];
var percentage = 100 / 5 * 4.63;
frontStars.style.width = percentage + "%";
var rating = document.getElementsByClassName("star-rating")[0];
rating.title = +(4.63.toFixed(2)) + " out of " + 5;
*{margin, padding:0}
/*---------- star rating ----------*/
.star-rating {
display: flex;
align-items: center;
font-size: 3em;
justify-content: center;
margin-top: 50px;
}
.back-stars {
display: flex;
color: #bb5252;
position: relative;
text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
display: flex;
color: #FFBC0B;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0;
}
<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="front-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>

I use this jquery library to add a star rating system when needed.
The Source: I include the jquery and style in a partial view that I only add to pages with the star system.
<script src="{{ asset('/vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/js/star-rating.js') }}" type="text/javascript"></script>
<link href="{{ asset('vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/css/star-rating.css')}}" media="all" rel="stylesheet" type="text/css" />
Form Item: Then I add it to my page using the
<div class="form-group">
<label for="text" class="col-sm-2 control-label">Rating:</label>
<input name='rate' id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">
</div>
To set a default value, or to show the existing value, you just need to add the value="" attribute to the input. The plugin does the rest.

Can't get show/hide to repeat on a menu item after first click

I am attempting to repeat a show/hide command on a div in a little navigation menu I am creating. I can get the show/hide to work once on all four buttons, but I can't get it to repeat if I were to click the same button three times. It simply adds the active class, but doesn't hide the remaining div's again. I want the action that clicking and unclicking the div has to work every time forever.
JS Fiddle here: https://jsfiddle.net/c3md14jf/
HTML:
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
JS:
var mobileSquare = $(".mobile-square");
mobileSquare.click(function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).hide();
activeSquare.click(function(){
mobileSquare.not(activeSquare).show();
});
});

So I only changed the on("click", function(){...}) handler, so that rather than using show/hide i'm using toggle. By doing this, I don't have to have the click handler for the activeclass. I suspect that may have been part of the problem.
var mobileSquare = $(".mobile-square");
mobileSquare.on("click", function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).toggle();
});
/* General Rules */
/* <link href="https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Quicksand', sans-serif;
*/
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/670a0bbb85.js"></script>
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>

Better off using toggle instead of show/hide. Take a look to see if this points you in the right direction.
`https://jsfiddle.net/c3md14jf/1/`

Develop Reference

JavaScript is the programming language of the Web.

Preventing apperance of jumping when fading elements in and out - javascript

use combination of transition and visibility in CSS .element { visibility:hidden; opacity:0; transition:opacity 0.5s linear; } .element.is-selected { visibility:visible; opacity:1; }

Related

.click function is executed multiple times on every click

How to add Eventlisteners to all elements of a class but execute it only for a particular element during mouseover?

Making a button appear on scroll with Javascript / jQuery

Laravel star ratings with font awesome

Can't get show/hide to repeat on a menu item after first click

Categories

Resources