I'm having a hard time finding a way to insert falling letters into my code. My task is to have a text string and have all the even-placed letters fall from the top and the odd-placed letters fly from the bottom and come together to form the string in the center.
So for instance, I have: <span class="uName">John Doe</span>
I would like the letters: O, N, D, E to fall from the top.
Likewise: J H _ O to fly up from the bottom. (keeping their respective horizontal positions).
Here's what I have so far, however I'm fairly inexperienced with JavaScript/JQuery and I can't get it to run.
vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
vertical[i] = textPos;
textPos += 5;
}
function poz(){
document.getElementsByClassName("tops").style.top = '0px';
document.getElementsByClassName("bottoms").style.bottom = '0px';
animate();
}
function animate(){
for(var j = 0; j < 80; ++j) {
document.getElementsByClassName("tops").style.top = vertical[j] + "px";
document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
}
}
$('.uName').each(function(){
var letters = $(this).text().split('');
$(this).text('');
for(var i = 0; i < letters.length; i++){
if(i % 2 == 0){
$(this).append('<span class="tops">' + letters[i] + '</span>');
}
else{
$(this).append('<span class="bottoms">' + letters[i] + '</span>');
}
}
poz();
});
Thanks so much in advanced!
P.S. If this task can be achieved with just CSS3, I would much prefer that option but I'm not sure if it's possible.
//css
.bottoms{
margin-top:200px!important;
}
//Script
vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
vertical[i] = textPos;
textPos += 5;
}
function poz(){
// $(".tops").css('top','0px');
// $(".bottoms").css('bottom','0px');
//document.getElementsByClasjqsName("bottoms").style.bottom = '0px';
animate();
}
function animate(){
for(var j = 0; j < 80; ++j) {
//alert(vertical[j]);
//$(".tops").css('top',vertical[j]+'px');
//$(".bottoms").css('bottom',vertical[j]+'0');
if(vertical[j]<101){
$(".tops").animate({top:vertical[j]+'px'},500);
$(".bottoms").animate({bottom:vertical[j]+'px'},500);
$(".tops").css('position','relative');
$(".bottoms").css('position','relative');
$(".tops").css('float','left');
$(".bottoms").css('float','left');
}
// document.getElementsByClassName("tops").style.top = vertical[j] + "px";
// document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
}
}
$('.uName').each(function(){
var letters = $(this).text().split('');
$(this).text('');
for(var i = 0; i < letters.length; i++){
if(i % 2 == 0){
$(this).append('<span class="tops">' + letters[i] + '</span>');
}
else{
$(this).append('<span class="bottoms">' + letters[i] + '</span>');
}
}
poz();
});
//NEW Fiddle link http://jsfiddle.net/PP44C/7/
Now everything is fine as you want . check it
Related
I'm in the process learning to code a slot game, I have the below code which handles the spinning of the game. I want to add a border to the reels and have the sprites gradually disappear behind the border before they are removed and returned to the top.
function spingame(){
spin.interactive = false;
if (reelcount === 2){
if((reel[0].y >= 10) && (reel[5].y >= 400) && (reel[10].y >= renderer.height / 790)){
cancelAnimationFrame(spingame);
reelcount = 0;
console.log(reelarray);
checkwinnings();
balanceUpdate();
spin.interactive = true;
refresh();
}
else{
for (var i = 0; i < 15; i++){
reel[i].y += anispeed;
}
requestAnimationFrame(spingame);
refresh();
}
}
else if (reel[0].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 5;
reelSet();
for (var i = 0; i < 5; i++) {
reel[i].y = 10;
}
refresh();
spingame();
reelcount = reelcount + 1;
}
else if (reel[5].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 10;
reelSet();
for (var i = 5; i < 10; i++) {
reel[i].y = 10;
}
refresh();
spingame();
}
else if (reel[10].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 15;
reelSet();
for (var i = 10; i < 15; i++) {
reel[i].y = 10;
}
refresh();
spingame();
}
else{
for (var i = 0; i < 15; i++) {
reel[i].setTexture(symb[reelarray[i]]);
reel[i].y += anispeed;
}
requestAnimationFrame(spingame);
refresh();
}
What should I be looking for?
I've tried making the Sprites a child of the border but they're still visible when they move outside of the border.
Turns out I was looking in the wrong place. Assign a mask to a rectangle in the center of the screen and it's now working
var masksContainer = new PIXI.Container();
stage.addChild(masksContainer);
var mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawRect(renderer.width / 6 , renderer.height / 7, renderer.width / 1.6 , renderer.height / 1.3);
mask.endFill();
masksContainer.addChild(mask);
for (var i = 0 ; i < 15; i++){
masksContainer.addChild(reel[i]);
reel[i].mask = mask;
refresh();
}
This is my Code:
var pages = Math.ceil(allItems / itemsPerPage);
var pagesArray = [];
for(var i = 0; i < pages; i++){
pagesArray.push(i);
}
var show = 3;
var offset = pageCounter + show;
var showPages = pagesArray.slice(pageCounter, offset);
for(var h = 0; h < showPages.length; h++){
if(pageCounter == showPages[h]){
selectedPageClass = 'selected';
}else{
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>");
}
My Problem now is:
if I have this array ["1","2","3","4","5"]
First Step when I am on page "0" it should be :
1(selected) 2 3
this works. but than it goes on like this:
2(selected) 3 4
3(selected) 4 5
4(selected) 5
5(selected)
But what I want is this:
1(selected) 2 3
2(selected) 3 4
3(selected) 4 5
3 4(selected) 5
3 4 5(selected)
http://codepen.io/anon/pen/JbBYva
You can update the variables on the top, the pageCounter is 0-based.
//editable variables
var pages = 5;
var pageCounter = 0;
var show = 3;
//calculation
var pagesArray = [];
for(var i = 1; i <= pages; i++){
pagesArray.push(i);
}
var offset = pageCounter + show;
var showPages = pagesArray.slice(Math.min(pages - show, pageCounter), offset);
for(var h = 0; h < showPages.length; h++){
if(pageCounter + 1 == showPages[h]){
selectedPageClass = 'selected';
}else{
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>");
}
You should do your showPages like this:
var showPages = pagesArray.slice(Math.min(pageCounter, pages- show), offset);
See demo below:
var pages = 10,
pageCounter = 0;
var pagesArray = [];
for (var i = 0; i < pages; i++) {
pagesArray.push(i);
}
var show = 3;
function paginate() {
$(".pagination").empty();
var offset = pageCounter + show;
var showPages = pagesArray.slice(Math.min(pageCounter, pages - show), offset);
for (var h = 0; h < showPages.length; h++) {
if (pageCounter == showPages[h]) {
selectedPageClass = 'selected';
} else {
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass + "'>" + showPages[h] + "</a>");
}
}
// initialize
paginate();
// turn pages
$('#counter').click(function() {
if (pageCounter >= pages)
return;
pageCounter++;
paginate();
});
// restart pagination
$('#restart').click(function() {
pageCounter = 0;
paginate();
});
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination"></div>
<button id="counter">Turn a page</button>
<button id="restart">Restart</button>
I have been trying to write code that would use an embedded for loop to calculate the number of sections inside of each article (there is more than one so I can't use getID) in a document. When the button is clicked the code works but the numbers it calculates are completely off which means something isn't counting correctly. Here is my function:
<script>
function Calculations() {
var a = document.getElementsByTagName("article");
var s = 0;
var z = 0;
var x;
for (x = 0; x < a.length; x++) {
var cn = a[x].childNodes;
z++
for (i = 0; i < cn.length; i++) {
if (cn[i].nodeType == 1) {
if (cn[i].tagName == "P"); {
s++;
}
}
}
alert("Article " + z + " has " + s + " section.")
s = 0
}
alert("There are " + a.length + " total articles.")
}
</script>
Thank you so much for your help!
I am making a script which receives a String and separate it on smaller Strings.
Ex: "This is a long sentence, and I will separate it into smaller parts. Lalala"
It will return "This is a long sentence","and I will separate it into smaller parts","Lalala"
The aim of this is to use Google translator to transform text to speech, but this feature has a limit of about 70-80 chars, so if the string is too large I need to chop it.
First I chop in sentences separated by a dot ("."), then if there are still too long sentences, I split them with the commas (",") and if there are still too long strings I separate them in unique words.
Everything works well until I try to join some words so the audio become more continuous. For some reason the strings separated by commas get joined again. I do not know why.
This is the code:
Edit: Relevant section split out and formatted
function talk(text){
var audios = document.createElement('audio');
audios.setAttribute('id','audio_speech');
var playlist = new Array()
if(text.length >= 75) {
playlist = text.split(".");
for (var i = 0;i<playlist.length;i++) {
if (playlist[i].length >= 75) {
auxarr = playlist[i].split(",");
//alert(auxarr.length);
for(var j=0;j<auxarr.length;j++) {
auxarr2 = auxarr[j].split(" ");
document.write(auxarr2+"<br>");
if (auxarr[j].length >= 75) {
auxarr2 = auxarr[j].split(" ");
for(var x=0; x < auxarr2.length; x++){
if(auxarr2[x].length < 50) {
aux = auxarr2[x];
while (aux.length < 50 && auxarr2[x+1]) {
aux = aux + " " + auxarr2[x+1];
auxarr2.splice(x,1);
auxarr2[x]=aux;
}
}
//...
Edit: Full original code
function talk(text)
{
var audios = document.createElement('audio');
audios.setAttribute('id','audio_speech');
var playlist = new Array()
if(text.length >= 75) {
playlist = text.split(".");
for (var i = 0;i<playlist.length;i++) {
if (playlist[i].length >= 75) {
auxarr = playlist[i].split(",");
//alert(auxarr.length);
for(var j=0;j<auxarr.length;j++) {
auxarr2 = auxarr[j].split(" ");
document.write(auxarr2+"<br>");
if (auxarr[j].length >= 75) {
auxarr2 = auxarr[j].split(" ");
for(var x=0; x < auxarr2.length; x++){
if(auxarr2[x].length < 50) {
aux = auxarr2[x];
while (aux.length < 50 && auxarr2[x+1]) {
aux = aux + " " + auxarr2[x+1];
auxarr2.splice(x,1);
}
auxarr2[x]=aux;
}
}
auxarr_end = auxarr.slice(j+1,auxarr.length);
auxarr_begin = auxarr.slice(0,j);
document.write("<br>"+auxarr+"<br> aca");
document.write("<br>"+auxarr_end+"<br> aca1");
document.write("<br>"+auxarr_begin+"<br> aca2");
auxarr.splice(j,1);
auxarr_begin = auxarr_begin.concat(auxarr2);
j = auxarr.length;
auxarr = auxarr_begin.concat(auxarr_end);
alert(auxarr);
}
}
//alert("current: "+playlist[i]);
//alert("current length:"+playlist[i].length);
//alert("auxarr: "+auxarr);
playlist_end = playlist.slice(i+1,playlist.length);
playlist_begin = playlist.slice(0, i);
playlist.splice(i,1);
playlist_begin = playlist_begin.concat(auxarr);
i = playlist.length;
playlist = playlist_begin.concat(playlist_end);
//alert("new "+playlist[i]);
}
}
/*do {
textAux = text.substring(0, 74);
text = text.substring(textAux.length, text.length);
playlist.push(textAux);
}while(text.length >= 75);*/
} else {
playlist.push(text);
}
//
//playlist.push(text);
/*for(var a=0; a<playlist.length;a++){
document.write(playlist[a]+"<br>");}*/
audios.setAttribute('src', 'http://translate.google.com/translate_tts?tl=es&q=' + encodeURIComponent(playlist[0]));
playlist.splice(0,1);
audios.load();
audios.play();
/*
*/
audios.addEventListener('ended', function(){
if (playlist[0]){
audios.setAttribute('src', 'http://translate.google.com/translate_tts?tl=es&q=' + encodeURIComponent(playlist[0]));
playlist.splice(0,1);
audios.play();
}
}, false);
}
</script>
Try this, modify it to work with your constants and parameters.
var LIMIT = 20;
var res = new Array()
//strats with spliting by dot
var dotArr = "This is a long sentence. and I will separate it into smaller parts. Lalala".split(/[.]/);
for (var i = 0; i < dotArr.length; i++) {
if (dotArr[i].length > LIMIT){
//only when have to, split by comma
var comArr = dotArr[i].split(/[,]/);
for (var j = 0; j < comArr.length; j++) {
//only when have to and that a space exists, split by space
if (comArr[j].length > LIMIT && comArr[j].indexOf(" ") != -1 ){
var spaceArr = comArr[j].split(/[ ]/);
//accomulate words until we reach the limit and then push the value to res
for (var k = 0; k < spaceArr.length;){
var sMerge = spaceArr[k++];
while (k < spaceArr.length && sMerge.length + spaceArr[k].length + 1 < LIMIT){
sMerge = sMerge + " " + spaceArr[k];
k++;
}
res.push(sMerge)
}
}else{
res.push(comArr[j]);
}
}
}else{
res.push(dotArr[i]);
}
}
//res contain all optimized sentences.
I made polygons editable in Google Maps and now I can change the shape, make holes in it, combine two of more polygons to multipolygons and disaggregate them again.
See http://maps.amsterdam.nl/testshape/beheer and read the Instructions in the Legenda to try it yourself.
One question I can't figure out is how to combine two overlapping polygons to one polygon with no overlap.
Something like this:
function(path1, path2) {
algorithm...
return newPath;
}
Thank you.
Thanks a lot for the lib suggestion. I used https://github.com/bjornharrtell/jsts/blob/master/examples/overlay.html with:
var union = a.union(b);
var difference = a.difference(b);
to combine shapes and to make holes in shapes or to clip shapes.
Therefor I had to convert the Google Maps paths to WKT and I wrote this Javascript:
function doeWKT(dePaths) {
var deWKTarray = [];
for (var i = 0; i < dePaths.length; i++) {
dePath = dePaths.getArray()[i].getArray();
var deKomma = "";
var deCoords = "";
for (var j = 0; j < dePath.length; j++) {
deLatLng = dePath[j];
if (j == 0) var deCoords0 = deKomma + deLatLng.lng().toFixed(6) + " " + deLatLng.lat().toFixed(6);
deCoords += deKomma + deLatLng.lng().toFixed(6) + " " + deLatLng.lat().toFixed(6);
deKomma = ",";
}
deWKTarray.push("(" + deCoords + "," + deCoords0 + ")");
}
var deHoles = [];
var deReader = new jsts.io.WKTReader();
for (var i = 0; i < deWKTarray.length; i++) {
var deHole = deReader.read("POLYGON("+deWKTarray[i]+")");
if (!deHoles[i]) deHoles[i] = -1;
for (var j =0; j < deWKTarray.length; j++) {
if ( i != j) {
var deContainer = deReader.read("POLYGON(" + deWKTarray[j] + ")");
if (deHole.within(deContainer)) deHoles[i] = j;
}
}
}
var deKomma = "";
var deWKTstring = "";
var deMulti = false;
for (var i = 0; i < deWKTarray.length; i++) {
if (deHoles[i] == -1) {
deWKTstring += deKomma + "(" + deWKTarray[i] + "";
if (i > 0) var deMulti = true;
}
for (var j = 0; j < deHoles.length; j++) {
if (deHoles[j] == i) deWKTstring += "," + deWKTarray[j] + "";
}
if (deHoles[i] == -1) deWKTstring += ")";
deKomma = ",";
}
if (deMulti) deWKTstring = "MULTIPOLYGON(" + deWKTstring +")";
else deWKTstring = "POLYGON" + deWKTstring;
return deWKTstring;
}
You can try/see everthing working in http://maps.amsterdam.nl/testshape/beheer (read Instructions in the Legend)