stopping slideshow and continue after 3 seconds - javascript

I made this Slideshow with HTML/CSS/JS and I want to make it so that after I press an arrow key that the autoslide stops, I can just change pics manually and after 3 seconds it goes back into autoslide, but I cant figure out how this works. Any help is appreciated. Many thanks in advance.
JS:
var imagecount = 1;
var total = 6;
var uniqueRandoms = [];
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = imagecount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
Image.src = "images/img" + imagecount + ".jpg";
ChangeText(imagecount);
}
window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}, 3000);
function ChangeText(imgNum) {
var allImagesAndText = {
1: "Seltene römische Goldmünze",
2: "Römische Funde",
3: "Römische Wandmalerei",
4: "Tutanchamun",
5: "Cheops Pyramide",
6: "Ägyptische Malerei"
};
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
CSS:
#container {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
HTML:
<div id="container">
<div id="text1">Text</div>
<img src="images/img1.jpg" id="img" />
<div id="left_holder">
<img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img onClick="slide(1)" class="right" src="images/arrow_right.png" />
</div>
</div>

You need to assign your setInterval reference to a variable, so you can stop that interval using clearInterval(). Now, on every call to slide() that you use as your arrow click handlers, you need to clear the interval at the starting of function and then set it again at the end of the function.
function slide(x) {
clearInterval( sliderInterval );
var Image = document.getElementById('img');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
Image.src = "images/img" + imagecount + ".jpg";
ChangeText(imagecount);
sliderInterval = window.setInterval( slideA, 3000);
}
sliderInterval = window.setInterval( slideA, 3000);
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}

Assign setInterval to a variable:
var silderTimerID = window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}, 3000);
and then add keypress event handler:
window.addEventListener("keypress", function(e){
console.log(e);
// write your key condition code
clearInterval(silderTimerID)
});
Use clearInterval() to clear timer repeat.
please see demo:
https://jsfiddle.net/sxzety3e/1/

Related

How to get this type of effect using javascript html and css?

Actually I am trying to make this type of effect using javascript, need some help how to implement it.
View Images from here:-
https://ibb.co/2c9y9jV
https://ibb.co/Jpqk3xr
My code:
function move(e) {
console.log("mouse location:", e.clientX, e.clientY);
let x = e.clientX - 520;
let y = e.clientY - 210;
let ele = document.getElementsByClassName('after')[0];
ele.style.transform = "translate3d(" + x + "px," + y + "px,0px)"
}
var temp = false;
function toggle() {
temp = !temp;
if (temp) {
let ele = document.getElementsByClassName('after')[0];
ele.style.display = 'block';
} else {
let ele = document.getElementsByClassName('after')[0];
ele.style.display = 'none';
}
}
img {
z-index: 100;
}
.after {
position: absolute;
left: 0;
bottom: 0;
border-radius: 50%;
width: 20%;
height: 20%;
display: block;
background: white
}
.image-container {
margin: 0 auto;
position: relative;
overflow: hidden;
width: max-content;
height: max-content;
}
<button onclick="toggle()">Toggle</button>
<div class="image-container">
<img onmousemove="move(event)" src="http://lorempixel.com/300/200" />
<div class="after">
</div>
</div>
I couldn't be able to make effect like image

How to stop image after the last image appears?

