I need help. I've made a first div(label:width) and 2nd div(input:width). They are inside of another div(control0). Same for div(control1, label:spacing, input:border).
What I want to achieve is place a label div next to the 2nd one. After clicking on the first one, the 2nd will move to the right and make a place for the range:input.
After clicking on the div again, the range:input with hide, and the 2nd div will be again close the 1st one.
I was trying to do it with flex, grid, inline-block etc. But there must be something messy with my code.
var widthButton = document.getElementById('label_box_width');
var inputBoxWidth = document.getElementById('input_box_width');
var inputBoxWidth2 = document.getElementById('input_box_width2');
var borderButton = document.getElementById('label_box_width2');
var inputBoxBorder = document.getElementById('control0').lastElementChild;
function showWidthRange() {
this.nextElementSibling.classList.toggle('widthAnimationToogleClass');
this.nextElementSibling.classList.toggle('widthRange');
};
function showWidthRange2() {
this.nextElementSibling.classList.toggle('widthAnimationToogleClass');
this.nextElementSibling.classList.toggle('widthRange');
};
widthButton.addEventListener('click', showWidthRange);
borderButton.addEventListener('click', showWidthRange2);
.divContainer {
-webkit-filter:url('#goo');
filter:url('#goo');
position:absolute;
top:100px;
left:25px;
}
#control0 {
width: 200px;
padding: 10px;
height: 60px;
position: relative;
/* overflow: hidden;*/
/* background-color: lightblue;*/
}
#control1 {
/* overflow: hidden;*/
padding: 10px;
width: 200px;
height: 60px;
position: relative;
/*background-color: lightblue;*/
}
#label_box_width,
#label_box_width2 {
margin: 3px;
width: 50px;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
font-size: 13px;
font-family: helvetica;
background-color: black;
border-radius: 25px;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
-webkit-animation: blop_label_box_width cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite;
animation: blop_label_box_width cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite;
}
#-webkit-keyframes blop_label_box_width {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
background-color: black;
}
}
#keyframes blop_label_box_width {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
background-color: black;
}
}
#label_box_width:hover,
#label_box_width2:hover{
background-color: darkorange;
}
#input_box_width,
#input_box_width2{
margin: 13px 12px 12px 53.5px;
border-radius: 25px;
height: 31px;
line-height: 25px;
background-color: black;
overflow: hidden;
position: absolute;
top: 10px;
}
.widthAnimationToogleClass {
-webkit-animation: blop_label_width cubic-bezier(0.570, 0.000, 0.275, 1.000) 2.5s forwards;
animation: blop_label_width cubic-bezier(0.570, 0.000, 0.275, 1.000) 2.5s forwards;
}
[class$="inputTest"]{
visibility: hidden;
}
.widthRange {
visibility: hidden;
}
#-webkit-keyframes blop_label_width {
0% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
66% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
75%{
opacity: 1;
-webkit-transform: rotate3d(360deg);
transform: rotate3d(360deg);
}
90% {
width:80px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
95% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}
#keyframes blop_label_width {
0% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
66% {
opacity: 0;
width: 30px;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
75%{
opacity: 1;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
90% {
width:80px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
95% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
}
input[type=range] {
-webkit-appearance: none;
margin: 0px 2px 2px 8%;
width: 80%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.0px;
cursor: pointer;
animate: 0.2s;
-webkit-box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: url(im/space.jpg);
background-size: cover;
}
input[type=range]::-webkit-slider-thumb {
-webkit-box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
height: 15px;
width: 15px;
border-radius: 150%;
background: url(im/thesun.jpg);
background-size: cover;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: url(im/sky.jpg);
background-size: cover;
}
<!doctype html>
<html>
<head>
<title>WebTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js" async></script>
</head>
<body>
<!-- INPUT DATA-->
<!--1st object-->
<div class="divContainer">
<div id="control0" class="changeBox">
<div id="label_box_width">
width
</div>
<div id="input_box_width" class="widthRange">
<input type="range" name="width" min="50" max="500" value="100" data-sizing="px">
</div>
</div>
<!--2nd object-->
<div id="control1" class="changeBox">
<div id="label_box_width2">
spacing
</div>
<div id="input_box_width2" class="widthRange">
<input type="range" name="spacing" min="0" max="20" value="10" data-sizing="px">
</div>
</div>
</div>
<!-- SVG--------------------------------------------- -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</body>
</html>
Related
I have a set of cards that I'm trying to stack. The images aren't fitting the cards properly. They only fit the card when I hover over it. Also, the function I have for them to scroll isn't working when I click them. I have provided a screenshot and my code below. Thanks!:
Screenshot of the issue:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SP Card stack</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--Studio List-->
<div class="container">
<div class="card1-stack">
<!---Button for scroll-->
<a class="buttons prev" href="#"><</a>
<!---Button for scroll-->
<ul class="card-list">
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image" style="max-width:50px">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1" class="btn"><i class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor" points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085"></polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
</li>
<!--Studio Front Page-->
<!--Studio Room 1-->
<li class="card1 text-white card-has-bg click-col" style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
</div>
</li>
<!--Studio Room 1-->
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
<!--Studio One-->
<!--Studio List-->
<script src="cardstack.js"></script>
</body>
</html>
CSS:
/*---Card One---*/
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.stuLocation{
position: relative;
top: -10px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 120%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-meta {
color: #9370DB;
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1{
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -75px;
left: -60px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -6px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.container {
width: 100%;
height: 900px;
background-color: #fff;
padding: 50px 80px;
}
.container .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.container .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.container .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.container .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.container .card1-stack .carousel .buttons:hover {
color: #C01313;
background: #fff;
}
.container .card1-stack .card-list {
width: 300px;
}
.container .card1-stack .card-list__image {
height: 200px;
}
.container .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.container .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.container .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.container .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.container .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.container .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.container .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover > .buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.container .card1-stack:hover > .buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
JS:
var $card = $('.card1');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function(){
var prependList = function() {
if( $('.card1').hasClass('activeNow') ) {
var $slicedCard = $('.card1').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function(){prependList(); }, 150);
});
$('.prev').click(function() {
var appendToList = function() {
if( $('.card1').hasClass('activeNow') ) {
var $slicedCard = $('.card1').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function(){appendToList();}, 150);
});
You can change .card1.card-has-bg's background-size to 130% that can solve image fitting problem
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
I test the function you provide
When I click button of .prev or .next, it works
I saw you use jQuery but you did not source cdn of jQuery in your HTML
So, you should source cdn of jQuery in HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
I'm working on the layout of a website and I want my slider to move horizontally while scrolling vertically. In short, I want to flip my scroll. How can I do that?
My code:
$(function () {
var Page = (function () {
var $navArrows = $("#nav-arrows"),
$nav = $("#nav-dots > span"),
$document = $(document),
slitslider = $("#slider").slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass("nav-dot-current");
$nav.eq(pos).addClass("nav-dot-current");
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(":last").on("click", function () {
slitslider.next();
return false;
});
$navArrows.children(":first").on("click", function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on("click", function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass("nav-dot-current");
$dot.addClass("nav-dot-current");
}
slitslider.jump(i + 1);
return false;
});
});
},
NextSlid = function () {
slitslider.next();
return false;
},
PreviousSlid = function () {
slitslider.previous();
return false;
};
return { init: init, NextSlid: NextSlid, PreviousSlid, PreviousSlid };
})();
Page.init();
$(window).on("wheel", function (e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) {
Page.NextSlid();
} else {
Page.PreviousSlid();
}
});
$(".container").each(function () {
console.log("cont");
let $window = $(document),
$body = $(".main");
let $nested = $(this),
$nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function (e) {
console.log("resize");
$nested.removeClass("sticky").css({ left: 0 });
let placeholderHeight = $nestedPlaceholder.css({ height: "" }).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
const main = document.querySelector(".main");
const scrollEvent = () => {
console.log(main.scrollTop);
console.log("scroll");
let scrollTop = main.scrollTop;
// console.log("scrollTop = " + scrollTop);
console.log("upperMargin = " + upperMargin);
console.log("scrollTop =" + scrollTop);
console.log("lowerMargin =" + lowerMargin);
// && scrollTop < lowerMargin
if (scrollTop >= upperMargin) {
$nested.addClass("sticky");
console.log("addClass --------------");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition =
(verticalScrollPosition / verticalScrollRange) *
horizontalScrollRange;
$nested.css({ left: -horizontalScrollPosition });
} else {
// $nested.removeClass("sticky");
console.log("removeClass +++++++++++++");
}
};
main.addEventListener("scroll", scrollEvent);
$window.resize();
});
});
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: green;
}
.main {
width: 100%;
height: 100%;
background-color: yellow;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.nav-arrows {
display: none;
}
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-of-type(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-of-type(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}
.demo-1 .sl-slider-wrapper {
position: relative;
width: 100vw;
height: 100vh;
/* top: 0;
left: 0; */
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 100px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 100px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150, 150, 150, 0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150, 150, 150, 0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150, 150, 150, 0.4);
cursor: pointer;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-2 .nav-dots span {
background: rgba(150, 150, 150, 0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150, 150, 150, 0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: "AnimalsNormal";
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p {
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244, 244, 244, 0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: "\201C";
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ecd82c;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote {
color: #000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco {
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2 {
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote {
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco {
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2 {
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote {
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(500px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#-moz-keyframes roll {
0% {
-moz-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-o-keyframes roll {
0% {
-o-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-ms-keyframes roll {
0% {
-ms-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-ms-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#keyframes roll {
0% {
transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(40px);
}
100% {
-webkit-transform: translateY(0px);
}
}
#-moz-keyframes moveUp {
0% {
-moz-transform: translateY(40px);
}
100% {
-moz-transform: translateY(0px);
}
}
#-o-keyframes moveUp {
0% {
-o-transform: translateY(40px);
}
100% {
-o-transform: translateY(0px);
}
}
#-ms-keyframes moveUp {
0% {
-ms-transform: translateY(40px);
}
100% {
-ms-transform: translateY(0px);
}
}
#keyframes moveUp {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(0px);
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes scaleDown {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes scaleDown {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.5);
}
}
#-o-keyframes scaleDown {
0% {
-o-transform: scale(1);
}
100% {
-o-transform: scale(0.5);
}
}
#-ms-keyframes scaleDown {
0% {
-ms-transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
}
}
#keyframes scaleDown {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Media Queries for custom slider */
#media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}
/* ---------*/
<div class="main">
<section id="1" style="background-color:#111111; color:#ffffff;">Scroll down</section>
<section id="2" style="background-color:#222222;"> section 2</section>
<section id="3" style="background-color:#333333;"> section 3</section>
<section>
<div class="container demo-1">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<section class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="deco" data-icon="H"></div>
<h2>A bene placito</h2>
<blockquote>
<p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="deco" data-icon="q"></div>
<h2>Regula aurea</h2>
<blockquote>
<p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="O"></div>
<h2>Dum spiro, spero</h2>
<blockquote>
<p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="I"></div>
<h2>Donna nobis pacem</h2>
<blockquote>
<p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="t"></div>
<h2>Acta Non Verba</h2>
<blockquote>
<p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite>
</blockquote>
</div>
</section>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</div>
</section>
<section id="4" style="background-color:#444444;">section 4</section>
<section id="5" style="background-color:#555555;">section 5</section>
<section id="6" style="background-color:#666666;">section 6</section>
</div>
CodePen:https://codepen.io/mitul-patel-the-lessful/pen/eYMWLWL?editors=1111
I linked above my CodePen, if jQuery doesn't work.
Any little help is appreciated!
Disable scroll when you hover to #slider:
function disableScroll(e){
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
}
$('#slider').on('DOMMouseScroll mousewheel', disableScroll);
Then you should create an event to enable scroll when scroll to last slide.
$('#slider').off('DOMMouseScroll mousewheel', disableScroll);
I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw
As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.
My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.
Could someone point me exactly what went wrong for 2017?
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1,
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>
Transform .slider_Y2.opened_Y2 to -100%
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.slider_Y2.opened_Y2 {
background: white;
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>
.slider_Y1 height = 100% ===> distance from top = 100%
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height === > distance from top = 200%
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
background: #fff;
}
I have a form that shows up when I click on a search button like so :
See above that the mouse doesn't find the input and isn't clickable. If I try to click on it, it closes the window (same as if I pressed Esc button).
We found that the issue occurs on Surface Pro and on mobile phone (I guess it's because of touchable screen).
If I take a computer without touchable screen, it's working fine - see screenshot :
Here is my HTML form :
<form method="get" action="//revendeur-sport.kettler-france.com/recherche" class="dropdown-menu" id="search_form" style="display: block;">
<input name="controller" value="search" type="hidden">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Chercher dans notre catalogue" class="ui-autocomplete-input" autocomplete="off" type="text">
<button type="submit">
<i class="icon icon-search2"></i>
</button>
</form>
And Here is my CSS :
élément {
display: block;
}
#header .search-widget.open .dropdown-menu {
z-index: 99;
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
#header .search-widget .dropdown-menu {
position: absolute;
top: 100%;
margin: 0;
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
.popup-over .dropdown-menu {
right: 0;
left: auto;
}
.search-widget .dropdown-menu {
background: none;
border: none;
min-width: inherit;
padding: 0;
display: block;
float: none;
}
.open > .dropdown-menu {
display: block;
}
.search-widget form {
-moz-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-webkit-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-o-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-ms-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
}
.search-widget form {
position: relative;
}
.dropdown-menu, .popup-content {
animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: animationmenus ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: none;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: animationmenus ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: animationmenus ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 8px 0;
margin: 0.125rem 0 0;
font-size: 14px;
color: #666666;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
font-family: "Poppins", sans-serif;
font-size: 14px;
line-height: 1.5;
color: #666666;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
You can find the website in question at : https://revendeur-sport.kettler-france.com/
EDIT : It works fine on Internet Explorer & Edge. But doesn't on Firefox (last update) & Chrome (last update)
Thanks for your help.
I was wondering if anyone has had any success in doing extensive modifications to Angular Material components?
For example, I'm trying to modify their simple form-field component https://material.angular.io/components/form-field/overview
to look and behave like this custom input I've created with pure html/css:
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<span class="input-wrapper">
<input class="gs-ng-input" type="text" required>
<label>Name</label>
</span>
</div>
</body>
</html>
CSS
.container {
padding: 50px;
}
.input-wrapper {
border: 1px solid #000;
display: inline-block;
}
.gs-ng-input, .gs-ng-input:focus {
border: none;
outline: none;
width: 338px;
height: 42px;
font-size: 25px;
padding-left: 10px;
}
.input-wrapper:focus-within {
border: none;
}
.input-wrapper {
box-sizing: border-box;
position: relative;
}
.input-wrapper::before, .input-wrapper::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.input-wrapper::before, .input-wrapper::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.input-wrapper::before, .input-wrapper::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: center;
transform-origin: center;
}
.input-wrapper::before {
border-top: 2px solid #9bdaf1;
border-bottom: 2px solid #9bdaf1;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.input-wrapper::after {
border-left: 2px solid #9bdaf1;
border-right: 2px solid #9bdaf1;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
.input-wrapper:focus-within::before, .input-wrapper:focus-within::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.input-wrapper:focus-within {
box-shadow: 0 0 4px 0 rgba(0, 191, 231, 0.4);
transition: box-shadow .6s ease-in;
}
.input-wrapper label {
color:#999;
font-size:25px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:10px;
top:7px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.input-wrapper:focus-within label {
top:-20px;
font-size:14px;
color:#5264AE;
}
.input-wrapper input:valid + label {
top:-20px;
font-size:14px;
color:#5264AE;
}
https://jsfiddle.net/za2f6r3L/