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

JavaScript

Posted by Ryan Codes
Ryan Codes
14,888 Points

help with javascript

how do you create a javascript function that sets the navbar on the home page to transparent while the rest is set to #333333. i know this can be done through css but im pushing myself to learn more about js.

i used a code i found here on treehouse however it is set to random. my site is www.iamryanebro.com. thanks :)

Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points

Are you looking to make it transparent all the time or when events such as mouse hover occurs?

Ryan Codes
Ryan Codes
14,888 Points

hi Jeremy Woodbridge !i just want it to be transparent on the home page and black for the rest of the pages. i know it's just a few lines of code but i really dont know where to begin since im only starting with js.

Ryan Codes
Ryan Codes
14,888 Points

if you refresh the home page a couple of times the navbar sometimes goes black since the current script i have is set to random. and that's not what i was going for. heres the code i found 

//topbgcolor
    function ran_col() { //function name
        var color = '#'; // hexadecimal starting symbol
        var letters = ['','333333']; //Set your colors here
        color += letters[Math.floor(Math.random() * letters.length)];
        document.getElementById('top').style.background = color; // Setting the random color on your div element.
    }

3 Answers

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Ryan Codes,

If I'm understanding your situation correctly, you want the element with the ID of "top" to be transparent and every other element to have a background of #333333? There's a pretty easy way to do that. What we can do is use the universal selector from CSS (the * symbol) to select all of the elements on the page, set their background to #333 (shorthand of #333333) and then override that setting on the element with its own background color using the rgba() function, which allows you to set an opacity.

//Push all of the elements in the DOM into the allElements variable
var allElements = document.getElementsByTagName("*");
//Set the variable len to be the total number of elements in the variable allElements
//which means getting the length of the array we just created
len = allElements.length;
//Iterate over each element by using a for loop
//"i" will go from 0 to the length of the array which means going through every single element
for (var i = 0; i < len; i += 1) {
    //Get the current element
    var element = allElements[i];
    //Set the element's backgroundColor to #333333 or #333 shorthand
    element.style.backgroundColor = '#333';
}
//Override the setting of backgroundColor to a transparent color
//The color doesn't matter since we're setting it to completely transparent.
//The last value is the one we want and it can be from 0-1, with 0 being completely transparent
//And 1 being completely opaque
document.getElementById('top').style.backgroundColor = 'rgba(0,0,0,0)';

I hope that helps!

Ryan Codes
Ryan Codes
14,888 Points
Ryan Codes
Ryan Codes
14,888 Points

Hi Marcus Parsons, no not really.

i just want to make the changes on the "top" section only. i want it to be transparent on the home page then #333 for the about, blog, and contact page.

i want it transparent on the home page so it doesn't cut off the background image. and black for the other pages so that the "top" section can be seen because the rest of the pages have a white background. i would really appreciate your help

Marcus Parsons
Marcus Parsons
15,719 Points

Oh, well, that's super easy then. No JS required. All you need to do is link the stylesheet on all of those pages as you normally would. But you are going to add an inline style on your home page after you've linked to the main stylesheet so that the background-color rule will get overwritten on your home page. So, you would do something like this for your home page replacing mystyles.css with whatever your main css file is:

<link rel="stylesheet" href="mystyles.css" type="text/css">
<style type="text/css">
  #top  {
    background-color: rgba(0,0,0,0);
  }
</style>
Ryan Codes
Ryan Codes
14,888 Points
Ryan Codes
Ryan Codes
14,888 Points

Marcus Parsons i never really looked at it that way. i was so caught up with this js thing and forgot about inline styles. haha! thank u so much :)

Marcus Parsons
Marcus Parsons
15,719 Points

I know what you mean! If you love to program, JS is super exciting! But, we should try to limit how much JS handles CSS and HTML, because there are users who surf the web with JavaScript off. It's a safe bet to go by this rule unless you're making a pure JS application, in which case, have at it! You can see what I mean by taking a look at my calculator program which drives a lot of CSS to the page via JS.

If you are using JS for any important events on your page, I would what's called a <noscript> tag to the body of your page which will only render if they have JS disabled. It will warn the user that they should turn on JavaScript to get the full functionality of the site like this:

    <noscript>
        <h1 style="font-size: 2em; text-align: center; color: white;">This application requires JavaScript to be enabled in order to function properly.  Please re-enable JavaScript and then refresh the page.</h1>
    </noscript>