CSS and JavaScript Animation not Applying to all Sections

Question

I have a css animation being controlled by some javascript code but the animation is not applying to all sections that its assigned to. I have a list formed out of divs but the animation only effects the first one. any idea on how to make it apply to all section with the same id, in this case "Download"?

Here is the code:

<script language="javascript">
    window.onload = function() {
    var btn = document.getElementById("download");
    btn.addEventListener("click", function(e) {
    this.className = "animated";
});

btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
btn.addEventListener("oanimationend", fadeOutUpEnd, false);
btn.addEventListener("animationend", fadeOutUpEnd, false);
}

function fadeOutUpEnd(e) {
    e.currentTarget.className = "";
}
</script>

Heres is the CSS animation:

.animated { 

}
.animated {
-webkit-animation:fadeOutUp 1s;
-moz-animation:fadeOutUp 1s;
-o-animation:fadeOutUp 1s;
-ms-animation:fadeOutUp 1s;
animation:fadeOutUp 1s;
}

@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}

100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}

100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}

100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(-20px);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

And here is the HTML:

<div class="list_block">
        <!-- ******** Block Logo ******** -->  
            <section id="section_1">
                    <img name="SLogo" src="images/ASC.jpg" width="100%" height="100%" alt="" />
            </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        Advanced SystemCare
                    </section>
                <section id="description">
                        Advanced SystemCare 6 Free takes a one-click approach to protect, repair, clean, and optimize your PC. It's easy to use and 100% safe with no adware, spyware, or viruses.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        6.2.0
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l-m.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ASC.zip">
                    <section id="download" title="Download ASC">
                        Download
                    </section>
                </a>
                 <br />
                    <a href="http://www.iobit.com/advancedsystemcareper.php#none">
                        <section id="visit" title="Visit the ASC Website">
                            Visit Site
                        </section>
                    </a>
                </section>
          </div>
         <br />




            <div class="list_block">
            <!-- ******** Block Logo ******** -->  
                <section id="section_1">
                    <img name="SLogo" src="images/ATFCleaner.jpg" width="100%" height="100%" alt="" />
                </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        ATF Cleaner
                    </section>
                <section id="description">
                        ATF Cleaner will clean out your temp folder in a quick and safe manor. Recommended for Windows XP but has had success with Vista and 7.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        3.0.0.2
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ATFCleaner.exe">
                        <section id="download" title="Download ATF-Cleaner">
                            Download
                        </section>
                    </a>
                 <br />
                    <a href="http://www.atribune.org/?option=com_content&task=view&id=25&Itemid=25">
                        <section id="visit" title="Visit the ATF-Cleaner Website">
                            Visit Site
                        </section>
                    </a>
                </section>
            </div>
         <br />

Where is the Java? And, you cannot give the same ID to multiple elements, that's why it's called ID. However, you can make use of ``class`` attributes instead. — qqilihq, Aug 15 '13 at 20:07
I'm completely new to javascript so I'm now sure how I would make a class attribute and make it work with the java script? — Tyharo, Aug 15 '13 at 20:19

score 0 · Answer 1 · edited May 23 '17 at 11:56

I was thinking at first of recommending the use document.getElementsByClassName instead of document.getElementById, since getElementById returns a single element based on the ID.

You should not have multiple elements with the same ID (see: here), as an ID is supposed to identify the element, hence required to be unique.

getElementsByClassName on the other hand would return an array, which you would need to iterate.

In your case, this method would not be helpful, as you want to specify a class name to the returned elements, and if you could set the specific class name ahead of time, no need to perform the JavaScript operation on these elements.

However, all these elements are SECTION tags, so you could use document.getElementsByTagName.

In HTML - Set the id of each element to be suffixed by a counter, so they are all unique (if page is dynamically generated by server code, server code should be changed).

Then you can iterate the resulting array in JavaScript - checking the id prefix for 'download'. If true, set the class name to 'animated'.

window.onload = function() {
    var sections = document.getElementsByTagName("section");
    for(i in sections)
    {
        var btn = sections[i];
        if (btn && btn.getAttribute)
        {
            var id = btn.getAttribute('id');
            if (null != id && 0 == id.indexOf("download"))
            {
                btn.addEventListener("mouseOver", function(e) { this.className = "animated"; });
                btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
                btn.addEventListener("oanimationend", fadeOutUpEnd, false);
                btn.addEventListener("animationend", fadeOutUpEnd, false);
            }
        }
    }
};

Thanks for the response, Im kind of understanding what your telling me but I can really follow the javascript part of it. So I would need to create a class and apply it to each section then change the document.getekementsbyid to document.getelementsbyclassname("*class*"); ? — Tyharo, Aug 15 '13 at 20:49
I have edited my answer with a JavaScript code snippet that illustrates my answer. Just change the "download" id's to be unique: e.g. "download1", "download2", ... "downloadN" — avri, Aug 22 '13 at 20:23

CSS and JavaScript Animation not Applying to all Sections

1 Answers1