Deguize
Preface;
This is a tutorial series where I will focus more on understanding what the heck is going on, and less on copy/paste. Over the years I’ve seen a tendancy for people to put in huge chunks of code, and expecting readers to blatantly copy paste to get some kind of result. Some credit whould be given to those who explain their code afterwards, however I for one do not believe that is a style that suits everyone. Therefore these tutorials will focus on understanding the concepts, and why the code works.
This is my first tutorial series, please give lots of feedback, positive or negative (I enjoy both) so that I can improve the subsequent tutorials.
Concept
We are going to start off with something simple yet very popular. Hiding an object.
Let’s think for a second, what is required to hide an object on a webpage? You could;
* put another element in front (other element must be same size even if the size increases over time = more complicated)
* position it outside the browser view (might mess up other elements, depending on positions = more complicated)
* hide it through CSS
* make the opacity 0 (element will still occupy space, less browser independent & more resource demanding)
Depending on the situation, the solution might differ, but in our case we will focus on making it vanish from the view with the least amount of work and leaving no space behind. Thus the CSS approach is the best choice.
Now hiding an element at page load is easy with CSS, we just need to set the display attribute to none.
h{
display = none;
}
This will hide any element from the browser when the page load. The challenge is to make it work dynamically, so that we can change it on the push of a button.
Since we know that to hide it we have to change the CSS, the concept is simple, when we click the button, the CSS attribute display of some element must be altered to none.
The Javascript code for changing a CSS attribute is;
*some element*.style.*attribute* = "*value*";
Using what we already know we can fill out attribute and value;
*some element*.style.display = "none";
However, how do we get the element? Usually we know the ID of some element, eg. a Div with ID: container
<div id="container">I'm a container guys!</div>
The question is, how can we translate the ID of the div into a reference to the div element? The ID is just a name, just like your name is only used to identify you, you are not your name.
document.getElementById('container');
This function will get the element that has the ID container. It is a standard javascript function that is very handy.
Now that we can convert the ID to a reference to the element, we can change the style of it!
var our_element = document.getElementById('container');
our_element.style.display = "none";
Thats it! Now we can change the CSS of the element! So by using the ID of an element we can hide it with javascript.
That’s all good, but what happened to the button? How can we make this happen when we click a button?
Well, HTML tags support the onClick attribute;
<input type='button' value='I am a button' onClick="*do something*">
We want to hide the element, when we click the button, so onClick should call the javascript code we had earlier. However we have to tell it that it is indeed Javascript we are supplying it with;
<input type='button' value='I am a button' onClick="javascript: document.getElementById('container').style.display('none');">
And there you have it, that is the very simple concept of hiding an element.
Subsequent tutorials will go through more advanced concepts as well, but I thought I’d start out with something very simple to see the feedback. Please leave a comment about what you like or don’t like (too long? too easy?) or a request for a specific concept for me to write a tutorial about.
If you enjoyed this article, please consider sharing it!
