Develop Reference

How to Create a Coupon box with toggle button

I'm trying to create a coupon code showing button like this one. When the user slides to the left, the coupon code needs to show. Any ideas? Thank you.

In the example below, I coded for 4 different scenarios.
I hope your problem will be solved this way. If you have any questions, write without hesitation.
Run Code Snippet:
var el;
document.addEventListener("click", function(event) {
el = event.target.closest('.coupon.onclick');
el && el.classList.toggle('active');
});
.coupon {
position: relative;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
}
.coupon .code {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
border: 2px dashed green;
color: green;
font-weight: 500;
border-radius: 6px;
padding: 6px 8px;
user-select: all;
}
.coupon .mask {
position: relative;
z-index: 1;
background: green;
color: white;
border-radius: 6px;
padding: 6px 8px;
transition: .3s;
user-select: none;
}
.coupon.onhover:hover .mask,
.coupon.onclick.active .mask {
transform: translateX(-100%);
}
.coupon.onhover:hover .mask.bottom,
.coupon.onclick.active .mask.bottom {
transform: translateY(100%);
}
<h3>On Hover: Left Transform:</h3>
<div class="coupon onhover">
<div class="code">0AB9XOIJ</div>
<div class="mask">Coupon Code</div>
</div>
<h3>On Hover: Bottom Transform</h3>
<div class="coupon onhover">
<div class="code">0AB9XOIJ</div>
<div class="mask bottom">Coupon Code</div>
</div>
<h3>On Click: Left Transform</h3>
<div class="coupon onclick">
<div class="code">0AB9XOIJ</div>
<div class="mask">Coupon Code</div>
</div>
<h3>On Click: Bottom Transform</h3>
<div class="coupon onclick">
<div class="code">0AB9XOIJ</div>
<div class="mask bottom">Coupon Code</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();
}

Why is my Add to Cart button appearing next to the image instead of below the image even on using the line break tag?

I am creating an eCommerce site. I have a header and a sidebar. And then I have the main body section. In the main body section, I have a heading for Featured Products. And then I have some images below the Featured Products heading which I will replace with actual images. But when I add the image, and then I also add the Add the Add to Cart button below each image. But when I add a button, it is coming right to the image instead of below it. Even though I have a line break tag.
Some help will be really appreciated
Thanks
The index.php
<?php
require_once 'Partials/header.php';
?>
<br><br><br><br>
<link rel="stylesheet" type="text/css" href="Styles/Style.css">
<div class="main_wrapper">
<?php
require_once 'Partials/sidebar.php';
?>
<!--The main body section start here-->
<div class="main">
<!--Featured Products List Starts Here-->
<h2 style="text-align: center;">Featured Products</h2>
<div class="container">
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
</div>
<h2 style="text-align: center;">New Arrivals</h2>
<div class="container 2">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Clothes</h2>
<div class="container 3">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Brands</h2>
<div class="container 4">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
justify-content: space-between;
}
.container > img {
display: block;
margin-top: 5px;
}
</style>
<!--Featured Products List Ends Here-->
<button name="Black">Black</button>
</div>
<!--The main body section ends here-->
<!--Back To Top Coding Starts Here-->
<head>
<style>
#back-to-top-btn{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
border: 3px solid #333;
border-radius: 50%;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus{
background-color: #333;
color: #fff;
}
/* Animations */
.btnEntrance {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
/* zoomIn */
/* #keyframes btnEntrance {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 1;
}
} */
/* fadeInUp */
#keyframes btnEntrance {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.btnExit {
animation-duration: 0.25s;
animation-fill-mode: both;
animation-name: btnExit;
}
/* zoomOut */
/* #keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} */
/* fadeOutDown */
#keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>
</body>
</html>
And then this is the header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
/*background-image: radial-gradient(circle, red, yellow, green);*/
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
height: 76px
}
.logo {
grid-column: 2 / 3;
position: absolute;
height: 200px;
//transform: scale(2,2);
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 74px;
margin-top: 1.1px;
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<form action="" method="" class="search" style="margin-top: 24px;">
<input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
</form>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
And then this is the sidebar.php
<style>
.sidenav {
height: 100%;
width: 160px;
margin-top: 6.1%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<div class="sidenav">
New Arrivals
Featured
Clothes
Brands
</div>

I reviewed your code and the reason you're not getting the result you want is because you put everything inside the div CONTAINER.
You put IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON so when the code runs it displays everything in a straight line as it actually is.
in order to get the result you want you need to structure your code with more divs inside the container div.
EXAMPLE:
<div class="container">
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
</div>
Let me know if you need more help.
And P.S keep your style code inside the style.css and not html files.

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help

You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/