Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jackson Monk
Jackson Monk
4,527 Points

Why did this animation stop working?

I've been working on creating a website, and I recently finished the first page. On this page, I have an hr/ element that is hidden, but reveals itself and extends when you scoll over it, thanks to jQuery. There was no problem at all with it until I finished the first page. Shortly after starting on the second page, I went back to the first one and noticed that that animation and just the whole div was unresponsive to any event, including the a element linking to the second page. I have repeatedly looked at this, but cannot locate the issue. Can anyone tell me what's wrong? (It's a lot of code)

<!DOCTYPE html>
<html>
    <head>
        <title>Penitentiary | Official Band Website</title>
        <style>
body {
        min-width: 1345px;
        min-height: 3005px;
        font-family: Impact, fantasy;
        }

.home {
    position: absolute;
    padding: 15px;
    left: 500px;
    top: 0;
    font-size: 15px;
    border-radius: 5px;
    background-color: transparent;
    border: 0;
    color: black;
}
.about {
    position: absolute;
    padding: 15px;
    left: 571px;
    top: 0;
    font-size: 15px;
    border-radius: 5px;
    background-color: transparent;
    border: 0;
    color: black; 
}
.instruments {
    position: absolute;
    padding: 15px;
    left: 641px;
    top: 0;
    font-size: 15px;
    border-radius: 5px;
    background-color: transparent;
    border: 0;
    color: black; 
}
.meet {
    position: absolute;
    padding: 15px;
    right: 470px;
    top: 0;
    font-size: 15px;
    border-radius: 5px;
    border-left: -10px;
    background-color: transparent;
    border: 0;
    color: black; 
}
.decal {
    position: absolute;
    z-index: -1;
    width: 1345px;
    height: 80%;
    top: 0px;
    left: 5px;
    right: 5px;
    border-radius: 10px;
    filter: opacity(35%);
}
.title {
    position: absolute;
    top: 210px;
    left: 539px;
    font-size: 50px;
}
.line {
    position: absolute;
    padding: 8px;
    bottom: 30px;
    left: 115px;
    right: 100px;
    border-radius: 20px;
    background-color: darkgray;
    border-color: transparent;
}
.def {
    position: absolute;
    bottom: -250px;
    font-size: 20px;
    left: 400px;
}
.un {
   position: absolute;
   padding: 0.5px;
   background-color: white;
   border-color: transparent;
   border-radius: 10px;
   width: 0.1px;
   top: 25px;
   left: 525px;
   z-index: 1;
}
.snip {
   position: absolute;
   padding: 70px;
   width: 400px;
   min-width: 400px;
   min-height: 200px;
   border-radius: 20px;
   bottom: -725px;
   left: 410px;
   background-color: black;
   color: white;
   z-index: -1;
}
.line2 {
   position: absolute;
   padding: 8px;
   left: 100px;
   right: 100px;
   bottom: -325px;
   border-radius: 20px;
   background-color: darkgray;
   border-color: transparent;
}
.position {
   font-size: 20px;
}
.line3 {
   position: absolute;
   padding: 1.5px;
   left: 70px;
   bottom: 190px;
   background-color: white;
   border-color: transparent;
   border-radius: 10px;
   width: 0.1px;
   color: white;
   z-index: 2;
}
.line4 {
   position: absolute;
   padding: 8px;
   left: 100px;
   right: 100px;
   bottom: -800px;
   border-radius: 20px;
   background-color: darkgray;
   border-color: transparent;
}
.new {
   position: absolute;
   text-align: center;
   bottom: -950px;
   left: 445px;
   font-size: 20px;
}
.video1 {
   position: absolute;
   bottom: -1150px;
   left: 175px;
   border-radius: 10px;
}
.video2 {
   position: absolute;
   bottom: -1150px;
   left: 525px;
   border-radius: 10px;
}
.video3 {
   position: absolute;
   bottom: -1150px;
   left: 875px;
   border-radius: 10px;
}
.video4 {
   position: absolute;
   bottom: -1350px;
   left: 350px;
   border-radius: 10px;
}
.video5 {
   position: absolute;
   bottom: -1350px;
   left: 700px;
   border-radius: 10px;
}
.video1t {
   position: absolute;
   bottom: -1200px;
   left: 240px;
}
.video2t {
   position: absolute;
   bottom: -1200px;
   left: 510px;
}
.video3t {
   position: absolute;
   bottom: -1200px;
   left: 910px;
}
.video4t {
   position: absolute;
   bottom: -1400px;
   left: 352px;
}
.video5t {
   position: absolute;
   bottom: -1400px;
   left: 685px;
}
.line5 {
   position: absolute;
   padding: 8px;
   left: 100px;
   right: 100px;
   bottom: -1450px;
   border-radius: 20px;
   background-color: darkgray;
   border-color: transparent;
}
.headlines {
   position: absolute;
   bottom: -1875px;
   left: 295px;
   font-size: 20px;
   text-align: center;  
}
.line6 {
   padding: 4px;
   background-color: black;
   border-color: transparent;
   border-radius: 10px;
}
.line7 {
   position: absolute;
   padding: 8px;
   bottom: -1925px;
   left: 100px;
   right: 100px;
   background-color: darkgray;
   border-color: transparent;
   border-radius: 20px;
}
.tutorials {
   position: absolute;
   bottom: -2075px;
   left: 260px;
   text-align: center;
   font-size: 20px;
}
.tutorial1 {
   position: absolute;
   bottom: -2275px;
   left: 175px;
   border-radius: 10px;
}
.tutorial2 {
   position: absolute;
   bottom: -2275px;
   left: 525px;
   border-radius: 10px;
}
.tutorial3 {
   position: absolute;
   bottom: -2275px;
   left: 875px;
   border-radius: 10px;
}
.line8 {
   position: absolute;
   padding: 8px;
   bottom: -2350px;
   left: 100px;
   right: 100px;
   background-color: darkgray;
   border-color: transparent;
   border-radius: 20px;
}
.other {
   position: absolute;
   bottom: -2750px;
   left: 430px;
   font-size: 20px;
   text-align: center;
}
.footer {
   position: absolute;
   padding: 40px;
   bottom: -2975px;
   left: 0;
   right: 0;
   background-color: black;
   border-color: transparent;
   border-radius: 10px;
   text-align: center;
   color: darkgray;
}

a {
   color: darkgray;
}

        </style>
    </head>
    <body>
    <div>
            <button class = home>Home</button>
            <hr/ class = un>
            <button class = about>About</button>
            <button class = instruments>Instruments</button>
            <button class = meet>Meet The Band</button>
        </div>
        <img class = decal src =  https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Vd3bj2jPe/videoblocks-rock-guitar-player-playing-music-close-up-of-man-playing-electric-guitar-rock-playing-guitar-music-male-hand-playing-guitar-electric-music-guitarist-play-rock-music_rrmayrnw_thumbnail-full01.png>
        <h1 class = title align = center>PENITENTIARY</h1>
        <hr/ class = line>
        <div class = def align = center>
        <h1>pen·i·ten·tia·ry</h1>
        <h2>ˌpenəˈten(t)SH(ə)rē//</h2>
        <h5>noun</h5>
        <ol>
        <li>A prison for people convicted of serious crimes.</li>
        <li>The name of a kick-ass rock band who this website is about!</li>
        </ol>
        </div>
        <hr/ class = line2>
        <div class = snip>
        <div class = position>
        <h2>Penitentiary</h2>
        <hr/ class = line3>
        <p>Penitentiary is a startup rock band with plenty of skill, talent, and rock and roll spirit. <a href = file:///C:/Users/monkj/Documents/Notepad%20Codes/Penitentiary%20Website/About.html>Learn more</a></p>
        </div>
        </div>
        <hr/ class = line4>
        <div class = new>
        <h1>Recent Activity</h1>
        <h3>Check out some of Penitentiary's latest projects</h3>
        </div>
        <iframe src = https://youtube.com/embed/WM8bTdBs-cw class = video1></iframe>
        <iframe src = https://www.youtube.com/embed/0jgrCKhxE1s class = video2></iframe>
        <iframe src = https://www.youtube.com/embed/6M4_Ommfvv0 class = video3></iframe>
        <iframe src = https://www.youtube.com/embed/X_MpAAzKg9Y class = video4></iframe>
        <iframe src = https://www.youtube.com/embed/ByUg-69l464 class = video5></iframe>
        <div>
        <h4 align = center class = video1t>Metallica - One (Cover)</h4>
        <h4 align = center class = video2t>DragonForce - Through The Fire And Flames (Cover)</h4>
        <h4 align = center class = video3t>Van Halen - Hot For Teacher (Cover)</h4>
        <h4 align = center class = video4t>Metallica - Ride The Lightning (Guitar Cover)</h4>
        <h4 align = center class = video5t>Guns 'N Roses - Welcome To The Jungle (Drum Cover)</h4>
        </div>
        <hr/ class = line5>
        <div class = headlines>
        <h1>News</h1>
        <h3>Check out current news regarding Penitentiary and the rest of the rock world</h3>
        <hr/ class = line6>
        <h2><a href = http://loudwire.com/slayer-announce-farewell-tour-dates/>Slayer Announces Farewell Tour</a></h2>
        <h2><a href = https://en.mediamass.net/people/kirk-hammett/retirement.html>Metallica's Kirk Hammett Thinking of Retiring</a></h2>
        <h2><a href = https://www.gunsnroses.com/news>Guns 'N Roses Not Ready to Give Up Yet</a></h2>
        <h2><a href = https://www.megadeth.com/news>Megadeth Celebrating Its 35th Anniversary</a></h2>      
        </div>
        <hr/ class = line7>
        <div class = tutorials>
        <h1>Tutorials</h1>
        <h3>Learn simple instrumental lessons for these classic songs Penitentiary does so well</h3>
        </div>
        <iframe src = https://www.youtube.com/embed/gc6QQy17zzI class = tutorial1></iframe>
        <iframe src = https://www.youtube.com/embed/3pe0Deyhc5M class = tutorial2></iframe>
        <iframe src = https://www.youtube.com/embed/I-3-esh4B6E class = tutorial3></iframe>
        <hr/ class = line8>
        <div class = other>
        <h1>Other bands like Penitentiary</h1>
        <h3>Here are some bands similar to Penitentiary:</h3>
        <h2><a href = http://theamazons.co.uk/>The Amazons</a></h2>
        <h2><a href = http://www.bigthief.net/>Big Thief</a></h2>
        <h2><a href = http://www.championlover.ca/>Champion Lover</a></h2>
        <h2><a href = https://paperhaus.bandcamp.com/>Paperhaus</a></h2>
        </div>
        <footer class = footer>
        <div class = foot-text>
        <p>
        Follow Us On:
        </p>
        <img height = "20" width = "20" src = http://www.stickpng.com/assets/images/584ac2d03ac3a570f94a666d.png>
        <img height = "20" width = "20" src = https://www.shareicon.net/download/2015/09/16/102081_twitter_512x512.png>
        <img height = "20" width = "20" src = https://instagram-brand.com/wp-content/themes/ig-branding/assets/images/ig-logo-email.png>
        <img height = "20" width = "20" src = https://thecedaliusgroup.com/wp-content/uploads/2014/11/LinkedIn-InBug-2CRev.png>
        </div>
        </footer>
        <script src = jQuery.js></script>
        <script>
        window.onload = function() {

        let buttons = document.getElementsByTagName('button');
        let underline = document.getElementsByTagName('hr');
        let homePage = window.location.pathname;

        underline[0].style.display = 'none';
        $('.line3').hide();

        buttons[0].addEventListener('click', () => {
          window.location.assign("Penitentiary.html");
        });

        for (let a = 0; a < buttons.length; a ++) {

        buttons[a].addEventListener('mouseover', () => {
        buttons[a].style.backgroundColor = 'black';
        buttons[a].style.color = 'white';

        if (a === 0) {
        $('.un').animate({width: '20px'}).show();
        }
        });

        buttons[a].addEventListener('mouseout', () => {
        buttons[a].style.backgroundColor = 'transparent';
        buttons[a].style.color = 'black';

        if (a === 0) {
        $('.un').animate({width: '0.1px'}).hide();
        }
        });
        }
        $('.snip').mouseover(function() {
        $('.line3').animate({width: '180px'}).show();
        });
        $('.snip').mouseout(function() {
        $('.line3').animate({width: '0.1px'}).hide();
        });

        buttons[1].addEventListener('click', () => {

          window.location.assign("file:///C:/Users/monkj/Documents/Notepad%20Codes/Penitentiary%20Website/About.html");
        });
        buttons[2].addEventListener('click', () => {

          window.location.assign("Instruments.html");
        });
        buttons[3].addEventListener('click', () => {

          window.location.assign("Meet.html");
        });
        };
        </script>
    </body>
</html>

3 Answers

Matthew Lang
Matthew Lang
13,483 Points
Matthew Lang
Matthew Lang
13,483 Points

Shouldn't it be <hr class="class-name-here"/> not <hr/ class="class-name-here">

Jackson Monk
Jackson Monk
4,527 Points
Jackson Monk
Jackson Monk
4,527 Points

I've tried it both ways, either way it works. Like I said, it only stopped animating once I started on the second page. Does jQuery only work with one file at a time?

Matthew Lang
Matthew Lang
13,483 Points
Matthew Lang
Matthew Lang
13,483 Points

Make sure you have your <script> tags including your jQuery and custom JavaScript included on the second page, also.

Jackson Monk
Jackson Monk
4,527 Points
Jackson Monk
Jackson Monk
4,527 Points

I have script tags in both the files, and I know for a fact it works in the first page, because I have another jQuery animation on that page that works just fine. It's just that one for some odd reason.