We Keep Coding

Adding time between functions without affecting the typewriter effect

I'm trying to delay a function by using setInterval however it seems to be affecting a typewriting effect I have added to my text. The first <h1> works fine ie the typewriting effect starts from the first character of the sentence whereas the typewriting effect for the next <h2> starts from the 4th word and ignores the previous 3 words - I do believe this has to do with the milliseconds I have set on my setInterval.
var h1MessageArray = ["West Sussex Web Design"];
var h2MessageArray = ["Your down-to-earth website designer."];
var speed = 100;
var textPosition = 0;
typewriter1 = () => {
document.querySelector("#h1Message").innerHTML = h1MessageArray[0].substring(0,
textPosition) + '<span>\u25AE</span>';
if (textPosition++ != h1MessageArray[0].length) {
setTimeout("typewriter1()", speed);
}
}
window.addEventListener('load', typewriter1);
typewriter2 = () => {
document.querySelector("#h2Message").innerHTML = h2MessageArray[0].substring(0,
textPosition) + '<span>\u25AE</span>';
if (textPosition++ != h2MessageArray[0].length) {
setTimeout("typewriter2()", speed);
}
}
window.setInterval(typewriter2, 4000);
#typewriter {
width: fit-content;
margin: auto;
}
span {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
#media(max-width:480px) {
#typewriter h2 {
font-size: 1rem;
}
}
<div class="container-fluid mt-5">
<div class="row">
<div class="col-12 text-center" id="typewriter">
<h1 id="h1Message"></h1>
<h2 id="h2Message"></h2>
</div>
</div>
</div>
What am I missing?

The problem is you are reusing textPosition in both functions. So the second function starts at the end of the position of the first function.
A simple solution is two different variables.
var h1MessageArray = ["West Sussex Web Design"];
var h2MessageArray = ["Your down-to-earth website designer."];
var speed = 100;
var textPosition1 = 0;
var textPosition2 = 0;
typewriter1 = () => {
document.querySelector("#h1Message").innerHTML = h1MessageArray[0].substring(0,
textPosition1) + '<span>\u25AE</span>';
if (textPosition1++ != h1MessageArray[0].length) {
setTimeout("typewriter1()", speed);
}
}
window.addEventListener('load', typewriter1);
typewriter2 = () => {
document.querySelector("#h2Message").innerHTML = h2MessageArray[0].substring(0,
textPosition2) + '<span>\u25AE</span>';
if (textPosition2++ != h2MessageArray[0].length) {
setTimeout("typewriter2()", speed);
}
}
window.setInterval(typewriter2, 4000);
#typewriter {
width: fit-content;
margin: auto;
}
span {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
#media(max-width:480px) {
#typewriter h2 {
font-size: 1rem;
}
}
<div class="container-fluid mt-5">
<div class="row">
<div class="col-12 text-center" id="typewriter">
<h1 id="h1Message"></h1>
<h2 id="h2Message"></h2>
</div>
</div>
</div>

How I can animate this slideshow(by changing its src)?

Okay okay, so before marking this post as repeated. Let me explain to you:
I made a slideshow in javascript(Vue) and it works by changing its src in an object every time I press a button(next)
It works and all but the problem is that it doesn't get animated no matter what I do, I made a transition on them, set timeout function on it...etc and nothing even the smallest worked.
I could have made another idea which works by the position absolute but I don't want to do that because it will take a loot of time and it will be extremely buggy as position absolute ruins it. So any help on this please?
<template>
<main>
<div id="slideshow">
<figure id="pics">
<img id="slidepic" v-bind:src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
Javascript:
methods: {
move: function(num) {
let slideimg = document.querySelector("#slidepic");
slideimg.classList.add("fadeOut");
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
setTimeout(function() {
slideimg.src = this.pictures[1].src;
}, 1000);
}
}
CSS:
#pics {
opacity: 0.5s;
transition: 0.5s;
}
#pics.fadeOut {
opacity: 1;
}
I didn't include the object(that is in data object, something in Vue) because it would be useless in this situation.