I have Created Image Slider with 2 buttons Next and Previous, the buttons are working correctly like when last image comes slider gets stop but on sliding the image slider with the help of mouse problem is that the slider continue going to left and right with empty space.
JavaScript:-
var leftFrom = 10;
var scrollPosition = 0;
var scrollOffSet = 400;
$(document).ready(function () {
function PhotoGallery() {
$('#thumbs_container').css('width', '100%');
$('#thumbs_container').css('position', 'absolute');
$('#thumbs_container').css('overflow-y', 'hidden');
//$('#thumbs_container').css('left', '1.9%')
$('#thumbs_container').css('float', 'left');
$('#thumbs_container').css('height', '215px')
//I have Created image Slider Dynamically:-
//var container = document.getElementById('thumbs_container');
var buttoncontainer = document.getElementById('inner');
var nextButton = document.createElement('button');
nextButton.className = 'next';
nextButton.innerHTML = '❯';
//container.appendChild(nextButton);
buttoncontainer.appendChild(nextButton);
//Next Button Functionality:-
var next = function () {
console.log("Next Clicked" + " " + $('#thumbs_container').width());
if ((scrollPosition + scrollOffSet) < $('#thumbs_container').width()) {
scrollPosition = scrollPosition + scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
}
else {
if ((scrollPosition + scrollOffSet) > $('#thumbs_container').width())
scrollPosition = scrollPosition + scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
}
}
//Previous Button Functionality:-
var prevButton = document.createElement('button');
prevButton.className = 'previous';
prevButton.innerHTML = '❮';
//container.appendChild(prevButton);
buttoncontainer.appendChild(prevButton);
var previous = function ()
{
console.log('Clicked Left');
var leftOffSet = $('#thumbs_container').scrollLeft();
console.log("leftOffset" + " " + leftOffSet);
if ((leftOffSet - scrollOffSet) > 0) {
scrollPosition = scrollPosition - scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
} else {
if (leftOffSet > 0)
$('#thumbs_container').animate({ scrollLeft: 0 }, 750);
}
}
//Adding Images Dynamically Into Slider:-
this.imagecreate = function (name, src) {
var container = document.getElementById('thumbs_container');
var img = document.createElement('img');
img.src = src;
img.alt = name;
img.className = 'thumb';
img.style.width = '300px';
img.style.height = '150px';
img.style.position = 'absolute';
img.style.left = leftFrom + 'px';
leftFrom = leftFrom + 310;
container.appendChild(img);
}
//Adding Videos Dynamically Into Slider:-
this.videocreate = function (src, type) {
var container = document.getElementById('thumbs_container');
var video = document.createElement('video');
var source = document.createElement('source');
source.src = src;
source.type = type;
video.autoplay = true;
video.loop = true;
video.controls = false;
video.style.display = 'inline-block';
video.style.width = '260px';
video.style.height = '260px';
video.style.position = 'absolute';
video.style.top = '-41px';
video.style.left = leftFrom + 'px';
leftFrom = leftFrom + 270;
video.appendChild(source);
container.appendChild(video);
}
nextButton.addEventListener('click', next);
prevButton.addEventListener('click', previous);
}
var photoGallery = new PhotoGallery();
photoGallery.imagecreate('1', 'img/1.jpg');
photoGallery.imagecreate('2', 'img/2.jpg');
photoGallery.imagecreate('3', 'img/3.jpg');
photoGallery.imagecreate('4', 'img/4.jpg');
// photoGallery.videocreate('img/mcvideo.mp4', 'video/mp4');
photoGallery.imagecreate('5', 'img/5.jpg');
photoGallery.imagecreate('6', 'img/6.jpg');
photoGallery.imagecreate('7', 'img/7.jpg');
photoGallery.imagecreate('8', 'img/8.jpg');
//photoGallery.videocreate('img/SampleVideo_640x360_1mb.mp4', 'video/mp4');
photoGallery.imagecreate('9', 'img/9.jpg');
photoGallery.imagecreate('10', 'img/10.jpg');
photoGallery.imagecreate('11', 'img/006.jpg');
// photoGallery.videocreate('img/small.mp4', 'video/mp4');
photoGallery.imagecreate('12', 'img/007.jpg');
//Mouse Sliding Functionality:-
var sliding;
var dir;
var startClientX = 0;
$mainDiv = $('#thumbs_container');
function move(dir) {
var img = $mainDiv.find('img');
imgWidth = img.width();
//var video = $mainDiv.find('video');
//videoWidth = video.width();
var total = dir * imgWidth;
img.animate({ left: '+=' + (total) }, 750);
//video.animate( { left: '+=' + (dir * videoWidth) }, 200);
}
$mainDiv.mousedown(function (event) {
sliding = true;
startClientX = event.clientX;
return false;
}).mouseup(function (event) {
var step = event.clientX - startClientX,
dir = step > 0 ? 1 : -1;
step = Math.abs(step);
move(dir);
});
CSS:-
#thumbs_container {
width: 100%; /*width:400px;*/
padding: 14px 40px; /*Gives room for arrow buttons*/
box-sizing: border-box;
position: relative;
background-color: red;
-webkit-user-select: none;
user-select: none;
/*max-width: 1600px;
max-height: 600px;*/
overflow:hidden;
}
.inner {
width: 95%;
padding: 14px 40px;
box-sizing: border-box;
position: relative;
background-color: yellow;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
.thumb{
margin-right: 1px;
}
button{position: fixed;
top: 40%;
z-index: 99999;
left: 50%;
background-color: #4CAF50;
color: #fff;
border: none;
height: 30px;
width: 30px;
line-height: 30px;}
.previous {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: fixed;
margin-left: -33px;
top: 7%;
left: 2%;
}
.next {
background-color: #4CAF50;
border: none;
color: white;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: fixed;
left: 98%;
top: 7%;
}
.round {
border-radius: 50%;
}
HTML:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DynamicSlider</title>
<!--<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="js/thumbnail-slider.js" type="text/javascript"></script>
<script src="js/readImages.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery1.6.2.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<link href="css/DynamicSlider.css" rel="stylesheet" />
<script src="js/DynamicSlider.js"></script>
</head>
<body>
<div id='thumbs_container'>
</div>
<div id="inner">
</div>
</body>
</html>

How to create (or at least, describe) horizontal progress bar with thresholds?

I'm looking to create a horizontal chart with thresholds at certain percentages- if you've ever used Battle.Net, kind of similar to their download bar:
Blizzard Download Bar
I'm sure there's a name for it, I just don't know what it is...
Thanks!
I made this just in case it helps. Have 'fun'.
You can edit the little threshold pointer so they look stylish with css. But yea that all depends on what you want to do
// Btw, I'm a big fan of the canvas element that's why I'm doing this. Otherwise, you can also use a progress bar
var c = document.getElementById('progressBar'),
dt = document.getElementById('download-text'),
btn = document.querySelector('button'),
p2 = document.querySelector('progress');
var cx = c.getContext('2d');
var counter = 0,
loop;
btn.onclick = function() {
btn.innerText = 'N';
var timeInter = setInterval(function(){
btn.innerText += 'o';
},70);
setTimeout(function(){
clearTimeout(timeInter);
btn.hidden = true;
p2.hidden = false;
progress2();
},1000);
}
var loop2 = '',
counter2 = 0;
function progress2() {
counter2++;
var percentage = (counter2 / 17).toFixed(2);
if (percentage - 0 >= 100) {
percentage = 100;
}
p2.value = percentage - 0 +'';
if (percentage - 0 > 100) {
cancelAnimationFrame(loop2);
} else {
loop2 = requestAnimationFrame(progress);
}
//This is me failing to animate the progress bar
}
function progress() {
counter++;
var percentage = (counter / 17).toFixed(2);
if (percentage >= 100) {
percentage = 100+'.00';
}
dt.innerText = "Download: " + percentage + "%";
cx.fillStyle = '#00FFFF';
cx.fillRect(0, 0, c.width * percentage / 100, c.height);
cx.strokeStyle = '#ccc';
cx.beginPath();
cx.moveTo(100, 70);
cx.lineTo(100, 0);
cx.stroke();
cx.moveTo(300, 70);
cx.lineTo(300, 0);
cx.stroke();
if (percentage - 0 > 100) {
cancelAnimationFrame(loop);
} else {
loop = requestAnimationFrame(progress);
}
}
progress();
#progressBar {
border: 1px solid grey;
z-index: -10;
}
#progressBar,
#download-text,
#playable,
#optimal,
button,
progress{
position: absolute;
top: 0px;
left: 0px;
}
button,
progress{
top:200px;
}
#download-text {
height: 70px;
padding-top: 25px;
padding-left: 7px;
font-family: sans-serif;
background-color: transparent;
}
#playable,
#optimal {
width: 100px;
height: 43px;
text-align: center;
padding-top: 20px;
font-family: sans-serif;
font-weight: bolder;
}
#playable {
background-color: yellow;
position: absolute;
top: 72px;
left: 100px;
}
#optimal {
background-color: green;
position: absolute;
top: 72px;
left: 300px;
}
<div>
<canvas id="progressBar" width="430px" height="70px"></canvas>
<div id="download-text">Hello</div>
</div>
<div id="playable">PLAYABLE</div>
<div id="optimal">OPTIMAL</div>
<button type="button">Please don't press me just stick to canvas</button>
<progress max="100" hidden="true"></progress>

