I would like to use a function that prints a string slow in sequence on a page once the page has loaded. Something like this:
"W, E, L, C, O, M, E , T, O, M, Y, P, A, G, E"
Any suggestions where i can find a guide?
Thanks in advance!
Try with SetInterval function .split the string with space the apply the array with setInterval with time delay
var a = "WELCOMETOMYPAGE";
window.onload = function() {
var arr = a.split('');
var i = 0;
var timer = setInterval(function() {
if (arr.length > i) {
document.body.innerHTML += '<span>' + a[i] + ',</span>';
}
i++;
}, 500);
}
span {
transition: all 0.5s ease;
}
You can probably achieve this with a clever use of setInterval
var welcome = "Welcome to my page";
var index = 1;
var interval = setInterval(function(){
if(index <= welcome.length) {
console.log(welcome.substr(0,index))
index++;
} else {
clearInterval(interval);
}
}, 500);
But of course instead of console.log update your page element. I'm using console.log so that you can quickly test this code.
So substitute:
console.log(welcome.substr(0,index))
With:
document.getElementById("element_id").textContent=welcome.substr(0,index)
Alternatively you could use a library like Greensock which is very good at sequencing stuff. In fact they even have a function that does exactly that:
https://greensock.com/
UPDATE:
Of course all of this has to be inside a window onload function to make sure it executes after the page has loaded:
window.onload = function() {
var welcome = "Welcome to my page";
var index = 1;
var interval = setInterval(function(){
if(index <= welcome.length) {
document.getElementById("element_id").textContent=welcome.substr(0,index)
index++;
} else {
clearInterval(interval);
}
}, 500);
}
SUMMARY:
Study
How to execute javascript code after the page has loaded
How to use setInterval in javascript
How to update dom elements using javascript (study jquery as well while you at it)
Related
I try to make 3 basic slideshow.
I made this code for the first one and wanted to use it on the other 2 as well with the New slideS() method and with some parameter changing.But it's not working,even the first function is'nt working if I put parameter in it.
Can somebody explain me why is this not working and how to fix it?Thanks beforehand!
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("slideS()", 1500);
}
slideS(img)
You could do something like this, using an object oriented approach:
function SlideShow(el, imagesArray, msDelay) {
this.el = el;
this.images = imagesArray;
this.delay = (msDelay) ? msDelay : 1000;
this.timer = null;
this.Run = function () {
var self = this;
var index = 0;
this.timer = setInterval(function(){
self.el.src = self.images[index++ % self.images.length];
}, this.delay);
}
this.Stop = function() {
this.timer = null;
}
}
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var delay = 1500;
var ss = new SlideShow(img, imgArr, delay);
ss.Run();
...
ss.Stop();
Would that work for you? Then you are using pure functions and an object that can be used to start, stop, and manage any slide show.
I think you want like:
Remove setTimeout. And use setInterval:
setInterval(function(){
slideS(img)
},1500)
You could use a closure over the element and the array and use setInterval instead of setTimeout.
function slide(id, array) {
function swap() {
image.src = array[i];
i++;
i %= array.length;
}
var image = document.getElementById(id),
i = 0;
setInterval(swap, 1500);
}
slide('image1', ['http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/']);
<image id="image1"></image>
I assume it works when the function doesn't take a parameter?
Then, the reason it would work with no parameter, but stop working with a parameter, is that the setTimeout tries to recursively call the function but doesn't pass a parameter. So you'd change that to
setTimeout(() => {slideS(a);}, 1500);
But then when you try to run multiple instances of this concurrently, you'll get into trouble because your'e using global variables. You'll need to use something more local (perhaps closures?) for your lcv, for example.
try this... you are making mistake at some places
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(() => slideS(a), 1500);
/* you need to pass function to setTimeout and pass refrence of image that's 'a' */
// or use function instead of arrow function
setTimeout(function() { slides(a) }, 1500);
}
slideS(img)
hope this helps..
You have to use setInterval instead of setTimeout
var img = document.getElementById("asd");
var imgArr = ["https://i.stack.imgur.com/lgt0W.png", "https://i.stack.imgur.com/X0fKm.png", "https://i.stack.imgur.com/YfPSD.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
}
slideS(img); //initial call to start it without having to wait for 1500 ms to pass
setInterval(function() {
slideS(img);
}, 1500);
<img id="asd">
I am building a website and the homepage will basically have 2 div's containing text. I want one of the divs to change every 2 seconds with values I've placed in an array
var skills = ["text1","text2","text3","text4"];
var counter = 0;
var previousSkill = document.getElementById("myGreetingSkills");
var arraylength = skills.length - 1;
function display_skills() {
if(counter === arraylength){
counter = 0;
}
else {
counter++;
}
}
previousSkill.innerHTML = skills[counter];
setTimeout(display_skills, 2000);
innerHTML is evil, use jQuery! (assuming because you have it selected as a tag)
Working fiddle
(function($) {
$(function() {
var skills = ["text1","text2","text3","text4"],
counter = skills.length - 1,
previousSkill = $("#myGreetingSkills"),
arraylength = skills.length - 1;
function display_skills() {
if (counter === arraylength) {
counter = 0;
}
else {
counter++;
}
previousSkill.html(skills[counter]);
}
display_skills();
setInterval(function() {
display_skills();
}, 2000);
});
})(jQuery);
You need to wrap display_skills inside a function in your setTimeout() and use setInterval() instead.
var myInterval = setInterval(function(){display_skills()}, 2000);
And make sure you call previousSkill.innerHTML = skills[counter]; inside your interval'd function - else it will run just once.
You can terminate your interval with window.clearInterval(myInterval);
Use array.join().
The syntax of this function is array.join(string), where3 string is the joining character.
Example:
[1, 2, 3].join(" & ") will return "1 & 2 & 3".
Hope this helps,
Awesomeness01
I had written a callback function to capture the snapshot of running video using html5 video control and canvas.
I used a for loop to iterate and call the same callback function take the burst capture. If i add alert('') in the callback , the video in the background rerendering when alert message display, the burst snap shot works fine as taking diff photos(frames/images of the running video). But when I removed the alert('') , the video does not run in the background and the bursted images are the same instead of different.
The code
for (var i = 0; i < burstcount; i++) {
var wcam = Webcam;
wcam.burst_snap(function (dataurl, id) {
var arrayindex = passedName + "_" + id;
imgid = imgid + i;
alert(dataurl);
burstcapturedata[arrayindex] = dataurl;
}, i);
var j = 0;
while (j < 10000000000) {
j++;
}
}
DisplayBurstedImages();
}
Yes, actually. Alert holds next execution of code. If your code works with alert it means that you require delay.
Try setTimeout or put the code in the correct place where everything is getting loaded.
I guess it needs time for binding video. you can use setTimeout function for delay.
var delay =100;
setTimeout(function () {/*your function*/ }, delay);
delay = delay + 300;
Your code needs to look something like this:
var wcam = Webcam;
var cnt = 0;
wcam.burst_snap(function(dataurl, id) {
var arrayindex = passedName + "_" + id; //you do not have an array if this is the key
imgid = imgid + cnt; //no clue what this is for
cnt++;
burstcapturedata[arrayindex] = dataurl;
if (cnt===burstcount) {
DisplayBurstedImages();
}
}, 100); //no clue what that value is supposed to be
I'm trying to write a script that will pick a random word from an array called words, and stop the loop after 5 times and replace the html with Amazing. so it always ends on amazing. Can't figure out best practice for something like this. My thinking is there just don't know where to put the script ender or how to properly implement this.
I feel like I need to implement something like this into my script, but can't figure out where. Please help.
if(myLoop > 15) {
console.log(myLoop);
$("h1").html('AMAZING.');
}
else {
}
Here is the Javascript that I'm using to loop and create bring new words in.
$(document).ready(function(){
words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focussed', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued']
var timer = 2000,
fadeSpeed = 500;
var count = words.length;
var position, x, myLoop;
$("h1").html(words[rand(count)]);
function rand(count) {
x = position;
position = Math.floor(Math.random() * count);
if (position != x) {
return position;
} else {
rand(count);
}
}
function newWord() {
//clearTimeout(myLoop); //clear timer
// get new random number
position = rand(count);
// change tagline
$("h1").fadeOut(fadeSpeed, function() {
$("h1").slideDown('slow'); $(this).html(words[position]).fadeIn(fadeSpeed);
});
myLoop = setTimeout(function() {newWord()}, timer);
}
myLoop = setTimeout(function() {newWord()}, timer);
});
Here's my codepen
http://codepen.io/alcoven/pen/bNwewb
Here's a solution, which uses a for loop and a closure.
Words are removed from the array using splice. This prevents repeats.
I'm using jQuery delay in place of setTimeout:
var i, word, rnd, words, fadeSpeed, timer;
words = ['respected​', 'essential', 'tactical', 'effortless', 'credible', 'smart', 'lucid', 'engaging', 'focused', 'effective', 'clear', 'relevant', 'strategic', 'trusted', 'compelling', 'admired', 'inspiring', 'cogent', 'impactful', 'valued'];
fadeSpeed = 500;
timer = 2000;
for(i = 0 ; i < 6 ; i ++) {
if(i===5) {
word= 'awesome';
}
else {
rnd= Math.floor(Math.random() * words.length);
word= words[rnd];
words.splice(rnd, 1);
}
(function(word) {
$('h1').fadeOut(fadeSpeed, function() {
$(this).html(word);
})
.slideDown('slow')
.delay(timer)
.fadeIn(fadeSpeed);
}
)(word);
}
h1 {
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
I added an iteration counter to check how many times it has changed.
Added this by other variables:
var iter = 1;
Added this in the newWord function:
iter = iter + 1;
if (iter > 5) {
return;
}
var word;
if (iter == 5) {
word = 'awesome';
}
else {
...
Here's my solution by changing your code:
http://codepen.io/anon/pen/YPGWYd
I am trying to make a slide show in mootools, and was trying delay function to make a periodic effect in slideshow but it was not working. So i am planning to make a timer function, but have no idea how to do that.
here is something which i have done..i little messy i guess
function slideImages(id_new, id_old){
console.log($(id_new));
$(id_old).tween('opacity', [1,0]);
$(id_old).setStyle('display','none');
$(id_old).tween('margin-left', -980);
$(id_new).setStyle('display', 'block');
$(id_new).tween('opacity', [0,1]);
$(id_new).tween('margin-left', 180);
var c = id_new;
var d = id_old;
//timer = setInterval ( "timerFunction()", 5000 );
(slide(c, d)).delay(5000); //this isn't working and browser is getting hanged
}
function slide(c, d){
console.log(c);
if (c.split('_')[1].toInt() > 2){
id_new = 'image_'+ 0 ;
console.log(id_new);
}
else{
id_new = 'image_'+ (c.split('_')[1].toInt()+1);
console.log(id_new);
}
id_old = c;
slideImages(id_new, id_old);
};
there are many ways to use delay or setTimeout. here they are:
function slideImages(id_new, id_old) {
var c = $(id_new);
var d = $(id_old);
d.tween('opacity', [1, 0]);
d.setStyle('display', 'none');
d.tween('margin-left', -980);
c.setStyle('display', 'block');
c.tween('opacity', [0, 1]);
c.tween('margin-left', 180);
// your timer becomes global here, careful. crappy pattern.
// use a closure so it goes in the upper scope, allowing you to stop.
// cancel by clearTimeout(timer)
// pass function to delay, scope = null, arguments
timer = slide.delay(5000, null, [c, d]);
// or
timer = (function() {
slide(c, d);
}).delay(5000);
// or normal js
timer = setTimeout(function() {
slide(c, d);
}, 5000);
}
function slide(c, d) {
if (c.split('_')[1].toInt() > 2) {
id_new = 'image_' + 0;
console.log(id_new);
}
else {
id_new = 'image_' + (c.split('_')[1].toInt() + 1);
console.log(id_new);
}
id_old = c;
slideImages(id_new, id_old);
}
i've adapted this mootools diver scroller. at the moment you have to click the buttons to move left to right. I was wondering if any one could help me put a automated scroll in?
Check with this Link...
Also refer this code...
heres the js code
var totalImages = 3;
var currentImage = 1;
function workSlide(way) {
var currentAmount=$("holder2").getStyle("margin-left");
var myFx = new Fx.Tween('holder2',{duration: 600});
if(way == "right") {
if (currentImage <= totalImages-1) {
currentImage++;
var whichAmount = -(((currentImage-1)) * 920);
myFx.start('margin-left',currentAmount,whichAmount);
}
} else {
if (currentImage > 1) {
currentImage--;
var whichAmount = -(((currentImage-1)) * 920);
myFx.start('margin-left',currentAmount,whichAmount);
}
}
}