I'm working on my javascript skills by building a slider...however I've become stuck on this issue.
On every click event I want to increment the px value on a translateX.
My best attempt had the slider working however it was just inserting the inline css on top of the previous click.
HTML
<div class="slider">
<button class="slider__button slider__button--left"></button>
<div class="slider__viewport">
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
<button class="slider__button slider__button--right"></button>
</div>
CSS
.slider-wrapper {
height:500px;
}
.slider {
position: relative;
max-width: 1200px;
width: 100%;
height: 500px;
background-color: red;
overflow: hidden;
}
.slider__viewport {
display: flex;
width: 100%;
height: 100%;
}
.slider__slide {
flex-shrink: 0;
max-width: 1200px;
width: 100%;
height: 100%;
background-color: yellow;
border: 1px solid red;
float: left;
}
.slider__slide:nth-of-type(3) {
background-color: purple;
}
.slider__slide:nth-of-type(2) {
background-color: green;
}
.slider__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
z-index: 999;
}
.slider__button--left {
left: 5%;
background-color: blue;
}
.slider__button--right {
right: 5%;
background-color: red;
}
Here is the current code.
const sliderButtonRight = document.querySelector('.slider__button--
right');
const sliderViewport = document.querySelector('.slider__viewport');
const sliders = [...document.querySelectorAll('.slider__slide')];
const sliderWidth = sliders[0].getBoundingClientRect().width;
// The code in question //
sliderButtonRight.addEventListener('click', () => {
sliderViewport.style.transform = `translateX(-${sliderWidth}px)`;
});
// Comment End //
Built-in Javascript only please, no jQuery.
Thank You.
Related
I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>
I'm working on my own to create a post css stype for a blogspot.com template that I purchased recently. With so many tutorials, I made exactly what I want, but the carousel have the issue that does not properly with the left control. Can you help me?
I was searching on YouTube. Most of the code is a modification from something of someone else (I'm a Graphic Designer who barely know the basics of HTML).
Thanks a lot!
const carousel2 = document.querySelector('.carousel2');
const slider2 = document.querySelector('.slider2');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
let direction;
next.addEventListener('click', function() {
direction = -1;
carousel2.style.justifyContent = 'flex-start';
slider2.style.transform = 'translate(-20%)';
});
prev.addEventListener('click', function() {
if (direction === -1) {
direction = 1;
slider2.appendChild(slider2.firstElementChild);
}
carousel2.style.justifyContent = 'flex-end';
slider2.style.transform = 'translate(20%)';
});
slider2.addEventListener('transitionend', function() {
// get the last element and append it to the front
if (direction === 1) {
slider2.prepend(slider2.lastElementChild);
} else {
slider2.appendChild(slider2.firstElementChild);
}
slider2.style.transition = 'none';
slider2.style.transform = 'translate(0)';
setTimeout(() => {
slider2.style.transition = 'all 0.5s';
})
}, false);
/*----------POST CAROUSEL SLIDER------------
---------------------------------------------------*/
.carousel-general-container {
max-width: 780px;
height: auto;
width: 100%;
margin: 0px auto;
padding-bottom: 20px;
}
/*--POST CAROUSEL 2--*/
.slider-container2 {
max-width: 100%;
height: auto;
width: 100%;
margin: 10px auto;
}
.carousel2 {
background: #fff;
border: 2px solid transparent;
border-radius: 6px;
width: 100%;
display: flex;
justify-content: flex-start;
overflow: hidden;
position: relative;
}
.slider2 {
display: flex;
height: 100%;
width: 500%;
flex-shrink: 0;
transition: all 0.5s;
}
.slider2 div {
flex-basis: 20%;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.slider2 div img {
height: auto;
width: 100%;
}
.controls2 button.next {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
outline: none;
color: white;
}
.controls2 button.prev {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
outline: none;
color: white;
}
.controls2 button i {
font-size: 40px;
}
/*---------------------------------------------END--*/
<!--POST CAROUSEL CONTAINER-->
<div class="carousel-general-container">
<!--POST CAROUSEL SLIDER 2-->
<div class="slider-container2">
<div class="carousel2">
<div class="slider2">
<div>
<img src="https://1.bp.blogspot.com/-u0J4VE6mIeA/XyOZayGTTAI/AAAAAAAAHjc/UWqc7cn13CU4lsoQ6YXtJTu0FCmbGxuKACPcBGAYYCw/s1024/Templates-para-LIBROS.jpg">
</div>
<div>
<img src="https://1.bp.blogspot.com/-ujMXEoNvpA0/XyXhGwza0YI/AAAAAAAAHkM/NGONl1zblm0ufze1a0DLoCdKSCY_dbgxgCPcBGAYYCw/s1000/graffiti2.jpeg">
</div>
</div>
<div class="controls2">
<button class="next"><i class="material-icons">keyboard_arrow_right</i></button>
<button class="prev"><i class="material-icons">keyboard_arrow_left</i></button>
</div>
</div>
</div>
</div>
This is the codepen.
Thanks a lot!
why don't You use an already existing carousel prefab?
Doing a carousel yourself might teach You a lot of things but It will take a lot of your time!
I personally reccomend You Slick.js!
It is fully personalizable and It is compatible with both desktops and mobiles.
Here is a quick tutorial on how to set It up ;)
I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.
Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>
If you hover over the element slowly, the animation works correctly. The green layer overlaps from the left and then, from the top, the yellow layer overlaps the green layer. This overlapping should undo itself when the mouse leaves the element, starting with undoing the yellow overlap and then the green one.
But if the cursor hovers over it too quickly, the animation gets stuck on the yellow overlap until you re-mousover and then mouseout. I've tried adding .stop(false, true) jQuery method before each of the .animate methods, which is what I read has remedied similar problems but this didn't work. I tried it by chaining it right before the .animate function, I tried just about all variations of this, on all of the functions, and also with .stop(true,true);.
Is there a way I can stop the mouseout portion from firing if the mouseover portion doesn't finish before the cursor leaves the element?
$(document).ready(function() {
$('#con').hover(
function() { // handlerIn
$('#crossX').animate({'width': '115px'}, function() {
$('#crossY').animate({'height': '115px'})
})
},
function() { // handlerOut
$('#crossY').animate({'height': '15px'}, function() {
$('#crossX').animate({'width': '15px'})
})
}
)
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
With the following solution it is guaranteed that the "mouse leave part" only runs after the "mouse enter part" is fullfilled and (vice versa).
Additionally the script takes care for the case that on quick user action: "enter > leave > enter" the state remains as if the user haven't done the "quick leave". So actually this should do what you want to achieve (I hope so at least).
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function( sMode ){
if ( 'enter' == sMode )
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ( 'in' == sPosition ) {
if ( mouseEnterIsWaiting ) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if ( mouseLeaveIsWaiting ) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});
body {
padding: 5%;
}
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
If you need further explanations feel free to leave a comment
$("#con").mouseenter(function() {
$('body').addClass('Hover');
$('#crossX').stop().animate({'width':'115px'},500, function(){
$('#crossY').stop().animate({'height': '115px'},500);
});
});
$("body").mouseenter(function() {
$('body').addClass('Hover');
$('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
body{
background-color:#dcdcdc;
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
</body>
The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>
Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});