Toggle Class with Jquery very fast - javascript

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

Related

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 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

How to add styling to output text?

Following code swaps the text after 5 second to some other text, which is implemented using JavaScript. I want to make the output text ( "outputtext1" and "outputtext2") look bigger like a heading, having orange color, and center aligned. How to do that?
The swapping of text works perfectly, there's no problem in the JavaScript code.
<html>
<head>
<style>
div.textContent {
display: none
}
</style>
<div id="textMessage"></div>
<div class="textContent">
<h2>"outputtext1"</h2></span>
</div>
<div class="textContent">
<h2>"outputtext2"</h2></span>
</div>
<script>
var cnt = 0,
texts = [];
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++] = $(this).text();
});
function slide() {
if (cnt >= texts.length) cnt = 0;
$('#textMessage').html(texts[cnt++]);
$('#textMessage')
.fadeIn('slow').animate({
opacity: 1.0
}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
slide()
</script>
</html>
You can set some style thanks to simple css :
.textContent h2 {
color:orange;
text-align:center
font-size: 40px; /* you can increase this value*/;
}
Becareful though because your HTML semantic seems incorrect :
<div class="textContent" ><h2>"outputtext1"</h2></div>
Notice the removal of the < span> tag. Notice also that this is very very simple use case of CSS, so if you need more about it, you better have a look at some documentation such as Mozilla one.
Hope this helped
var cnt=0, texts=[];
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html(texts[cnt++]);
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
slide()
.textContent {
display:none;
}
#textMessage {
font-size: 2em;
color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>
<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>
You would want to edit the class, something like this:
<style>
div.textContent { color:orange;font-size:20px;display:none }
</style>
Just a suggestion, but you probably don't need to have so much nesting here:
<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>
Something like this would probably work better:
<h2 class="textContent">"outputtext1"</h2>
<h2 class="textContent">"outputtext2"</h2>
var cnt=0, texts=[];
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html("<h1>"+texts[cnt++]+"</h1>");
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
slide()
#textMessage {
text-align: center;
color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>
<div class="textContent"><h2>outputtext1</h2></span> </div>
<div class="textContent"><h2>outputtext2</h2></span> </div>
There are 3 steps to your solution - Codepen here
1) Remove the unwanted "" from <h2>"outputtext1"</h2>. Keep it <h2>outputtext1</h2>
2) Centering & color can be done via CSS
#textMessage {
text-align: center;
color: orange;
}
3) Now the heading, you need to make a small change to your javascript -- $('#textMessage').html("<h1>"+texts[cnt++]+"</h1>");
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html("<h1>"+texts[cnt++]+"</h1>"); //changed
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
You need to apply CSS to #textMessage, like:
#textMessage {
font-size: 38px;
font-weight: bold;
color: orange;
}
var cnt=0, texts=[];
// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
function slide() {
if (cnt>=texts.length) cnt=0;
$('#textMessage').html(texts[cnt++]);
$('#textMessage')
.fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow',
function() {
return slide()
}
);
}
slide()
#textMessage {
font-size: 38px;
font-weight: bold;
color: orange;
}
body {
padding: 20px;
}
.textContent {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>
<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>
Hope this helps!

How to slide or .animate multiple items in a div?

I've coded a show/hide for a list of items as seen here https://jsfiddle.net/qbxtkyzu/. I'm trying to animate (slide In and Out) the same items instead of just having them pop in and out.
<div id="main">
<div>
Base Text /
</div>
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
</div>
and the javascript:
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(5000).show(30, function() {
$elem.eq(i % l).delay(5000).fadeOut(30, go);
i++;
})
}
go();
and the css:
.trip { display: none}
The first parameter both show and fadeOut functions get is the time (in milliseconds) to run the animation.
In you case - you have 30, which are 30 milliseconds - pretty fast.
If you change that to (lets say) 1000, you will see the animation:
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(2000).show(1000, function() {
$elem.eq(i % l).delay(2000).fadeOut(1000, go);
i++;
})
}
go();
.trip { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
Born To /
</div>
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
</div>
I'd just use CSS transitions for this. So
.trip{
transition: opacity 1s;
opacity: 0;
}
.trip.show{
opacity: 1;
}
Then just add the class "show" to the elements rather than animating them in JS.
If you're looking for it to slide in from the left, you could probably do something like this:
.wrapper {
position: relative;
}
.trip {
transition: left 2s;
position:absolute;
left: -100%;
}
.trip.visible {
left: 0;
}
https://jsfiddle.net/xs7b6hxe/

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