deleting character from a string one by one - javascript

i've been trying to create an effect like a string is being typed in my webpage. In other words that string will appear character by character. so I did this using jquery and succeded .
the code I used is something like this,
$(function() {
var string = "Coming Soon|",
stringCount = 0;
setInterval(function(){
$('.main_section_animate span').append(string[stringCount]);
stringCount += 1;
},100);
})
Note that the span tag is empty, nothing is in there.
Problem is now I'm trying to delete the string character by character, backwards. I've tried using setInterval and replace(string[stringCount],''), selecting the main section span and main section span.text() but it didn't work and gave some weird results.
And also there are other thing I tried but mainly some combinition of text() with replace
so, anyone can help me out with this?

can be:
let str = 'Coming Soon |';
const $span = $('.main_section_animate span');
$span.html(str);
const animation = setInterval(() => {
str = str.slice(0, -1)
$span.html(str)
!str.length && clearInterval(animation)
}, 100)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span></span>
</div>

You should probably clear that interval to get the intended result, see: https://jsfiddle.net/2mj5zp7h/
HTML:
<div class="main_section_animate">
<span></span>
</div>
JS:
$(function() {
var string = "Coming Soon|",
stringCount = 0;
var animation = setInterval(function(){
$('.main_section_animate span').append(string[stringCount]);
stringCount += 1;
if(stringCount>=string.length) {
clearInterval(animation);
animation = setInterval(function(){
$('.main_section_animate span').text(string.substr(0,stringCount));
stringCount -=1;
if(stringCount<0)
clearInterval(animation);
},100);
}
},100);
})

EDITED: Change code.
This is a solution for you :)
Use split();
const str = "Coming Soon ...";
let timer;
function deletingEffect() {
let word = str.split("");
var loopDeleting = function() {
word.pop();
document.getElementById('word').innerHTML = word.join("");
timer = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
deletingEffect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span id="word"></span>
</div>

Use .slice() and a simple for loop to get what you need.
let str = 'Coming Soon|';
for (let i = -1+str.length; i > 0; i--) {
let delay = 100*(str.length-(i+1))
setTimeout(()=>{
$('.main_section_animate span').html( str.slice(0, i) );
}, delay);
}
Notice the for loop starts at .length and walks downwards (i--) while i > 0. This gives you an easy way to use str.slice().
Also notice the removal of setInterval which is a waste of CPU in your case. Instead, just set a one-shot setTimeout for each removal.
Finally, use .html instead of .append.

Related

Image didn't change in jQuery setAttribute

i'm trying to change images based on the user pressing the next button but that isn't happening
var my_image = document.getElementById(main_image);
var image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];
var image_index = 1;
function change_image(){
my_image.setAttribute("src", image_array[image_index]);
image_index++;
if(image_index > 1){image_index = 0;}
}
<img src="https://www.w3schools.com/jsref/klematis.jpg" id ="main_image">
<button onclick="change_image()"> next </button>
document.getElementById() needs to have a string passed into it. If main_image is an element, and not a string, this could be your issue.
Looks like your array index is set wrong
There are 2 problems in your code:
1- getElementByID expects a string. By not putting quote marks around "main_image" javascript thinks main_image is a variable name, not a value.
2- your array only has one element, so it's position is 0, not 1.
Below your code is working:
var my_image = document.getElementById("main_image");
var image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];
var image_index = 0;
function change_image(){
my_image.setAttribute("src", image_array[image_index]);
image_index++;
if(image_index > 1){image_index = 0;}
}
<img src="https://www.w3schools.com/jsref/klematis.jpg" id ="main_image">
<button onclick="change_image()"> next </button>
Alternatively you can querySelector.
Secondly instead of using onClick in the button use addEventListener.
`
let my_image = document.querySelector("#main_image");
let nextBtn = document.querySelector("button")
let image_array = ["https://www.w3schools.com/jsref/klematis2.jpg"];
let image_index = 0;
const change_image =() => {
my_image.setAttribute("src", image_array[image_index]);
image_index++;
if(image_index > 1){image_index = 0;}
}
nextBtn.addEventListener("click", change_image)
`
The answer has been given, I'm only improving on the syntax
Pass a string into the document.getElementById(). I hope this works for you.

Text Carousel Not Working in Jquery

