I am making a simple slideshow with images fading in and out. The image transition is done in CSS. I am having some issues of washed-out images during the transition. The problem is particularly visible when using the keyboard and keeping a key down. Below is a very basic example (simply press any key to change images).
Is there an easy fix to this? Ideally, I would like to have something similar to that website, which I find much more pleasing to the eye.
I have tried to play with the transition-timing-function and different transition-duration between the image and .visible rules in the CSS, without success.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
window.addEventListener('keydown', () => {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body, figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Use a timer with a 100 millisecond delay with each keydown event
Use a control variable whose value is false with each keydown event
and the next image cannot be displayed until it is false and its value
becomes true when the timer time has come.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
var allow = true;
window.addEventListener('keydown', () => {
if (allow) {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
allow = false;
displayTimer(200);
}
});
var timer;
function displayTimer(sec) {
var dec = sec - 100;
if (dec == 0) {
window.clearTimeout(timer);
allow = true;
} else {
timer = setTimeout(function() {
displayTimer(dec)
}, 100);
}
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
I'm trying to make it so that when i click the div, it either expands the full viewport width or returns to its original width. But its not working. I tried box.style.width but no change so I googled and got getComputedStyle(). so i was abe to console log the width but then i used setProperty on the width and it still didnt work.
const box = document.querySelector(".box");
const bsl = window.getComputedStyle(box);
let i = 0;
window.onload = () => {
console.log(bsl.getPropertyValue("width"), i, 77);
}
box.onclick = () => {
if (i % 2 === 0) {
bsl.setProperty("width", "100vw");
} else {
bsl.setProperty("width", "100px");
}
i++;
console.log(box.clientWidth, i);
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
animation: exc 1s linear forwards paused;
}
#keyframes exc {
from {
width: 100px;
}
to {
width: 100vw;
border-radius: 0%;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
apparently there was a problem with your animation especially "puased"
check this out
const box = document.querySelector(".box");
let isExpand = false;
box.onclick = () => {
if (isExpand) {
box.style.width = "100px"
box.style.borderRadius = "50%"
isExpand = false
} else {
box.style.width = "100vw"
box.style.borderRadius = "0%"
isExpand = true
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
transition: width 1s linear, border-radius 1s linear;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
https://jsfiddle.net/09rcqwdf/1/
The sidebar has a higher z-index. The container .main has overflow: none, the div inside it has overflow: scroll but for some reason when you drag the text it thinks its over the .scrolling div when in fact its over the sidebar div.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
First thing I noticed is your helper callback was configured incorrectly, you had:
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {
},
Since you're defining an Object, you need to have the keyname, a colon, and then the function. Example:
$('.drag').draggable({
helper: function() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start: () => {
},
This may have been causing various initialization issues for your draggable and I am surprised it did not appear as an error in your console.
In regards to the drag action, I think this will also be cleared up by the correction.
https://jsfiddle.net/Twisty/3gn57quj/10/
JavaScript
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
$(this).append(ui.helper.clone().css({
left: (ui.offset.left - $(".sidebar").width()) + "px",
top: ui.offset.top + "px"
}));
},
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
});
Regarding the z-index issue, I believe You can either
set in Your CSS:
.scrolling {
background-color: transparent;
}
and use the background-color of the scroll-container
or simply raise a little bit the z-index of the draggable
(preferred solution):
.drag {
z-index: 10;
}
or maybe set the inline style in Your helper function:
return $('<div style="z-index: 10;">', {
Finally, I believe You don't even need to raise so much the z-index of the sidebar, You can quietly avoid that
z-index: 100000
I strongly believe You may need also to change: ui.helper[0].remove(); to: ui.helper.remove();
As a bonus, to correctly position the draggable I believe the simplest solution will be to get the scroll position of the closest scrollable container:
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop: function(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
var container = $(event.target).scrollParent();
$(this).append(ui.helper.clone().css({
left: (ui.offset.left + container.scrollLeft()- $(".sidebar").width()) + "px",
top: (ui.offset.top + container.scrollTop()) + "px"
}));
}
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop: function(event, ui) {
ui.helper.remove();
},
cursorAt: {left: 0, top: 5},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid'
});
});
Moreover, please note: Twisty's remark is correct, in latest Firefox and Chrome Your snippet works, but a brief test in some other browsers raises below error:
Expected: ':'
It does not think it’s over the .scrolling div. It it just that the .scrolling div is transparent and you can see “through” it. To see what I am saying, add a background color to your .scrolling div, which will prevent you to see what is happening behind it.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px;
background: orange; <!-- Background Color to prevent transparency -->
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
I suppose you want to restrict the dragging between the sidebar only.
For that you need to provide option for containment in draggable function. Which will block the movement of drag.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
containment: ".sidebar",
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
Hello everyone here i am trying to show progress bar for my website but i ma facing problem of not display background-color on scroll, please help on this also find the code at below starting from html, css and jquery ...
HTML Code
<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>
CSS Code
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
jQuery Code
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});
Here please guide how i can display backgroud-color on scroll. Thanks in Advance!!
There are a couple of issues with your code, HTML width attribute does not support div element. Also, the value attribute is not supported by div either. For creating the progress bar you could use CSS. Instead of updating $("#progressbar").attr('value', s); value just update the width of the element $("#progressbar").width(s);
Here is the complete working example -
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").width(s);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
You should calculate the procentage and set it as width for `progressbar``
have a look.
$(window).scroll(function () {
var d = $(document).height() - $(window).height(),
s = $(document).scrollTop();
var width= (s / d) * 100 // in Procent
$("#progressbar").attr('max', d);
$("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
I have started a pong game where the guidelines have already been set for me but I have an issue with the ball. It is very early in development but I am stuck on this problem: The X axis will not move up and down. The ball is not meant to bounce off the paddles yet. Here is my code:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
<link href="pong.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/pong.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<!-- Scoreboard goes here -->
<div id="game">
<div id="playground">
<div id="ball"></div>
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
</div>
</div>
<!-- used for debugging -->
<div id="debug">
</div>
<footer>
This is an example of creating a Ping Pong Game.
</footer>
</body>
</html>
Pong.js
var KEY = {
UP:38,
DOWN:40,
W:87,
S:83
};
var directionX = 1;
var directionY = 1;
$(function(){
var timer = setInterval(gameloop,30)
});
//This is where the logic for the game goes.
function gameloop(){
var playground = $("#playground");
var ball = $("#ball");
var width = parseInt (playground.css("width"))
var left = parseInt (ball.css("left"));
if(left >= width){
directionX = -1;
}
else if (left <= 0){
directionX = 1;
}
var height = parseInt (playground.css("height"))
var top = parseInt (ball.css("top"));
if(top >= height){
directionY = -1;
}
else if (top <= 0){
directionY = 1;
}
ball.css("left",left+5 * directionX);
ball.css("top",height+5 * directionY);
}
function debug(text){
$("#debug").text(text);
}
And pong.css
#playground{
background: #e0ffe0 /*url(images/pixel_grid.jpg)*/;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#ball {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.paddle {
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#paddleB {
left: 320px;
}
#winner{
display:none;
position: relative;
width: 200px;
margin-left: 100px;
top: 30%;
font-size: 20px;
border: 3px solid red;
padding: 20px;
background-color: #FFF;
text-align:center;
font-family: Comic-Sans;
}
Oh and in case you were wondering, the js library was written for me.
You're using the height of the element instead of the offset (top).
It should be
ball.css("top", top + 5 * directionY);
I believe you need to use px when setting the CSS for top and left.
ball.css("left",(left+5 * directionX) + "px");
ball.css("top",(height+5 * directionY) + "px");