First off all it's transition: <property-name> 0.5s linear; and not transition: 0.5s;. See the transition documentation.
There is no animation for changing the src of an image (see list of animatable css properties).
To do something like this, you can stack all your images into one element and then use css animations and the transform property to create a carousel
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var slideshow = document.getElementById('slideshow');
next.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var firstChild = slideshow.children[0];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
activeEle.classList.remove('active');
activeEle.classList.add('prev');
nextEle.classList.add('active');
nextEle.classList.remove('next');
prevEle.classList.remove('prev');
if (nextEle.nextElementSibling) {
nextEle.nextElementSibling.classList.add('next');
} else {
firstChild.classList.add('next');
}
};
prev.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
// Move the .active class to the previous element
activeEle.classList.remove('active');
activeEle.classList.add('next');
prevEle.classList.add('active');
prevEle.classList.remove('prev');
nextEle.classList.remove('next');
if (prevEle.nextElementSibling) {
prevEle.nextElementSibling.classList.add('prev');
} else {
lastChild.classList.add('prev');
}
};
#slideshow {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.item {
width: 100%;
height: 100%;
color: white;
background-color: blue;
position: absolute;
/*display: none;*/
top: 0;
left: 0;
z-index: -100;
transition: translateX(-100%);
transition: transform .5s ease-in-out;
opacity: 0;
}
.active {
opacity: 1;
display: block;
z-index: 1;
transform: translateX(0);
}
.next {
transform: translateX(200%);
z-index: 1;
}
.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
<div id="slideshow">
<div class="item active">1</div>
<div class="item next">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item prev">7</div>
</div>
<button type="button" id="prev">Prev</button><button type="button" id="next">Next</button>

As you mention you want to build a slideshow on Vue JS, and because jQuery on top of Vue is not recommended, I suggest that you try Vueper Slides, available on NPM. Unless it is for a learning purpose.