I Don't Why Its Not Working Please Help! I was also trying it with plain javascript but i want to make it with jquery .
MY HTML
<h1 class="heading">MAKE BIG <span id="flipper">IMPRESSION</span></h1>
MY JQUERY
// customized js you can change these setting
(function(){
// Flipper Slider
var flipperContent = ['DECISION','MISTAKES','INVENTIONS'];
var index = 0;
function flipperSlider(){
var flipper = $('#flipper');
var messageLibrary = flipperContent[index];
flipper.innerHTML = messageLibrary;
index++;
if(index >= flipperContent.length){
index = 0;
}
}
setInterval(flipperSlider,4000);
})();
flipper is a jquery object try flipper[0].innerHTML = messageLibrary or flipper.get(0).innerHTML = messageLibrary
You want something like this?
I have modified your code a bit.
used .text instead of innerHtml.
please check the below code snippet or this Link
(function(){
// Flipper Slider
var flipperContent = ['DECISION','MISTAKES','INVENTIONS'];
var index = 0;
function flipperSlider(){
var flipper = $('#flipper');
var messageLibrary = flipperContent[index];
flipper.text(messageLibrary) ;
index++;
if(index >= flipperContent.length){
index = 0;
}
}
setInterval(function(){flipperSlider()},4000);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1 class="heading">MAKE BIG <span id="flipper">IMPRESSION</span></h1>
Use .html() as flipper is a jQuery object! I've also minimised your code a bit.
(function() {
// Flipper Slider
var flipperContent = ['DECISION','MISTAKES','INVENTIONS'];
var index = 0;
function flipperSlider(){
$('#flipper').html(flipperContent[index++]);
index = index === flipperContent.length ? 0 : index;
}
setInterval(flipperSlider,1000);
}());
Here is a demo

Javascript body text change when bg color changes NOT A DUPLICATE

This is very similar to a previous question of mine but not the same, I am trying to learn the subtleties of Javascript.
Below is my code, I need to change the text in the body when the image changes, I think I am getting there and working it out but as you can see below, it is not yet exacly how i want it.
I would be very very grateful if you can help me.
<script>
$(document).ready(function() {
element = $("#testElement");
i = 1;
setInterval(function() {
element.removeClass("color"+i);
console.log(i);
i++
if (i == 5) {
i = 1;
}
element.addClass("color"+i);
}, 1000);
})
var arr = ['hi','hello ','how ','are ','you '];
changeColorAndText($('#testElement '), 0);
</script>
Thank you wonderful people in advance, you have taught me lots so far.
Working jsfiddle example
<div id="testElement">This is your element</div>
<script>
$(document).ready(function() {
element = $("#testElement");
var arr = ['hi','hello ','how ','are ','you '];
var i = 1; // localizing scope of this variable (not necessary)
setInterval(function(){
element.removeClass("color"+i);
console.log(i);
i++; // missing semicolon here
if(i == 5) i = 1;
element.addClass("color"+i);
element.text(arr[i]); // change the inner text of element
}, 1000);
});
</script>

How to re-order and animate text in jquery?

Firstly, I've made a CODEPEN or jsfiddles
Background:
Ok I have a span tag within a few header tags h1,h2,h3. Inside that spantag is the word
experience which is spelled backwards like so:
<h3>for <span class="hover-spell">ecneirepxe</span>.</h3>
Question
I'm unsure on the best way to approch this but I would like on hover:
reorder to spell experience correctly
if possible animate them overlapping another while re-ordering
I have no idea how to do this but I keep thinking regex, with arrays but this feels overly complicated and I really don't know anything about regex and proper array sorting. Any information to lead me in the right direction would be most appreciated. Or an edit to the codepen or jsfiddles would be so excellent.
One possible solution is to use css to accomplish this. This solution doesn't animate the transition, it just changes the order of the letters. Add this to your css:
.hover-spell:hover{
direction: rtl;
unicode-bidi: bidi-override;
}
Edit: Thanks to Marcel Gwerder for pointing out that it's not possible to animate the direction property
I found this answer, in another post (it goes through a given string of text and wraps each character in a span then assigns transiton styles to each), that may help with a jquery solution.
I've just tried to set up something animated with jquery, it's a bit tricky to get a fancy looking animation. But that one doesn't look too bad (DEMO).
var expElem = $(".hover-spell");
var exp = expElem.text();
var run = false;
expElem.empty();
for(var i = 0; i <= exp.length; i++) {
expElem.append('<span>'+exp.charAt(i)+'</span>');
}
expElem.mouseover(function() {
if(run === true) return false;
run = true;
var stepDuration = 300;
var counter = 0;
(function anim(){
if(counter == exp.length -1) return false; //Remove -1 to get last "e" animated
counter++;
var nth = exp.length;
var elem = $('span:nth-child('+nth+')', expElem);
elem.slideUp(stepDuration, function() {
(function() {
if(counter == 1) return elem.prependTo(expElem);
else return elem.insertAfter($('span:nth-child('+(counter-1)+')', expElem));
})().slideDown(stepDuration, anim);
});
})();
});
To get it working with hover(including mouseleave) is a bit more complicated. You could also try something with storing the position and then slide them over each other but again a bit more complicated.
<span id = "spell">olleh</span> //hello in reverse
<script type="text/javascript">
var newText;
var text = null;
text = document.getElementById("spell").innerHTML;
for (var i = text.length - 1; i >= 0; i--) {
if (i == text.length - 1) {
newText = text.substr(i, 1);
}
else {
newText = newText + text.substr(i, 1);
}
}
alert(newText);
</script>
write this script in body tag...

Jquery Problem Sort of Auto Slideshow

I'm having some problems, I'd like to have a sort of slideshow where users have 4 buttons, and when they click one div appears and the others disappear. The div's are all in the same place with the same size. I'd also like to put this automatic
var Idx = 1;
var IntervalKey = setInterval = (auto, 5000);
var auto = function() {
$("#MainImage").eq(Idx).fadeIn(1000);
while(Idx <3) {
Idx++;
$("#MainImage").eq(Idx).hide();
}
Idx++;
if(Idx>3) {
Idx = 0;
}
};
$(".botao-imagem").click(function(){
Idx = $(".botao-imagem").index(this);
auto();
});
Your main issue is repeated IDs, IDs must be unique, so $("#ID").eq() doesn't every have a purpose really, since it should be 1 or 0 results. First give the elements a class instead:
<div class="MainImage"><p>111111</p></div>
<div class="MainImage"><p>222222</p></div>
<div class="MainImage"><p>333333</p></div>
<div class="MainImage"><p>444444</p></div>​
and use a class selector, like this:
$(".MainImage")
Also auto needs to be declared before using it or define it as a function directly, overall like this:
var Idx = 0;
var IntervalKey = setInterval(auto, 5000);
function auto() {
$(".MainImage").hide().eq(Idx).fadeIn(1000);
Idx++;
if(Idx>3) Idx = 0;
};
$(".botao-imagem").click(function(){
Idx = $(".botao-imagem").index(this);
auto();
});
You can test the updated/working version with the above code here.

Categories