iFrame popup on thumbnail click

I've got this script which fetches thumbnails from the Twitch API, and onclick of the thumbnail it opens up an iFrame with the actual stream. How can I make the iFrame popup in the middle of the screen and everything else becomes darker?
$('.games > div').click((e) => {
var gameDiv = $(this);
$('#twitch').children().fadeOut(500).promise().then(function() {
$('#twitch').empty();
var gameName = $(e.target).text().replace(' ', '%20');
console.log(gameName);
var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName;
$.getJSON(twitchApi, function(json) {
setData(json.streams)
});
function setData(twitchData) {
var i = 0;
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for
(; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>');
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
});
This code works for me
<div class="overlay">
<iframe src="iframe-src-url"></iframe>
</div>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide this by default */
}
.overlay iframe {
margin: 30px auto;
}
</style>
Javascript code
function setData(twitchData) {
var i = 0;
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for
(; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>');
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
// append it to the overlay then show
$('.overlay').append( '<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>').show();
});
}
}
Hope this works for you
$('h1').click(function() {
$('.overlay').append('<iframe src="iframe-src-url"></iframe>').show();
});
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide the overlay by default */
}
.overlay iframe {
margin: 30px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Sample text</h1>
<div class="overlay"></div>

creating custom scroll bar

I want to create a custom scrollbar using just pure JavaScript and I'm having problem with making the pointer to reach the end of the scrollbar when I reach the bottom of the page. Is there any way to do that without using jQuery?
Demo on Fiddle
HTML:
<div id="scroll-bar"></div>
<div id="pointer"></div>
<div class="test">first</div>
<div class="test"></div>
<div class="test"></div>
<div class="test">middle</div>
<div class="test"></div>
<div class="test"></div>
<div class="test">final</div>
JavaScript:
var body = document.getElementsByTagName('body')[0];
var allDivs = document.getElementsByTagName('div');
var scrollBar = document.getElementById("scroll-bar");
var pointer = document.getElementById("pointer");
for (var i = 0; allDivs[i] != undefined; i++) {
var last = i;
}
var pageHeight = allDivs[last].offsetHeight + allDivs[last].offsetTop;
pointer.style.top = "7%";
function setPosition(e) {
var pos = e.screenY * 86;
var move = pos / scrollBar.offsetHeight - 10;
if (move > 7 && move < 89) {
pointer.style.top = move + "%";
}
var scrollValue = move * pageHeight / 100;
window.scrollTo(0, scrollValue);
}
function resetPosition() {
scrollBar.removeEventListener('mousemove', setPosition);
pointer.removeEventListener('mousemove', setPosition);
}
scrollBar.addEventListener('mousedown', function (event) {
pointer.addEventListener('mousemove', setPosition);
pointer.addEventListener('mouseup', resetPosition);
scrollBar.addEventListener('mousemove', setPosition);
scrollBar.addEventListener('mouseup', resetPosition);
});
scrollBar.addEventListener('click', function (event) {
setPosition(event);
});
pointer.addEventListener('mousedown', function (event) {
pointer.addEventListener('mousemove', setPosition);
pointer.addEventListener('mouseup', resetPosition);
scrollBar.addEventListener('mousemove', setPosition);
scrollBar.addEventListener('mouseup', resetPosition);
});
body.addEventListener("mousewheel", function () {
scrollBy(0, -window.event.wheelDelta);
});
body.addEventListener("DOMMouseScroll", function (e) {
scrollBy(0, e.detail * 50);
});
CSS:
html {
overflow: hidden;
}
.test {
height: 100px;
border-style: groove;
border-width: 10px;
border-color: red;
}
#scroll-bar {
position: fixed;
right: 0%;
top: 7%;
width: 3%;
height: 86%;
background-color: red;
}
#pointer {
position: fixed;
right: 0.5%;
top: 7%;
width: 2%;
height: 4%;
background-color: blue;
z-index: 3;
}

Categories