Why can this function not use opacity? - javascript

I would like to make the image a little transparent for a short time by pressing the button and then make it visible again normally. Why does the code not work?
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 128px;
height: 128px;
padding: 10px;
}
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="epicenter">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
</div>
<button onclick="test()">Test</button>
<script>
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {
}
}
function test() {
document.getElementById("black").style.opacity = "0.33";
sleep(3000);
document.getElementById("black").style.opacity = "1";
}
</script>
</body>
</html>

Using setTimeout is much simpler.
function test() {
const el = document.getElementById('black');
el.style.opacity = '0.33';
setTimeout(() => el.style.opacity = '1', 3000);
}
img width: 128px height: 128px padding: 10px; }
img:hover { opacity: 0.5; }
<div id="epicenter">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
</div>
<button onclick="test()">Test</button>

You should use SetTimeout instead of defining your own sleep function.
setTimeout(function(){
document.getElementById("black").style.opacity = 1;
}, 3000);
Replace your sleep function call with the above.
Refer https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals for more details

Related

Hide images in between rotation (Javascript)

I've created a timer that switches and loops between images.
I'm looking to create a pause in between the images in which nothing is shown.
So logo1 on for 15 seconds
hide images for 30 seconds
logo2 on for 15 seconds
and so on
This is what I've got so far.
Ideally, the hide would hide both DIVS
<html>
<head>
<style>
.box1 {
background-color: rgba(0,0,0,0);
color: #fff;
opacity: 1;
align-content: safe;
}
.brandlogo {
background-color: rgba(0,0,0,0);
position: absolute;
top: 500;
left: 1100;
}
.box2 {
background-color: rgba(0,0,0,0);
color: #545454;
position: absolute;
top: 400;
left: 1000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1" id="art">
<img class="brandlogo" id="image" src="logo1.png" width="100">
</div>
<div class="box box2" id="frameart">
<img class="brandframe" id="frame" src="adframe2.png" width="300">.
</div>
</div>
<script type="text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
function timercount() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(timercount, 3000);
$("#art").show();
setTimeout(function() {
$("#art").hide();
}, 500);
</script>
</body>
</html>
Let me know how it goes :)
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
// jquery api on hide
// https://api.jquery.com/hide/
function hideArt() {
$("#art").hide(30000, changeLogo);
}
function changeLogo() {
if (++currentPos >= images.length) {
currentPos = 0;
}
image.src = images[currentPos];
// restart loop
loop();
}
function loop() {
// setTimeout api
// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
setTimeout(hideArt, 15000);
}
// start loop
loop();
</script>

Carousel onmouseover and onmouseout does not work

I am practising Javascript. I made an images carousel. My carousel slide works fine. To run the slide I used setinterval. When user will hover over the image, I want to stop the slide and when it will hover out then slide will start where it pause. For that I used clearinterval. When I onmouseover then onmouseout my carousel behave weird. Seems like my logic does not work. I don't know how to do that.
const images = document.getElementById('imgs')
const allImages = document.querySelectorAll('#imgs img')
let index = 0;
function run() {
index++;
if (index > allImages.length - 1) {
index = 0
}
imgs.style.transform = `translateX(${-index * 500}px)`
}
setInterval(run, 2000);
images.onmouseover = () => {
console.log('In');
clearInterval(run) + 1
}
images.onmouseout = () => {
console.log('Out');
setInterval(run, 2000);
}
*{
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.carousel {
overflow: hidden;
width: 500px;
height: 500px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}
.image-container {
display: flex;
transition: transform 300ms linear;
transform: translateX(0);
}
img {
width:500px;
height: 500px;
object-fit: cover;
}
<div class="carousel">
<div class="image-container" id="imgs" >
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
<img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
<img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
<img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
</div>
You made a mistake with the interval.
To be able to clear the interval in the onmouseover event, you need to assign it to a variable
var x = setInterval(run, 2000);
then you pass the variable to the clearInterval method.
clearInterval(x)
then onmouseout you set again the interval
x = setInterval(run, 2000);
Final code would look like this:
var x = setInterval(run, 2000);
images.onmouseover = () => {
console.log('In');
clearInterval(x) + 1
}
images.onmouseout = () => {
console.log('Out');
x = setInterval(run, 2000);
}

Using setInterval to create a progress bar

I was hoping a kind soul might be able to assist.
I have a slideshow which auto-plays, my intention is to have the next button act as a visual aid, highlighting the when the next frame is coming in.
sync with the autoPlay interval.
Right now, the update func concludes too early, which is the best I have managed to do. Typically I have the clearInterval and setInterval conflicting creating shuddering animations.
What am I doing wrong?
<!doctype html>
<html lang="en">
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
.carousel_wrapper {
height: 50vh;
width: 100%;
position: relative;
}
.carousel_frame {
width: 100%; height: 100%;
}
.carousel_controls {
position: absolute;
bottom: 0;
left: 0;
}
.prev, .next {
height: 50px;
width: 100px;
background: aqua;
display: inline-block;
}
.next {
background: linear-gradient(to right, white 0%, aqua);
}
.carousel_frame:nth-child(1) {
background: red;
}
.carousel_frame:nth-child(2) {
background: blue;
}
.carousel_frame:nth-child(3) {
background: green;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const homepage_carousel = new carousel();
});
function carousel() {
const carousel = document.getElementsByClassName('.carousel_wrapper')[0];
const frames = [...document.getElementsByClassName('carousel_frame')];
const prev_button = document.getElementsByClassName('prev')[0];
const next_button = document.getElementsByClassName('next')[0];
this.frameIndex = 1;
prev_button.addEventListener('click', () => {
this.resetPlay();
this.move(-1);
})
next_button.addEventListener('click', () => {
this.resetPlay();
this.move(+1);
})
this.hideAll = () => {
frames.forEach((f) => {
f.style.display = 'none';
});
}
this.show = () => {
this.hideAll();
frames[this.frameIndex - 1].style.display = 'block';
this.update_bg();
}
this.move = (amount) => {
this.frameIndex += amount;
this.frameIndex = (this.frameIndex > frames.length ? 1 : (this.frameIndex < 1) ? frame.lengh : this.frameIndex);
this.show();
}
this.update_bg = () => {
let w = 1;
let test = setInterval(adjust, 10);
function adjust() {
if (w >= 100) {
clearInterval(test);
w = 0;
} else {
w++;
next_button.style.backgroundImage = `linear-gradient(to right, white ${w}%, aqua)`
}
}
setInterval(adjust, 3000);
}
this.autoPlay = () => {
this.move(+1)
this.update_bg();
}
this.resetPlay = () => {
// clearInterval(timer);
// timer = setInterval(this.autoPlay(), 4000);
}
this.show();
const timer = setInterval(this.autoPlay, 3000);
}
</script>
</head>
<body>
<div class='carousel_wrapper'>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_controls'>
<span class='prev'>Previous</span>
<span class='next'>
Next
</span>
</div>
</div>
</body>
</html>

