swirlingDervish Posted September 15, 2014 Share Posted September 15, 2014 Hello, All. Swirling noob here, and I'm trying to fade in and out a div that will load quotes from an array and I gotta admit, I'm a bit confused as to when, where and if to use an eventListener or window.setInterval or Timeout or what (sorry I don't know jQuery yet).... I can't get the animation to fully apply to each quoteRay entry and the syntax is kicking my butt: JS: /* Trying to load a quoteRay entry, apply color to the font, then read the CSS animationend trigger. */ function myQuotes (){ quoteRay = new Array; quoteRay[0]="quote #1" quoteRay[1]="quote #2" quoteRay[2]="quote #3" quoteClr = new Array; quoteClr["orange","purple","red"]; for (var i=0 && quoteRay!='undefined'; i<quoteRay.length; i++){ var anim1=document.getElementById("sayArry1"); var quotePick=quoteRay; anim1.innerHTML = quotePick; var qtClr=quoteClr; anim1.style.color = qtClr; anim1.addEventListener("webkitAnimationEnd", function(){ alert("Fin");}, false); } } CSS: div#sayArry1 { position:absolute; width:315px; height:250px; top:200px; left:400px; color: #000000; text-shadow: 1px 1px #a1a1a1; animation:fadeInOut 15s infinite; -webkit-animation:fadeInOut 15s infinite; /*Safari, Chrome*/ } @keyframes fadeInOut { 0% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} 100% {opacity:0.0;} } @-webkit-keyframes fadeInOut /* Safari and Chrome */ { 0% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} 100% {opacity:0.0;} } HTML: <body onLoad ="myQuotes();> <div id="sayArry1" style="width: 568px; height: 250px" >Free me...</div> It's not loading the other quotes, altho it is cycling through the array, nor is it waiting through animation time....aaaah! Help. Thank you. Link to comment Share on other sites More sharing options...
davej Posted September 16, 2014 Share Posted September 16, 2014 Are you looking at the browser error console? Your Javascript is full of errors and doesn't even seem to make sense. Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 16, 2014 Author Share Posted September 16, 2014 Thanks for your response, davej. I am learning to work with Chrome's debugger, which was a little unclear to me. I put my code through jsfiddle and, you're right, had to do some cleanup, although, having done that, I still have my "just showing the last quote" problem. JSFiddle indicates I shouldn't "make a function within a loop", pointing at my eventListener line. Is that a js best practice? So instead, should I do something like: <<anim1.style.animation = "fadeInOut 15s ease 1s 1";>> and then do a setInterval or Timeout?... Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 16, 2014 Author Share Posted September 16, 2014 Hi, davej and all....maybe a link would be helpful?.... http://www.kailashyog.org/soultour/KailashQuotes.htm Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 18, 2014 Author Share Posted September 18, 2014 Hoped maybe someone would respond, but anyways...I found part of my solution as I've managed to get my CSS fade animation to load through my quote array, but not the actual fading in and out of the animation: JS: function myQuotes (){ quoteRay = []; quoteRay[0]="quote1"; quoteRay[1]="quote2"; quoteRay[2]="quote3"; quoteRay[3]="quote4"; quoteRay[4]="quote5"; quoteClr = []; quoteClr = ["orange","purple","orange","pink","green","red","blue","brown","gold","purple"]; var anim1=document.getElementById("sayArry1"); var quotePick=quoteRay; anim1.innerHTML = quotePick; var qtClr=quoteClr; anim1.style.color = qtClr; anim1.style.animation = "fadeInOut 15s ease 1s 1"; i++; } var i = 0; var quoteUp = window.setInterval (function(){myQuotes()}, 15000); .................... and I can't seem to get an "if" conditional that works to check last entry of the quote array so as to loop again. I must say, w3chools' tutorial on setInterval is a little confusing, so I checked some others and JSFiddle, which clued me into making a function in a loop being not good JS - good to know. Anyways, I'm still working on trying to get the fade effect to work, any advice out there?... Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 18, 2014 Author Share Posted September 18, 2014 I'll update if I'm able to find a solution... Link to comment Share on other sites More sharing options...
justsomeguy Posted September 18, 2014 Share Posted September 18, 2014 I haven't used CSS animation much, it looks like there's a guide here:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationsToday, most people still use Javascript to do animation effects since CSS animation is still fairly experimental and not supported on older browsers, many people use jQuery or something similar so they don't have to write all of the animation code. One thing I'm wondering about is setting the animation property in that function. Since you keep setting it to the same value I don't think that's going to have any effect. That article might show a way to trigger the animation to happen again.As far as the check, you can check if i is greater than or equal to quoteRay.length, and set it back to 0 if so. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 18, 2014 Share Posted September 18, 2014 (edited) God this was a pain, have to use browser dependant javascript stying, think i prefer jquey as i know it would work in most browsers, even IE which is saying a lot <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document Title</title> <script type="text/JavaScript"> <!-- var Quote_step=0; function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); quoteRay = []; quoteRay[0]="Guilt, Fear <font face="Papyrus">&</font> Shame<br>are the base emotions...<br>Step out of them Boldly,<br>and Passionately Embrace your true Nature!"; quoteRay[1]="Guilt is society's joke on you!<br>Guilt is society's demand on you!<br>Guilt is society's control on you!<br>FREE FROM GUILT...<br>and You will Shine Through."; quoteRay[2]="Light Your Fear on Fire!<br>Then Dance with me in Sheer Ecstacy..."; quoteRay[3]="Love is needed...<br>Deep intimacy with pain is necessary...<br>to be set Free."; quoteRay[4]="Forgiveness is an Illusion!<br>Find out intead why "YOU" think you need to forgive..."; quoteRay[5]="PAIN - Anger - Joy - Ecstacy!<br>- DEVOUR ALL -<br>AND YOU WILL SEE..." ; quoteRay[6]="Worry is nothing<br>but ego's need to control.<br>Lose that,<br>Gain ALL"; quoteRay[7]="Dig Deep In The Dirt<br>Bathe in Disgust<br>Walk Away<br>Simply Pure" ; quoteRay[8]="A Copper Vessel<br>filled with water<br>Empty it<br>So the Universe can pour..."; quoteRay[9]="That, which you are missing, I will be<br>That, which you deny, I reflect<br>You may fall in love, you may despise<br>But you will Wake Up!"; <!--quoteRay[10]="Sweet <font face="Papyrus">&</font> Innocent..<br>I am Vegetarian<br>Alive <font face="Papyrus">&</font> Inspired!<br>I am Vegetarian<br>Sexy <font face="Papyrus">&</font> Bold!<br>I am Vegetarian<br>Loving <font face="Papyrus">&</font> Nurturing!<brI am Vegetarian><br>Fearless <font face="Papyrus">&</font> Awake!<brI am Vegetarian><br>Your Beginning,<br>Your End.<br>I am!";//--> quoteClr = []; quoteClr = ["orange","purple","orange","pink","green","red","blue","brown","gold","purple"]; function myQuotes (){ var anim1=document.getElementById("sayArry1"); var quotePick=quoteRay[Quote_step]; anim1.innerHTML = quotePick; var qtClr=quoteClr[Quote_step]; anim1.style.color = qtClr; anim1.style.animation = "fadeInOut 15s ease infinite"; anim1.style.WebkitAnimation = "fadeInOut 15s ease infinite";anim1.style.MozAnimation = "fadeInOut 15s ease infinite"; //} Quote_step++ if(Quote_step >=quoteRay.length-1) { Quote_step=0; } } // --> </script> <style type="text/css"> div#sayArry1 { position:absolute; width:315px; height:250px; top:200px; left:400px; color: #000000; text-shadow: 1px 1px #a1a1a1;/* Note these next 3 line are unnecessary as fadin is controled by js styling unless you insert first quote and styling manually*/ animation:fadeInOut 15s ease infinite; -webkit-animation:fadeInOut 15s ease infinite; /*Safari, Chrome*/ -moz-animation:fadeInOut 15s ease infinite; /*firefox*/ } @keyframes fadeInOut { 0%, 100% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} } @-webkit-keyframes fadeInOut /* Safari and Chrome */ { 0%, 100% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} } @-moz-keyframes fadeInOut /* firefox */ { 0%, 100% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} } </style> </head> <body> <div style="width: 568px; height: 250px;" id="sayArry1"></div> <script type="text/javaScript"> myQuotes(); // load first quote, prbably better to load in window.onload var quoteUp = window.setInterval (function(){myQuotes()}, 15000);// load rest in 15 sec interval </script> </body></html> Edited September 18, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 20, 2014 Author Share Posted September 20, 2014 dsonesuk, I'm humbled by your mighty effort! Thanks, as I'm definitely getting the message from a few coders, that jQuery be the cross-browser bomb! Hitting the tutes as soon as I can! Thanks so much again, I'm reviewing as we speak... Link to comment Share on other sites More sharing options...
swirlingDervish Posted September 20, 2014 Author Share Posted September 20, 2014 Hey, justsomeguy, thanks also for your mozilla link, very informative. Tried the "if" clause check of array length, but it didn't take....grrr....but I'll keep checking. Thanks for your input. Guess I'd better break down and do the jQuery dance.. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2014 Share Posted September 20, 2014 Tried the "if" clause check of array length this is what this does from last post Quote_step++ if(Quote_step >=quoteRay.length-1) { Quote_step=0; } remember the quote array index starts at 0, so you have to allow for this in if condition Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now