Trying to figure this out!

JavaScript
1

I’m still pretty new to javascript, not really in terms of information but rather in the sense of how i can apply the concept into real world problems. The initial start for my interest in javascript was to create animations and functionalities to my navigation bar. I want to play with the nav, just simply resizing it back and forth. I create this small project but its not working nor do i feel like i’m having the right set of mind in the script.

Javascript

window.onscroll = function isScrolling() {
    'use strict';
    //Test to see if its scrolling
    document.getElementsByClassName("navigation").style.height = 20;
    document.getElementsByTagName("a").style.fontSize = 12;
};

CSS

*{
    margin:0;
    padding:0;
}

.navigation{
    border:2px solid black;
    background-color:darkslategray;
}

.navigation ul{
}

.navigation ul li{
    text-align:center;
    padding:20px;
}

.navigation ul li a{
    text-decoration:none;
    font-size:50px;
    color:whitesmoke;
}

.navigation ul li a:hover{
    color:chartreuse;
}

p{
    font-size:24px;
    padding:20px;
    text-align:center;
    background-color:floralwhite;
}

HTML

<html>
    <head>
        <title>Navigation Resizing Project</title>
        <link rel="stylesheet" href="css/main_css.css" type="text/css">
    </head>
    <body>
        <nav class="navigation">
            <ul>
                <li><a href="#">Navigation Resizing</a></li>
            </ul>
        </nav>
        <div id="body_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam lorem, laoreet quis dolor ut, volutpat rhoncus quam. Pellentesque venenatis mattis nisl sed posuere. Duis eu ullamcorper magna, a congue arcu. Fusce turpis lorem, tempor nec sem ac, imperdiet consectetur nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium dignissim congue. Duis sed auctor sapien. Morbi quis nulla sit amet nulla convallis iaculis eu vitae libero. Donec sit amet faucibus mi.

Donec facilisis semper accumsan. Fusce rhoncus non arcu vel dapibus. Nulla imperdiet magna in vestibulum blandit. Praesent eleifend nisl ac congue mattis. Donec egestas vulputate nisi, ut hendrerit massa sodales vel. Vestibulum eu metus sit amet nibh cursus cursus. Nam porta nisl eget odio aliquam, quis ornare justo congue. Aliquam in erat id nisl malesuada laoreet. Etiam imperdiet ipsum id orci dignissim imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam lorem, laoreet quis dolor ut, volutpat rhoncus quam. Pellentesque venenatis mattis nisl sed posuere. Duis eu ullamcorper magna, a congue arcu. Fusce turpis lorem, tempor nec sem ac, imperdiet consectetur nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium dignissim congue. Duis sed auctor sapien. Morbi quis nulla sit amet nulla convallis iaculis eu vitae libero. Donec sit amet faucibus mi.

Donec facilisis semper accumsan. Fusce rhoncus non arcu vel dapibus. Nulla imperdiet magna in vestibulum blandit. Praesent eleifend nisl ac congue mattis. Donec egestas vulputate nisi, ut hendrerit massa sodales vel. Vestibulum eu metus sit amet nibh cursus cursus. Nam porta nisl eget odio aliquam, quis ornare justo congue. Aliquam in erat id nisl malesuada laoreet. Etiam imperdiet ipsum id orci dignissim imperdiet.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam lorem, laoreet quis dolor ut, volutpat rhoncus quam. Pellentesque venenatis mattis nisl sed posuere. Duis eu ullamcorper magna, a congue arcu. Fusce turpis lorem, tempor nec sem ac, imperdiet consectetur nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium dignissim congue. Duis sed auctor sapien. Morbi quis nulla sit amet nulla convallis iaculis eu vitae libero. Donec sit amet faucibus mi.

Donec facilisis semper accumsan. Fusce rhoncus non arcu vel dapibus. Nulla imperdiet magna in vestibulum blandit. Praesent eleifend nisl ac congue mattis. Donec egestas vulputate nisi, ut hendrerit massa sodales vel. Vestibulum eu metus sit amet nibh cursus cursus. Nam porta nisl eget odio aliquam, quis ornare justo congue. Aliquam in erat id nisl malesuada laoreet. Etiam imperdiet ipsum id orci dignissim imperdiet.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam lorem, laoreet quis dolor ut, volutpat rhoncus quam. Pellentesque venenatis mattis nisl sed posuere. Duis eu ullamcorper magna, a congue arcu. Fusce turpis lorem, tempor nec sem ac, imperdiet consectetur nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium dignissim congue. Duis sed auctor sapien. Morbi quis nulla sit amet nulla convallis iaculis eu vitae libero. Donec sit amet faucibus mi.

Donec facilisis semper accumsan. Fusce rhoncus non arcu vel dapibus. Nulla imperdiet magna in vestibulum blandit. Praesent eleifend nisl ac congue mattis. Donec egestas vulputate nisi, ut hendrerit massa sodales vel. Vestibulum eu metus sit amet nibh cursus cursus. Nam porta nisl eget odio aliquam, quis ornare justo congue. Aliquam in erat id nisl malesuada laoreet. Etiam imperdiet ipsum id orci dignissim imperdiet.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam lorem, laoreet quis dolor ut, volutpat rhoncus quam. Pellentesque venenatis mattis nisl sed posuere. Duis eu ullamcorper magna, a congue arcu. Fusce turpis lorem, tempor nec sem ac, imperdiet consectetur nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium dignissim congue. Duis sed auctor sapien. Morbi quis nulla sit amet nulla convallis iaculis eu vitae libero. Donec sit amet faucibus mi.

Donec facilisis semper accumsan. Fusce rhoncus non arcu vel dapibus. Nulla imperdiet magna in vestibulum blandit. Praesent eleifend nisl ac congue mattis. Donec egestas vulputate nisi, ut hendrerit massa sodales vel. Vestibulum eu metus sit amet nibh cursus cursus. Nam porta nisl eget odio aliquam, quis ornare justo congue. Aliquam in erat id nisl malesuada laoreet. Etiam imperdiet ipsum id orci dignissim imperdiet.

            </p>
        </div>
        <script src="js/main_js.js"></script>
    </body>
</html>

AM I MISSING SOMETHING VERY OBViouse?
The nav doesnt resize back or forward to any other value!

2

Yes - both getElementsByClassName and getElementsByTagName retrieve lists and your commands are trying to apply attributes to the whole list that are only allowed to be applied to individual nodes within the list.

To apply to the first node in each list you’d use:

document.getElementsByClassName("navigation")[0].style.height = 20;
 document.getElementsByTagName("a")[0].style.fontSize = 12;

To apply to all elements in the list you’d use:

[].forEach.call(document.getElementsByClassName("navigation"), function(el) {
el.style.height = 20;
});
[].forEach.call(document.getElementsByTagName("a"), function(el) {
el.style.fontSize = 12;
});
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.