Javascript

[RLG95]

@ebeshero Can you tell me what is wrong with my javascript? https://github.com/BMT45/Ferdinand-Magellan-Project/blob/master/HTML/Web_HTML/docs.js

Only the first checkbox will work, and when I click it on it doesn't turn back off.

[ebeshero]

@RLG95 For several of your cases for toggling, there's a mismatch with your variable names that would definitely cause the JS not to work. Here's an example:

     case "placetoggle": {
            var place = document.getElementsByClassName("placeName");
            for (var i = 0; i < Writ.length; i++) {
                place[i].style.backgroundColor = "#C5E9FE"
            }
        };

Here, you've (properly) defined a variable named place (all the elements with an @class set to "placeName". But in your for-loop, you're referring to the wrong variable: for (var i = 0; i < Writ.length; i++) You don't have a variable named Writ. Your variable is named place. It looks to me as if ther eare multiple instances of this particular error in the following cases. If you correct them, does it solve the problem?

[ebeshero]

@RLG95 Okay, that won't totally solve the problem, because, as you noticed, your functions don't give you a way to toggle the color off. You'll want to change your strategy--and I suggest you apply my tutorial on the special classList toggle property (It's linked to JS Exercise 2 and it's here: http://dh.obdurodon.org/javascript/classListToggle.xhtml ). What happens with classList is it's kind of a "magic" property: that your JavaScript changes the @class value of its parent element when the visitor clicks on it. It doesn't change the color directly--it changes the @class value, from class="placeName" to class="placeName on". If the visitor clicks on the element again, the @class changes back again b/c that's what classList does.

So, how would you change colors? Pretty easy: You handle that entirely in your CSS. You write a CSS property for the class value when it contains the "on" like this (following my tutorial the whole way through):

span.placeName.on {color:#3333CC}
span.persName.on {color:#FF3300}
span.rank.on {color:#477519}

You can make those CSS color (or background-color) properties anything you like, or change the font or add a box, or whatever. It's a lot more versatile to handle that stuff in the CSS than to try to write it into the JavaScript where the code can get complicated quickly. So if you adapt my examples and explanation in the classList Toggle tutorial, I think you'll get the toggling to work. Hope that helps!

[RLG95]

Thank you! I got it working

[RLG95]

@ebeshero I have one more issue, I changed absolutely nothing about my CSS and all of the sudden it does not apply to my menu on my homepage but everywhere else?

[ebeshero]

@RLG95 When I look at one of your internal pages, where the menu is working, I see this CSS link line when I view the page source:

 <link rel="stylesheet" type="text/css" href="docs.css"/>

But when I look at your index page, I see this different CSS link line:

 <link rel="stylesheet" type="text/css" href="findex.css"/>

Is that the problem?

[RLG95]

I have a separate CSS for my index because of the side-by-side boxes, but the CSS for the top on both of the sheets is exactly the same. I didn't change anything except for adding a font-variant to one of my h1 elements and when I reuploaded the CSS to the server it stopped working.

[RLG95]

Also, my menu only doesn't show on my Treatise file? But it does everywhere else and I have the include virtual?

[ebeshero]

@RLG95 I’m taking a closer look now—sorry about the delay!

[ebeshero]

@RLG95 This morning your site, http://magellan.newtfire.org , gives me a permissions error so it’s not viewable. We had better take a look at the directory permissions.

[ebeshero]

@RLG95 I'm looking in at your files on the server (via FileZilla) and it looks like your index.html page has gone missing. All the other file permissions are set pretty much to read-only, but the missing index.html page is pretty serious. I'm going to try to patch that from your project GitHub repo in case you're not watching this now and other team members are worried. And I'll see if we can figure out these menu issues.

[ebeshero]

@RLG95 Okay, I've restored the missing index.html from your GitHub repo, and I'm guessing from your last git commit message that you might have deleted it accidentally from the server last night: It looks like you were removing an outdated CSS file (index.css) since you're now using findex.css. One thing I noticed is that index.html in your GitHub repo was using the old index.css line. I just fixed that, so the main page has its menu like the others. And, hooray! It looks like your CSS is working on index.html now, so that's some good progress.

Let's see if we can figure out what's going on with your treatise.html page now.

[ebeshero]

@RLG95 Be sure to do a git pull on this repo since I'm pushing some small repairs to files this morning.

[ebeshero]

@RLG95 Okay! Your SSI line on treatise.html had a white space before the #, so it wasn't picking up. I just removed that white space, and it seems to be working now: http://newtfire.org/magellan/travel/files/treatise.html

How are things looking from there?

[RLG95]

Sorry my laptop died last night while I waa uploading everything and I couldn't get everything up! The treatise page makes sense, I can't remember if I got to update the index.html on here so I will see later on if everything is fixed now!

[RLG95]

Thank you! Everything works just fine now!

[ebeshero]

Glad it's working! :-)