Multiple errors when using video.currentTime

I am using this code to make a video player with custom controls. For some reason, I get an error telling me that my "seektimeupdate" and "vidseek" functions are not defined. I went into the console to see whether it will tell me where the error is but it doesn't tell me where.
var myvideo = document.getElementById("myvideo")
var button = document.getElementById('button')
var seekslider = document.getElementById('vidtime');
var isplaying = false;
function playvid() {
if (isplaying==false) {
myvideo.play();
button.innerText="Pause"
isplaying=true;
} else {
myvideo.pause();
button.innerText="Play"
isplaying=false;
}
function vidseek() {
var seekto = myvideo.duration * (seekslider.value / 100);
myvideo.currentTime = seekto;
}
function seektimeupdate() {
var nt = myvideo.currentTime * (100 / myvideo.duration)
seekslider.value=nt;
}
}
setInterval(seektimeupdate,10,false)
seekslider.addEventListener("change",vidseek,false)
body {
background-color: #42b0f4;
}
#videocontrols {
width:250px;
background-color: #8c93a5;
padding: 2px;
text-align: left;
}
#myvideo {
align-self: center;
background-color: #e2eaff;
width: 250px;
padding: 2px;
}
#vidtime {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" id="myvideo"></video>
<div id="videocontrols">
<font color="#8c93a5">cv</font><button id="button" onclick="playvid()" height="25">Play</button><input type="range" id="vidtime" value="0" min="0" max="100">
</div>
</body>
If you look at my main code you can tell it's a bit messy, but what this is supposed to be doing is changing the time relative to the sliderbar and updating the bar every 10 milliseconds, instead I am just getting a big error. Any help would be appreciated. Thanks in advance!
You had vidseek() and seektimeupdate() within playvid() function. Look at the code below:
var myvideo = document.getElementById("myvideo")
var button = document.getElementById('button')
var seekslider = document.getElementById('vidtime');
var isplaying = false;
function playvid() {
if (isplaying==false) {
myvideo.play();
button.innerText="Pause"
isplaying=true;
} else {
myvideo.pause();
button.innerText="Play"
isplaying=false;
}
}
/* vidseek() and seektimeupdate() should live outside of playvid() function */
function vidseek() {
var seekto = myvideo.duration * (seekslider.value / 100);
myvideo.currentTime = seekto;
}
function seektimeupdate() {
var nt = myvideo.currentTime * (100 / myvideo.duration)
seekslider.value=nt;
}
setInterval(seektimeupdate,10,false)
seekslider.addEventListener("change",vidseek,false)
body {
background-color: #42b0f4;
}
#videocontrols {
width:250px;
background-color: #8c93a5;
padding: 2px;
text-align: left;
}
#myvideo {
align-self: center;
background-color: #e2eaff;
width: 250px;
padding: 2px;
}
#vidtime {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" id="myvideo"></video>
<div id="videocontrols">
<font color="#8c93a5">cv</font><button id="button" onclick="playvid()" height="25">Play</button><input type="range" id="vidtime" value="0" min="0" max="100">
</div>
</body>

How to call a image class on a regular interval

I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again
html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/
Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>
#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>
not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});
what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .

Categories