So I decided to experiment with hiding / un-hiding the Utube video and Weather forecast on our website. Initially, I started by using some IF statements but that got a little messy so I decided to use a JavaScript switch statement instead. This is what I came up with:
Basically, the switch statement takes the variable ‘title’ and depending, on what its value is, executes some statements. This is so much cleaner than using a bunch of IF / ELSE statements.
If ‘title’ equals ‘Trails’ or ‘Events’ then specific things are preformed according to the code defined in the relevant section, otherwise, the default section is executed.
The only other thing I had to do to hide / un-hide the Utube video or Weather forecast was to define a CSS class of ‘hidden’ or ‘unhidden’ and place the action (hide / un-hide) in the proper section of the switch statement.
The only thing you need to decide is whether to use visibility: hidden or display: none. Visibility hidden hides the element but it still takes up space and display: none removes the element completely from the document. When un-hiding an element you can either use display: block or display: inline. Display block only allows one element of its kind to be displayed (starts a new paragraph). Display inline allows multiple elements to be displayed on one line. There are a few more display properties but I am not currently concerned with them.
This is a great idea! Thanks a lot for describing how you managed these things. I thing I have to play a bit with this :)
ReplyDeleteTerry,
ReplyDeleteGood use of the case statement, definitely much cleaner then a bunch conditional if statements. I might the end product looks quite nice.
I like how you used the Switch to do this. Normally I'd just assign the class directly to my elements, but when you have so much going on and so many different attributes that may differ for each element, I like your solution here. Neat idea!
ReplyDeleteNice post. As I'm learning of JavaScript this semester, it seems that the switch statement managed to keep your code more readable and less complicated for people with limited knowledge of this language. Keep it up!
ReplyDeleteTerry,
ReplyDeleteVery efficient scripting which lends itself to coding excellence, of which we are getting graded on. Incorporating the switch statement to modify the css document was a great addition.
Terry,
ReplyDeleteThis is good stuff. Thanks for sharing the code. I wonder if there are advantages such as performance advantages to using display:none versus visability:hidden. In any case, it's nice to know there are options. Thanks!
This seems like a great way to keep things organized and easily accessible. I will have to try this in my projects. Thanks for the insight.
ReplyDelete