As always, magic tricks have captured my attention. So today I present you with my own magic trick. We’re going to make some text appear and disappear into thin "cyber" air. Unlike real magicians, I’ll show you how I did it.
First up we are going to need some text to assist us in performing our magical feat:
I don’t want to achieve immortality through my work…. I want to achieve it through not dying. -Woody Allen
Ok, now that we have our text we’ll want to add some CSS to it to make it a little more presentable. We’ll now wrap it in a <div> tag (paragraph <p> tags will work also).
Now it’s time to get down to business. We’ll need to open our style sheet and add a new ID tag called "container". This, of course, can be whatever you would like to call it.
Now, for the sake of this tutorial, I won’t go into great depth making this particular <div> all fancy looking like Zombo.com, but I will put a border around it with a small amount of padding.
Next we’ll add in our two classes that actually make the text disappear and reappear on the screen.
Before we move on, I should give you a brief explanation of what the code above means. Basically the first line defines our function and what element it will effect. The name pimpIT is just something I came up with cause it sounded funny. That can be anything you’d like to call it. The three lines after it are what actually do the class name swap.
Notice that in the function pimpIT, I did a call for all <div> tags with an ID of "container." That makes sure that only <div> tags that change are the ones that I’ve added to that particular ID.
You should end up with something like this:
Obviously this wouldn’t really be a good magic trick to use on an audience, but on a website this could be and effective way of doing things like navigation, menus, and image display.
Now get out there and have some fun!