How to have the exact typing effect used on this page? https://www.braintreepayments.com/
<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']">Ve</span>
Here is the JSFiddle with the extracted library from the website : http://jsfiddle.net/8g6dsp0p/1/
You can initialize the script with this following code :
<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']"></span>
<script>
$(document).ready(function() {
new Writer
});
</script>
var word = "Venmo";
var cur = 1;
var intrvl = setInterval(function () {
$('.writer').html(word.slice(0,cur));
if(cur >= word.length) {
clearInterval(intrvl);
}
else{
cur++;
}
}, 500);
JSBin
The above jsBin has the code you require. it is not neatly formatted but code is correct.
Again to reproduce the code
<span clas="writer"></span>
var words = ["Venmo", "alright", "done", "ok"];
var curWord = 0;
function writeWord(word, deleteWord) {
var cur;
if(deleteWord){
cur = deleteWord.length;
var delIntrvl = setInterval(function () {
if(!cur) {
clearInterval(delIntrvl);
if(curWord < (words.length - 1)) {
writeWord(words[++curWord],"");
}
else {//if you dont need continous looping remove this else statement
curWord = 0;
writeWord(words[curWord],"");
}
}
else{
var reqWrd = deleteWord.slice(0,cur);
console.log(reqWrd);
$('.writer').html(reqWrd);
cur--;
}
}, 200);
}
else {
cur=1;
var intrvl = setInterval(function () {
if(cur >= word.length) {
clearInterval(intrvl);
writeWord("",word);
}
else{
var reqWrd = word.slice(0,cur);
console.log(reqWrd);
$('.writer').html(reqWrd);
cur++;
}
}, 200);
}
}
writeWord(words[curWord], "");
Updating the code and also providing jsBin for continous looping
ContinousLoopJsBin
Related
function start() {
var work = document.getElementById("work").value;
var rest = document.getElementById("rest").value;
var rounds = document.getElementById("rounds");
var timer = document.getElementById("timer");
function countdown() {
var roundsValue = rounds.value;
while (roundsValue > 0) {
var worktime = setInterval(function () {
timer.value = work + "sec";
work = work - 1;
if (work === 0) {
clearInterval(worktime);
}
}, 1000);
var resttime = setInterval(function(){
timer.value = rest + "sec";
rest = rest-1;
if(rest === 0){
clearInterval(resttime);
}
}, 1000);
roundsValue = roundsValue-1;
}
}
}
I am working on my javascript progress right now and I came here with this problem. I want to repeat the same amount of work time and rest time as rounds are but it doesnt work like this and I cant help myself. For example: 8 rounds of 10 seconds of work and then 5seconds of rest. It maybe doesnt work because function cant be implemented into a WHILE loop.
fiddle: http://jsfiddle.net/shhyq02e/4/
Here is a quick fix, may not be the best way to go about it but will get what to do.
http://jsfiddle.net/sahilbatla/shhyq02e/6/
function start() {
var rounds = document.getElementById("rounds");
var timer = document.getElementById("timer");
var roundsValue = parseInt(rounds.value);
(function countdown() {
var work = document.getElementById("work").value;
var rest = document.getElementById("rest").value;
if (roundsValue > 0) {
var worktime = setInterval(function () {
timer.value = work + "sec(work)";
work = work - 1;
if (work === 0) {
clearInterval(worktime);
var resttime = setInterval(function() {
timer.value = rest + "sec(rest)";
rest = rest - 1;
if (rest === 0) {
clearInterval(resttime);
--roundsValue;
countdown();
}
}, 1000);
}
}, 1000);
}
})();
}
The problem I am having is inside my if statements, the .clicks() do not work. I need i button to be clicked and rerun the script but it isnt working. The SetTimeout(start,5000) helps it repeate but makes the script run several times at once.
document.getElementById('sound-toggle').onclick = function() {
var startingBet = 5;
startingBet = parseFloat(startingBet);
document.getElementById('bet-bt').onclick = function () {
function start() {
//show if it is getting chip amount
//var rr = document.getElementById('bet-rb-2').innerHTML; //neerdsa classs s3elec5to9r
//var rr = document.getElementById('bet-rb-2').innerHTML;
//
setTimeout(start,5000);
//select the result of the spin
var result = document.getElementById('result-text').innerHTML;
alert(result.length);
if (result.length == 5) { //lost
alert('lost');
//document.getElementById("bet-bt").click();
break;
} else if ( result.length == 4) { //won
alert('won');
//document.getElementById("bet-bt").click();
break;
} else {
alert('something is wrong' );
///document.getElementById("bet-bt").click();
break;
}
}
start();
};
};
may be try something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sound-toggle').click(function(){
var startingBet = 5;
startingBet = parseFloat(startingBet);
});
$('#bet-bt').click(function(){
setTimeout(start,50);
});
});
function start() {
//show if it is getting chip amount
//var rr = document.getElementById('bet-rb-2').innerHTML; //neerdsa classs s3elec5to9r
//var rr = document.getElementById('bet-rb-2').innerHTML;
//
//select the result of the spin
var result = document.getElementById('result-text').innerHTML;
alert(result.length);
if (result.length == 5) { //lost
alert('lost');
} else if ( result.length == 4) { //won
alert('won');
//document.getElementById("bet-bt").click();
} else {
alert('something is wrong' );
///document.getElementById("bet-bt").click();
}
}
</script>
Can you please tell me how to show number all time.
Given : LastNumber
when **previous** button click .
Result: 10 11
Result: 9 10
Result: 8 9
if user click next button
Result: 9 10
Result: 10 11
http://jsfiddle.net/LyXLD/3/
function printdown(count) {
$("#pre").html('')
$("#pre").html($("#curr").html());
$("#curr").html('')
$("#curr").html(count);
// $("#pre").html(count);
}
$("#next").click(function () {
if (++file_show_counter <= lastestCountValue) {
printdown(file_show_counter);
} else {
file_show_counter--;
}
});
Use this:
$(document).ready(function () {
$('#previos').click(function () {
var prevVal = parseInt($('#pre').html());
var curVal = parseInt($('#curr').html());
$('#pre').text(prevVal - 1);
$('#curr').text(curVal - 1);
});
$('#next').click(function () {
var prevVal = parseInt($('#pre').html());
var curVal = parseInt($('#curr').html());
if (curVal < 11) {
$('#pre').text(prevVal + 1);
$('#curr').text(curVal + 1);
}
});
});
Demo:http://jsfiddle.net/LyXLD/5/
i have 11 pages.and i have to show 2 pages at one time.i just know how
many pages i have mean (11). when i go up it show 9 and 10 page.then 8
and 9 page
Update
Well now that OP has actually stated this requirement, here's an updated solution.
Prev button stops working when it gets down to 1, and the next button stops working when it reaches the page count.
DEMO
var pageCount = 11;
$("#previous").on("click", function () {
$pre = $("#pre");
$curr = $("#curr");
$count = +$pre.text();
if ($count > 1) {
$pre.text($count - 1);
$curr.text($count);
}
});
$("#next").on("click", function () {
$pre = $("#pre");
$curr = $("#curr");
$count = +$curr.text();
if ($count < pageCount) {
$pre.text($count);
$curr.text($count + 1);
}
});
I just write new code please check it on http://jsfiddle.net/shantanubhaware/LyXLD/10/
working code
var lastval = $('#curr').text();
var preval = $('#pre').text();
var i = 0;
$('#previos').click(function () {
var lastval = $('#curr').text();
var preval = $('#pre').text();
previous();
});
$('#next').click(function () {
var lastval = $('#curr').text();
var preval = $('#pre').text();
next();
});
function previous() {
if (preval >= 1) {
--lastval;
--preval;
$('#curr').text(lastval);
$('#pre').text(preval);
}
}
Please take a look. Is that what you are looking for?
JSFIDDLE DEMO
var lastestCountValue = 11,
file_show_counter = lastestCountValue - 1;
$(document).ready(function () {
$("#previos").click(function () {
if (file_show_counter > 1) {
print(--file_show_counter, file_show_counter + 1);
}
});
$("#next").click(function () {
if (file_show_counter < lastestCountValue - 1) {
print(++file_show_counter, file_show_counter + 1);
}
});
});
function print(pre, cur) {
$("#pre").html(pre);
$("#curr").html(cur);
}
Please help me convert this JQuery to Javascript progress bar script
var generateButton = document.getElementById("generate");
if (generateButton.addEventListener) {
generateButton.addEventListener("click", random, false);
}
else if (generateButton.attachEvent) {
generateButton.attachEvent('onclick', random);
}
function random(e) {
setTimeout(function(){
$('.progress .bar').each(function() {
var me = $(this);
var perc = me.attr("data-percentage");
//TODO: left and right text handling
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.css('width', (current_perc)+'%');
}
me.text((current_perc)+'%');
}, 50);
});
},300);
var num = Math.random();
var greetingString = num;
document.getElementById("rslt").innerText = greetingString;
}
Here is the Live version: http://jsfiddle.net/chjjK/9/
Pretty easy actually, use document.getElementsByClassName and a for loop to replace the each:
var bar = document.getElementsByClassName("bar");
for (var i = 0; i < bar.length; i++) {
var me = bar[i];
var perc = me.getAttribute("data-percentage");
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.style.width = current_perc+'%';
}
me.innerHTML = ((current_perc)+'%');
}, 50);
}
}, 300);
Demo: http://jsfiddle.net/chjjK/13/
The First Script that allows me to create a moving clouds and loop after if reaches the end
// dvdp - volll - iphone alert
var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
// TJP - volll
var stispace=new Array();
var jumpspace=new Array();
var skyspace=new Array; skyspace['dir']=-1; skyspace['place']=0;
var smokespace=0;
var shipspace=0;
var cloudspace=new Array();
var stagespace=2000;
cloudspace[1]=new Array(); cloudspace[1]['w']=219; cloudspace[1]['p']=2000;
cloudspace[2]=new Array(); cloudspace[2]['w']=128; cloudspace[2]['p']=1050;
cloudspace[3]=new Array(); cloudspace[3]['w']=51; cloudspace[3]['p']=1200;
cloudspace[4]=new Array(); cloudspace[4]['w']=112; cloudspace[4]['p']=120;
cloudspace[5]=new Array(); cloudspace[5]['w']=219; cloudspace[5]['p']=130;
cloudspace[6]=new Array(); cloudspace[6]['w']=219; cloudspace[6]['p']=1020;
cloudspace[7]=new Array(); cloudspace[7]['w']=219; cloudspace[7]['p']=1400;
var movespace='';
var scrollspace=0;
function $(id) {
return document.getElementById(id);
}
function smoothto(whereto) {
wheretoreal=whereto;
if(scrollspace == 1) {return false;}
if(whereto == 'section_about_who') { whereto='section_about';}
if(whereto == 'section_about_contact') { whereto='section_about';}
scrollspace=1;
wheretoscroll=0;
wherefromscroll=topget();
for(smt=0;smt<pag_sections_name.length;smt++) {
if(smt>0) {wheretoscroll+=pag_sections_height[smt-1]}
if(pag_sections_name[smt] == whereto) {smt=pag_sections_name.length;}
}
if(wherefromscroll==wheretoscroll) {
scrollspace=0;
window.location='#'+wheretoreal;
return false;
}else{
window.paused=1;
clearInterval(int_TJPfloat);
clearInterval(int_TJProllsky);
}
$('vollltv').style.height='0';
tmp=new Array();
steps=20;
for(smt=1;smt<=steps;smt++) {
pt=smt/steps;
if(pt == .5) {
multi=1.5
} else {
multi=(Math.sqrt(Math.abs(2*pt-1))*(2*pt-1)/Math.abs(2*pt-1)+1)/2;
}
multi=Math.sqrt(smt/steps);
tmp[smt]='window.scroll(0,'+(wherefromscroll+(wheretoscroll-wherefromscroll)*multi)+');';
}
tmp[steps]+="window.location='#"+wheretoreal+"';$('vollltv').style.height='278px'; scrollspace=0;";
tmp[steps]+=" window.int_TJProllsky=undefined; window.int_TJProllsky=setInterval('TJProllsky();',200);";
tmp[steps]+="window.int_TJPfloat=undefined; window.int_TJPfloat=setInterval('TJPfloat();',50);";
tmp[steps]+="window.paused=0; ";
//alert(tmp.join("\n"));
ttt=Math.random();
stispace[ttt]=tmp;
setTI(ttt,10);
return false;
}
function volllresize() {
d=document.body.clientWidth;
if(d && d>1000) {
stagespace=d;
}
if($('inter4')) {
if (self.innerHeight) {
ch = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
ch = document.documentElement.clientHeight;
}
else if (document.body) {
ch = document.body.clientHeight;
}
if(ch>600) {
$('inter4').style.height=(ch-534)+'px';
}
}
}
function volllinit(section) {
if(section == 'inter0' && !is_iphone) {
volllresize();
window.onresize=volllresize;
for(i=1;i<cloudspace.length;i++) {
cloudspace[i]['p']*=d/1000;
}
//if(tmp.split('#')[1] == '' || tmp.split('#')[1] == 'section_main') {
// setTimeout('scroll(0,200);',100);
//}
}
else if(section == 'about') {
window.int_TJPfloat=setInterval("TJPfloat();",50);
tmp=location.href+'#';
}
}
window.paused=0;
function TJPmovecloud(cid,pos) {
if(pos > stagespace && window.paused>0 ) {
return;
}
if(pos+cloudspace[cid]['w']>stagespace) {
$('s_cloud'+cid).style.width=stagespace-pos+'px';
} else {
$('s_cloud'+cid).style.width=cloudspace[cid]['w']+'px';
}
$('s_cloud'+cid).style.left=pos+'px';
}
function TJPfloat() {
sy=Math.floor(Math.sin(smokespace)*20+20);
sy2=Math.floor(Math.sin(smokespace)*10+10);
sx=Math.floor(Math.cos(smokespace)*3+3);
//if(smokespace==0) {alert('about.css-be belerakni:'+sy+'px 0 0 '+sx+'px');}
$('g_wave1').style.margin=sy+'px 0 0 '+sy+'px';
$('g_wave2').style.margin=sy2+'px 0 0 '+sy2+'px';
smokespace+=.05; if(smokespace>2*Math.PI) {smokespace-=2*Math.PI;}
if($('inter1')) {
for(i=1;i<cloudspace.length;i++) {
if(cloudspace[i]['p'] >= stagespace) {cloudspace[i]['p']=-cloudspace[i]['w'];}
else if(cloudspace[i]['p'] <= -cloudspace[i]['w']) {cloudspace[i]['p']=stagespace;}
cloudspace[i]['p']-=1+cloudspace[i]['w']/200;
TJPmovecloud(i,cloudspace[i]['p']);
}
}
}
The Second script is the one that creates the bouncing effect like the one on tim van damme
<script type="text/javascript" charset="utf-8">
$('.navigation').each(function () {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelwrapper = $panels.filter(':first').parent(),
delay = 500,
heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
$panels.hide();
$links.click(function () {
var link = this,
$link = $(this);
// ignore if already visible
if ($link.is('.selected')) {
return false;
}
$links.removeClass('selected');
$link.addClass('selected');
document.title = 'jQuery look: Tim Van Damme - ' + $link.text();
if ($.support.opacity) {
$panels.stop().animate({opacity: 0 }, delay);
}
$panelwrapper.stop().animate({
height: 0
}, delay, function () {
var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
$panelwrapper.animate({
height: height
}, delay);
});
});
$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
</script>
This is the error I received
TypeError: Result of expression '$('.navigation')' [null] is not an object. Can anybody please explain to me why this error occur?
You receive this error because if the following function in the first code:
function $(id) {
return document.getElementById(id);
}
This overlaps with jQuery's $ function which is required by the second piece of code. rewrite the first piece of code to use jQuery's $() function or rename $() in the first piece of code and find/replace.
Do you have html elements with the class name "navigation" in your code?