Develop Reference

Why is my jQuery not detecting a click on an <i> tag?

$('.close_cart').click(function(e) {
e.preventDefault();
$(this).find('.btn_container').remove();
});
.btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.btn_container .btn_cart .close_cart:before {
content: "";
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/43730af340cb0a2cc17396e3001a86ac?s=256&d=identicon&r=PG&f=1);
position: absolute;
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart"></i>
</a>
</div>
The above jQuery code is somehow not working. I have checked the console and I get no error message. The jQuery code is loading. I think this problem is probably caused by the pseudo-element. I've realised the :before makes my tag not have any width, however, I've manually added width and a display:block on the tag and I'm still not getting any response. It's obvious that I'm doing something wrong but I can't seem to see what is it. Help please! Thank you :D

Steps to make it work:
Added an image that works here
Added display: block;
Removed position: absolute;
Removed .cart class as it's not in the demo HTML.
$('.close_cart').click(function(e) {
e.preventDefault();
console.log("Hello");
});
.cart .btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.btn_container .btn_cart .close_cart:before {
content: '';
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/43730af340cb0a2cc17396e3001a86ac?s=256&d=identicon&r=PG&f=1);
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart"></i>
</a>
</div>

In order to actually have your code successfully close your cart, you need to implement that functionality in your code.
Right now, your click function does nothing but log "Hello" to the console.
You could use the jquery .hide() function to hide the cart (https://api.jquery.com/hide/).
The code below would hide the HTML element with id="cart" upon click.
$('.close_cart').click(function (e) {
e.preventDefault();
$('#cart').hide();
console.log("Hello");
});
.cart .btn_container .btn_cart .close_cart {
opacity: 0.8;
cursor: pointer;
margin-left: 1rem;
}
.cart .btn_container .btn_cart .close_cart:before {
content: "";
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(../_img/close.png);
position: absolute;
top: 3.25px;
right: 3px;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cart">
<div class="btn_container">
<a class="btn_cart" title="Aaaaa" href="#">
Aaaaa
<i class="close_cart">x</i>
</a>
</div>
</div>

How do you place fade function on all classes?

Using vanilla js, I am trying to target all elements with the class headingScroll, so when I scroll 100px from the top, it fades away. When I make the function access the DOM as getelementbyid, and then give say, my name the id name, it works, but not with classes.
Anyone have any workarounds or notice that this code is ineffective with what I am trying to do?
window.onload = function() {
const EFFECT = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
if(window.scrollY>100) {
EFFECT.classList.add('show');
}
else {
EFFECT.classList.remove('show')
}
}
scrollEffect('.headingScroll');
}
/*Header*/
.header-img {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 140, 255, 0.5)), url("../images/coding-on-laptop.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
}
.header-text {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
color: white;
}
#headingName {
font-size: 4rem;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.remove {
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.show {
opacity: 0;
}
.header-social {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
}
.fa {
color: white;
font-size: 2rem;
text-align: center;
text-decoration: none;
margin: 5px;
}
.fa:hover {
color:#0779e4;
transition: ease-in-out .3s;
transform: translateY(-2px);
}
.scroll_down {
position: absolute;
bottom: 20%;
left: 50%;
font-size: 2em;
transform: translate(-50%, -20%);
color: white;
padding-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,.5)
}
<!--Header-->
<header class="header-img" id="home">
<div class="triangle_1"></div>
<div class="triangle_2"></div>
<div class="header-text">
<h1 id='headingName' class="headingScroll">Alex Schmidt</h1>
</div>
<div class="header-social">
</div>
<div class='scroll_down'>
<p>Scroll</p>
<span></span>
</div>
</header>
<!--End Header-->
<!--About-->
<div class="about-wrapper" id="about">
<div class="triangle_3"></div>
<div class="triangle_4"></div>
<div class="about">
<div class="inner-about">
<h1>About</h1>
<h2>Front-end Engineer</h2>
<h3>Located in Portland, OR</h3>
</div>
</div>

You have to loop through each one to apply.
window.onload = function() {
const effects = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
effects.forEach(function(el){
if(window.scrollY>100) {
el.classList.add('show');
}
else {
el.classList.remove('show')
}
});
}
scrollEffect();
}

Transition between CSS background images

In my site I have a switch between a down arrow & and an up arrow. See here: http://jsfiddle.net/4uLghzg7/
Is there a way I can add a slight animation transition when clicked? So it fades in/out between the two icons?
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

You need a special trick to fade between background-images, you will need two elements, and fade the inner elements opacity:
<div id="arrowUp">
<div id="arrowDown">
</div>
</div>
Demo of your code (modified):
function close_accordion_section(source) {
$(source).parent().find('.arrowDown').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
if ($('.arrowDown').is('.active')) {
close_accordion_section(e.target);
} else {
$('.arrowDown').addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.arrowUp {
width: 20px;
height: 20px;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.arrowDown {
opacity: 0;
width: 20px;
height: 20px;
background-color: white;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
background-size: 100%;
background-repeat: no-repeat;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.arrowDown.active {
opacity: 1;
background-position: center center;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.accordion-section-title.active,
.accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">More information</a>
<div class="arrowUp" style="float: right">
<div class="arrowDown">
</div>
</div>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

you can't actually do much animation on raster background images but if css 3 transition is acceptable you can try something like
.fade-background{
transition: background 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) !important;
}
I added a class "fade-background" on your anchor tag, fiddle here
http://jsfiddle.net/dango_x_daikazoku/4uLghzg7/5/

just write .click function in
$(function() {
});
Try this..
$(function() {
$('.accordion-section-title').click(function (e) {
e.preventDefault();
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
});
});

You could change the arrows to be actual elements (pseudo elements in the following example) and put them on top of each other. Then have the down arrow fade in/out on top of the up arrow to create the effect you're looking for.
// up arrow positioned absolutely
.accordion-section-title:before {
content: '';
position: absolute;
}
// down arrow positioned absolutely
.accordion-section-title:after {
content: '';
opacity: 0;
transition: opacity 0.2s ease;
position: absolute;
}
// animate in down arrow
.accordion-section-title:after {
content: '';
opacity: 1;
position: absolute;
}
jsfiddle working example: http://jsfiddle.net/4uLghzg7/6/
Hopefully this answers what you were asking about.

Add CSS Transition between image switch

In my site I have a switch between a down arrow & and an up arrow. See here
How do I change this to a CSS transition, so there's a brief break between the switch?
Here's my code:
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

You can do this in 2 ways that I can think of. One is by jQuery-UI and add a
.delay(2000)
to the end of your transition. The other way is in your css class for your transition is do a
transition-delay: 2s;
For the arrow, it would be better to transition and rotate the image.
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
Here is a neat website to help you with that: http://www.css3maker.com/css3-transition.html

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});