Jump to content

tytbone

Members
 View Profile  See their activity

  • Posts

    13

  • Joined

  • Last visited

tytbone's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. tytbone
    EDIT2: Solved it - http://www.webdeveloper.com/forum/showthread.php?298019-newbie-trying-to-use-animo-js-to-quot-stagger-quot-animations-make-images-appear&p=1346067#post1346067 EDIT: I tried explaining the issue here, too - http://www.webdeveloper.com/forum/showthread.php?298019-newbie-trying-to-use-animo-js-to-quot-stagger-quot-animations-make-images-appear - and included a GIF of the issue - http://i.imgur.com/yyv3Fg7.gif I discovered http://labs.bigroomstudios.com/libraries/animo-js which seems to be a pretty cool animation library. I'm able to animate two images, one right after the other, both using "bounceInDown", but what I am trying to accomplish is not having the second image visible until it's animation occurs. (So it looks like both drop down from above the visible window) Right now, while the first image animates, the second one stays static until it's div is called to be animated, then it disappears and falls back down to its original spot. (The same issue actually occurs with the animo.js example, Bounce in left followed by Bounce in right, in the link provided above.) Should I try to make use of a Timing Event to keep the second image "invisible" until its animation occurs so it too looks like it simply falls down like the first image, or perhaps instead of nesting the second function have it separate but only run once the first animation is done? Any ideas from the pros here? Thanks as always. HTML: <head> <script src="jquery-2.1.1.js"></script> <script src="animo/animo.js" type="text/javascript"></script> <script src="portfolio-animo.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="animo/animate+animo.css"> <link rel="stylesheet" type="text/css" href="style.css"></head><body><img id="cheese4" src="images/cheese.jpg"><img id="cheese5" src="images/cheese.jpg"></body> CSS: #cheese4 { display: block; margin-left: 25%; margin-right: 50%;}#cheese5{ display:block; margin-left: 50%; margin-right: 75%;} Javascript (that calls the functions/animations): $(document).ready(function() { $('#cheese4').animo( {animation: 'bounceInDown', duration:1}, function() { $('#cheese5').animo( {animation: 'bounceInDown', duration:1}); });});
  2. tytbone
    Apologies for never writing back. I thought a closure was necessary because that was the answer to a similar problem that was solved here; I assumed I needed one for the issue I was having.
  3. tytbone
    Thanks, I think I understand it a little more, at least. Despite dabbling in programming the past few years I still have difficulties understanding, and unfortunately won't realize things that are obvious to the pros. I was able to solve my problem simply by adding a "+" to the "txt = myPeople...", for 'txt += myPeople.firstName + " " + myPeople.lastName + "<br/>";' Thanks, I just now solved my problem, actually. What I was hoping to accomplish I did write above: "I'm trying to get the text to print out each person's first + last name, each on its own line. Problem is I assume a common one: I only get the last array item to actually appear as output." I thought a closure was necessary because that was the answer to a similar problem here. But in any case, my problem is solved. I appreciate the help, though.
  4. tytbone
    I'm having some difficulty understanding how I can use closures, such as here: http://jsfiddle.net/gogfan/Yv5zP/1/ I'm trying to get the text to print out each person's first + last name, each on its own line. Problem is I assume a common one: I only get the last array item to actually appear as output. I tried creating a closure like mentioned here, but I can't seem to get it to work correctly. Help would be appreciated, naturally. <body><p id="demo"></p><script>var txt = "";function person(first, last) { this.firstName = first; this.lastName = last;}var myFather = new person("John", "Doe");var myMother = new person("Sally", "Rally");myPeople = [myFather, myMother];for (var i = 0; i < myPeople.length; i++) { (function(i) { txt = myPeople[i].firstName + " " + myPeople[i].lastName + "<br/>"; document.getElementById("demo").innerHTML = txt; })(i);}</script></body>
  5. tytbone
    I like what I have and it seems to work, but I'm wondering if there's a better way to handle this. I have two arrays, one for the verbs and one for the nouns, and they are being handled seperately in the same function (basically a copy-paste of Hadien provided). Is there a better way to handle this? I felt like the verb and the noun needed to be handled and checked seperately which is why they have their own id's, but maybe there's a way to simplify. Thanks preemptively. <body> <p>Looks like I chose the wrong week to quit <span id="verb"></span> <span id="noun"></span>.</p> <button onclick="fromLists()">Change</button> <script> var verbs = ["kicking", "chewing", "annoying", "hurting", "breathing"]; var nouns = ["babies", "Steve Erkel", "Norway", "linguine", "toothpaste"]; function fromLists() { var verb = verbs[Math.floor(Math.random()*verbs.length)]; var noun = nouns[Math.floor(Math.random()*nouns.length)]; var spanVerb = document.getElementById("verb"); var spanNoun = document.getElementById("noun"); if (verb === spanVerb.innerHTML || noun === spanNoun.innerHTML) { return fromLists(); } spanVerb.innerHTML = verb; spanNoun.innerHTML = noun; } </script></body>
  6. tytbone
    Thanks, I didn't think about rounding up to 5. I may use Math.floor like you suggested.
  7. tytbone
    Thanks, as I wrote in the post I'm a newbie, and have difficulties understanding programming in general. I assumed a for loop would be needed to search through all the index items. So length doesn't start at 0, I presume, which is why the -1 is needed. And "return" has the ability to "restart" the function if necessary? "Return" to a specific point. I'll test the code out in a few hours; again, thanks.
  8. tytbone
    Ah, thank you, I missed a bracket. Unfortunately the generator still isn't working how I would like it to. I'm getting an occasional "undefined" and it appears sometimes the same word will appear twice in a row, as sometimes the word won't change even when the button is pressed. Any idea what changes should be made to fix this? Do I need to implement the "i" from the for loop into the code? Should there be more than one function, and if so should I implement a "return" statement to help with comparing?
  9. tytbone
    I decided to try to make a random phrase generator based around the "Looks like I picked the wrong week..." quote from Airplane! (I'm just testing it with one word at first.) I'm trying to ensure that the next phrase will be different than the last, and I thought I could do that by storing the index item in a seperate var and comparing that var to the current index item the next time the button is pressed. Currently however I cannot get any text to generate. I'm assuming there's something wrong with my logic or I missed something really obvious; help would be appreciated. <body> <p>Looks like I chose the wrong week to quit <span id="generate"></span></p> <button onclick="fromLists()">Change</button> <script> var verbs = ["kicking.", "chewing.", "annoying.", "hurting.", "breathing."]; var verbCurr; var verbPrev; function fromLists() { for (i = 0; i<verbs.length; ++i) { verbCurr = verbs[Math.round(Math.random()*verbs.length)]; if (verbCurr === verbPrev) { verbCurr = verbs[Math.round(Math.random()*verbs.length)]; } else { document.getElementById("generate").innerHTML = verbCurr; verbPrev = verbCurr; } } </script> </body> http://jsfiddle.net/gogfan/CbLXC/8/
  10. tytbone
    That worked, thanks! The placement of "document.getElementById("boo").innerHTML = found;" outside of the "if" statement must have been important (so it can change between true or false), as well as handling the "var" within the function.
  11. tytbone
    Thanks, that got me further by showing which index numbers were or were not apple - "falsefalsetruefalse". However, what I was really going for was having the function check the entirety of the array and return "true" if it contains "Apple" at any index, or false if not anywhere in the array. Using "indexOf" is also closer to what I want; it will compare an object to an index and will ring true or false depending on the index number. function myFunction() { for (var index = 0; index < fruits.length; index++) { if (fruits.indexOf("Apple") == 5) { document.getElementById("boo").innerHTML = "true"; } else { document.getElementById("boo").innerHTML = "false"; } } document.getElementById("demo").innerHTML = fruits;} Now I'd like to understand if I can just cycle through an array and have it write "true" if "Apple" is within the array. Thanks again in advance. EDIT: Okay, I can get myFunction to post "true" or blank. It appears the "false" line is causing it to mess up; if the "false" line is included everything returns "false" except the last item in the array (or so it seems). function myFunction() { for (var i = 0; i < fruits.length; i++) { if (fruits[i] === "Orange") { document.getElementById("boo").innerHTML = "true"; } }} function myFunction() { for (var i = 0; i < fruits.length; i++) { if (fruits[i] === "Apple") { document.getElementById("boo").innerHTML = "true"; } else if (fruits[i] !== "Apple") { document.getElementById("boo").innerHTML = "false"; } }}
  12. tytbone
    Thanks, that worked! If you find the time, could you help me out again? I'm having more trouble understanding what I'm doing wrong. "boo" keeps coming up as "false" even though "Apple" is part of the array. The only index that comes up as "true" is "Mango". Can you or anyone else explain why this is, and what I am doing wrong? Maybe I missed something obvious. <body><button onclick="myFunction()">Try it</button><p id="demo"></p><p id="boo"></p><script>var click = 0;var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() { for (var index = 0; index < fruits.length; index++) { if (fruits[index] === "Apple") { document.getElementById("boo").innerHTML = "true"; } else { document.getElementById("boo").innerHTML = "false"; } } document.getElementById("demo").innerHTML = fruits;}</script></body>
  13. tytbone
    I am experimenting with code in the Tryit Editor and JSFiddle, based on reading "Javascript Arrays" and some info I found online. I'm trying to allow the code to recognize when "Kiwi" is added to the array, and allow the text "true" to appear. However, the code does not work. It does work if MyFunction2 is searching for the nonexistance of "Kiwi", ie "!==" instead of "===". Does the problem have something to do with JS not recognizing changes in real time (or whatever the appropriate term is)? Anyway, help would be appreciated. Thanks in advance. <!DOCTYPE html><html><body><p>The length property provides an easy way to append new elements to an array without using the push() method.</p><button onclick="myFunction()">Try it</button><button onclick="myFunction2()">See if it's true or not</button><p id="demo"></p><p id="boolean"></p><script>var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;function myFunction() { fruits[fruits.length] = "Kiwi"; document.getElementById("demo").innerHTML = fruits;}function myFunction2() {for (index=0; index<fruits.length; ++index) {if (fruits[index].contains === "Kiwi") {document.getElementById("boolean").innerHTML = "true";}}}</script></body></html> http://jsfiddle.net/nu2h4/
×
×
  • Create New...