I have created two solutions.
First of all. You've a typo.
#pics {
opacity: 0.5s; // <--- remove "s"
transition: 0.5s; // <--- and forgot the property-name (all, opacity ...)
}
#pics.fadeOut {
opacity: 1;
}
I commented all lines I've changed.
Solution
<template>
<main>
<div id="slideshow">
<!--
I recommend to you ref inestad of querySelector.
https://vuejs.org/v2/api/#ref
I've used the v-bind shorthand.
-->
<figure id="pics1" ref="pics1">
<img id="slidepic" :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
<!--
VueJS build-in transition element.
You have to add a key attribute to detect that the content has changed.
I recommend to use this instead of your solution.
It's easier to implement, no class add/remove struggle, its a part of vue, you can add hooks etc.
https://vuejs.org/v2/guide/transitions.html
-->
<transition tag="figure" name="fade" ref="pics2">
<figure id="pics2" :key="`figure-${count}`">
<img :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</transition>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
</template>
<script>
export default {
name: 'teams',
data() {
return {
count: 0,
pictures: [
{
src: 'https://picsum.photos/200/300',
alt: 'test'
},
{
src: 'https://picsum.photos/200/400',
alt: 'test2'
}
]
};
},
methods: {
// instead of move: function(num) {} you can also write move() {}
move(num) {
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
}
},
// Watch "count" changes and add or remove classes
// you can also add this to your "move" method
watch: {
count() {
// access the reference
const element = this.$refs.pics1;
element.classList.add('fadeOut');
element.classList.remove('fadeIn');
setTimeout(() => {
element.classList.remove('fadeOut');
element.classList.add('fadeIn');
}, 500); // same duration as css transition
}
}
};
</script>
<style scoped lang="scss">
#pics1 {
opacity: 1;
transition: opacity 0.5s;
}
#pics1.fadeIn {
opacity: 1;
}
#pics1.fadeOut {
opacity: 0;
}
// All classes for <transition>
// There are all automatically used by vue
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave {
display: none;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

How to display multiple contents as marquee one after another? Second content should take some time to display

I have two different contents, I want to show the contents as marquee in single line and the contents should display one after another with some delay time duration.
<marquee direction="left">
<label>Label 1 content here</label>
<label>Label 2 content here</label>
</marquee>

Here is my solution, without <marquee> tag, which is deprecated now:
//list of slides to be shown
const content = [
'first slide',
'second slide',
'third slide'
];
let key = 0;
const marquee = $('.marquee');
marquee.on('animationstart', () => {
key = 0;
marquee.text(content[key]);
});
marquee.on('animationiteration', () => {
key++;
if(typeof content[key] === 'undefined') key = 0;
marquee.text(content[key]);
});
marquee.removeClass('paused');
.marquee-container {
width: 100vw;
overflow: hidden;
white-space: nowrap;
}
.marquee {
padding-left: 100vw;
display: inline-block;
animation: marquee 5s linear infinite;
animation-play-state: running;
}
.marquee.paused, .marquee-container:hover .marquee {
animation-play-state: paused;
}
#keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="marquee-container">
<div class="marquee paused"></div>
</div>

Instead of using <marquee> and <label> tags (which you shouldn't use in this context), please try using JavaScript this way:
$(function () {
$(".slider .slide").hide();
$(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () {
$(this).next().fadeIn();
});
setInterval(function () {
$(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () {
$(this).next().fadeIn();
});
}, 20000);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider">
<div class="slide"><marquee>Label 1 content here</marquee></div>
<div class="slide"><marquee>Label 2 content here</marquee></div>
</div>
The above is a bare minimal demonstration of what you might like. Let me know if you need more improvement on this. ☺

You may use this way, without marquee, basing on jquery queue and adding a css class to your elements:
$(function () {
var current_button = 0;
$('div.slider .slide:first')
.show(100)
.addClass('active');
setInterval(function() {
if(current_button===$('.slide').length) {
$('div.slider .slide:first')
.show(100)
.addClass('active');
current_button=0;
} else {
$('div.slider .slide')
.hide(100)
.removeClass('active');
$('div.slider .slide:eq(' + current_button + ')')
.show(100)
.addClass('active');
current_button++;
}
},3500)
});
.slide {
float: left;
transform: translateX(400%);
transition: all 7s;
}
.active {
transform: translateX(-350%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider">
<div class="slide">Label 1 content here</div>
<div class="slide">Label 2 content here</div>
</div>
EDIT: I think there is a better way, but I try a solution in the code above.
Hope it helps

Toggle Class with Jquery very fast

Hey Guys I want to change the Color of some headlines for a short time and delayed, you can imagine it like a single running LED light every ten seconds.
function emphheadline() {
$( ".menu h1" ).each(function( index ) {
$(this).toggleClass('hover').delay(1000).next().toggleClass('hover').delay(1000 );
});
}
#Raj I want to color the headlines red one after the other for a short time.
$( document ).ready(function() {
window.setInterval(emphheadline,3000);
});
function showandhide() {
showmenu().delay(200).showmenu();
}
function emphheadline() {
$( ".content h1" ).each(function( index ) {
$(this).toggleClass('hover').delay(500).next().toggleClass('hover');
});
}
$( document ).ready(function() {
window.setInterval(emphheadline,3000);
});
body {
background-color: darkgrey;
color: black;
}
.left .content h1 {
-webkit-transition: color 2s; /* Safari */
transition: color 2s;
}
.left .content h1:hover {
color: red;
}
.hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left">
<div class="content">
<h1>headline 1</h1>
<h1>headline 2</h1>
<h1>headline 3</h1>
<h1>headline 4</h1>
</div>
</div>
Thanks for your help!

I always hate this jquery approach with dom elements. Do this:
(function(){
var bulbs = [];
$( ".menu h1" ).each(function() {
bulbs.push({
element: $(this),
flag: false
});
};
setInterval(function(){
bulbs.forEach(function(bulb){
bulb.flag = !bulb.flag;
bulb.element.className = bulb.flag ? 'red' : 'green';
//or bulb.toggleClass('your_cLass');
});
}, 100)
})()

I updated your jfiddle at https://jsfiddle.net/kht4xp1v/4
Here is working Javascript to accomplish this. It requires using an index that at set time intervals will loop through and create the animation:
function showandhide() {
showmenu().delay(200).showmenu();
}
$( document ).ready(function() {
var index = 0;
var headings = $(".content h1");
window.setInterval(function(){
if (index !== 0){
headings.eq(index - 1).toggleClass("hover");
}
headings.eq(index).toggleClass("hover");
++index;
}, 3000);
});

Perhaps this is what you are looking for
$(document).ready(function() {
var leds = $(".leds li").length;
var index = 0;
window.setInterval(function() {if(index == leds) { index = 0;} index = switchLed(index); }, 500);
});
function switchLed(index) {
var filter = ':nth-child(' + index + 'n)';
$(".leds li").filter(filter).removeClass("active");
$(".leds li").eq(index).addClass("active");
return ++in
}
https://jsfiddle.net/kht4xp1v/6/

Following example blinks ten times between red and green.
<script>
$(window).load(function(){
var i = 0;
$('.menu h1').each(function(){
$(this).css({'animation-delay': i++ + 's', 'animation-name': 'colour'})
})
});
</script>
.menu h1 {
animation-duration: 10s;
animation-iteration-count: 10;
color: red;
}
#keyframes colour {
0% {
color: red;
}
0.01% {
color: green;
}
10% {
color: green;
}
10.01% {
color: red;
}
100% {
color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
</div
(If you need transition instead of blinking, edit *.01% keyframe states)

Here is a js fiddle that might work for you
https://jsfiddle.net/kht4xp1v/7/
function emphheadline() {
$( ".content h1" ).each(function( index ) {
var self = $(this);
setTimeout(function () {
$(self).toggleClass('hover');
}, index*500);
});
}
you can use setTimeout function for the delay like shown

Show element for a second, then hide it

I'm trying to show an element for a short amount of time, then hiding it with a CSS transition, on a button click.
Here's the outline of what I did.
elem has a property of opacity: 0.
Fire event when button gets selected.
The events function will add, then remove a class named show to elem.
CSS has the following property: transition: opacity 500ms ease 1000ms;.
#elem.show has a property of opacity: 1.
The problem is, nothing happens when the button gets clicked on. How can I make element get shown, without a transition effect, then, after 1s close with a transition?
JSFiddle
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
btn.addEventListener('click', function() {
elem.classList.add('show');
elem.classList.remove('show');
});
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 500ms ease 1000ms;
}
#elem.show {
opacity: 1;
transition: none;
}
<button id="btn">Press Me</button>
<div id="elem"></div>

Using setTimeout is not tidy - it is better to listen to the animation end event and remove the show class. I have also used animation to show and hide the element successively - see demo below:
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
btn.addEventListener('click', function() {
elem.classList.remove('show');
// this force-restarts the CSS animation
void elem.offsetWidth;
elem.classList.add('show');
});
elem.addEventListener("animationend", function(){
elem.classList.remove('show');
}, false);
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
}
#elem.show {
animation: anime 1s 1;
}
#keyframes anime {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<button id="btn">Press Me</button>
<div id="elem"></div>
Update
Listening to the animation-end event do not seem necessary actually - it works properly even without it. The gist here is the use of void elem.offsetWidth to forcefully restart the animation:
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
btn.addEventListener('click', function() {
elem.classList.remove('show');
// this force-restarts the CSS animation
void elem.offsetWidth;
elem.classList.add('show');
});
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
}
#elem.show {
animation: anime 1s 1;
}
#keyframes anime {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<button id="btn">Press Me</button>
<div id="elem"></div>

just do this :
setTimeout(function() { elem.classList.remove('show'); }, 1000);
instead of writing :
elem.classList.remove('show');
To handle repeated clicks, do this ::
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;
btn.addEventListener('click', function() {
elem.classList.add('show');
clearTimeout(timeOutFunc);
timeOutFunc = setTimeout(function() {elem.classList.remove('show') } , 1000);
});

This borrows from other answers, and addresses the multiple press "issue"
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
btn.addEventListener('click', (function() {
var timer = null;
return function() {
elem.classList.add('show');
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(e => elem.classList.remove('show'), 1000);
};
})());
#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 500ms ease 500ms;
}
#elem.show {
opacity: 1;
transition: none;
}
<button id="btn">Press Me</button>
<div id="elem"></div>

Try with this...i Hope its resolved your prblm
https://jsfiddle.net/b3en368p/5/
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
btn.addEventListener('click', function() {
elem.classList.add('show');
setTimeout(function(text){
elem.classList.remove('show');
}, 1000);
});

Add css
#elem {
background-color: orange;
width: 100px;
height: 100px;
display: none;
}
#elem.show {
display: block;
}
Your listener should be like this-
btn.addEventListener('click', function() {
elem.classList.add('show');
setTimeout(function(){
elem.classList.remove('show');
}, 1000);
});