Updates to the Guitar Scales page / new web-coding tricks

I did a couple of cool things to improve the Guitar Scales page, and learned some tricks along the way. Whenever I’m searching for how to do things in html/css/php/javascript I always appreciate when people post advice, so I figure I should start paying that forward.

1. Scales are now printer-friendly, meaning that when you print off of the Guitar Scales page it no longer has a bunch of unnecessary buttons and links–just the scale, the name of the scale, and the scale degrees. Just go to the scale you want and push CTRL-P or Command-P. You should have the option to do it in landscape, which fits nicely, though is kinda huge.

As for the coding, the way you accomplish this is by including the following code into the CSS styles portion of the header:

@media print {
.noprint {
display:none;
}
}

And then you can just put

class=”noprint”

into any div, table, td, tr, img, just about anything you want to hide during printing. Put it inside the < > . Very simple.

 

2. I re-discovered the little PHP code to get the current year for putting into the copyright statement. It’s just

&copy; Your Name <?php echo date(“Y”); ?>

The &copy; is just the html code for the copyright symbol. The other part is the PHP for getting the current year. The only tricky thing to this is that your page has to have a .php file extension, not .htm or .html. But all you have to do is save your page with the new extension and it works just fine. You don’t have to call PHP earlier in the code or anything like that.

 

3. I added the Chromatic Scale. I don’t know why it didn’t occur to me until now to do that. So it now says “Chromatic Scale” at the top when you click the Show All button, or when you push down all of the scale degrees. The tricky part came when I realized I had to make it recognize every permutation of the Chromatic Scale a person could end up creating with my little system (of which there turned out to be 27). That’s just because of the whole #2/b3, #4/b5, #5/6b thing. Through this process I learned a little about Javascript functions. I assumed I would have to list a new else if statement for every condition, but as it turns out you can use || in between each condition to indicate “or”. Also && indicates “and”. For example, instead of

else if (x==5)
{
y=100;
}
else if (x==6)
{
y=100;
}
else if (x==7)
{
y=100;
}

you can just do

else if (x==5 || x==6 || x==7)
{
y=100;
}

Which might not seem like a big deal, but when you’re dealing with 27 conditions that all result in “Chromatic Scale” it’s pretty great. In retrospect I think I learned this in my high school Computer Science class. I’m pretty sure my brain is shrinking.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>