Jump to content

Fading div's with JS


swirlingDervish

Recommended Posts

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

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

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

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

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...