Make the Division Appear - Page 9
August 30, 2002
After the division was created, I encased it in a JavaScript
function so that I could call on it whenever it is clicked or
moused over.
Next, I set up another JavaScript function so that when the mouse
moved off the link, the division disappeared again.
After I have a function set up that makes the division appear and
disappear, the process is simple. Call the correct function, and
the effect comes to life. Well, it's relatively simple anyway.
Make It Appear
The harder of the two functions is the one that makes the division
appear, so we'll start with that one. It goes up in between the
<HEAD> flags and it looks like this:
<SCRIPT LANGUAGE="javascript">
function ShowIt()
{
document.body.insertAdjacentHTML('BeforeEnd',
 '<DIV STYLE="position:absolute; TOP:35px;
LEFT:410px" ID="TheTip"> <TABLE BORDER="1" CELLPADDING="3">
<TD BGCOLOR="ff00ff">How About This?</TD></TABLE></DIV>');
}
</SCRIPT>
That one line is pretty long, huh? Yeah. It can be broken down,
if you really want, into multiple document.write statements, but
why? It's just more typing for the same effect.
So, what does it do? Nothing. It won't do anything until it's
called on by its function name later in the page. Let's tear it
apart even more.
This is a JavaScript, so we have to start with the familiar
"SCRIPT LANGUAGE=" flag.
The function is named ShowIt(). Note that fancy brackets always
surround the JavaScript commands making up the event that the
function performs.
Now here's the magic-we begin with a hierarchy statement that
uses commands which are proprietary to MSIE. That's a nice way
of saying that only Explorer understands them. It's DHTML.
document.body.insertAdjacentHTML represents to the IE browser
that whatever follows is to go on the document, in the body,
and what follows in parentheses is to be inserted as HTML.
In case you're wondering, and I know you are, there's also the
command, insertAdjacentText. It works the same way except that
it handles what appears in the following parentheses as text
alone and does not compile it into HTML.
Inside the parentheses, the first command deals with where this
little division should display in terms of the command that is
calling for it. It doesn't come into play much in this scenario
because we are calling on this division from a function and not
from inside of an HTML command. But you still need to put
something in there to denote where the inserted HTML will appear,
or the format throws an error.
'BeforeEnd' means that the division should appear at the end of
the element before the end tag. There are actually three others
you can play with if you take this format and embed it in to an
HTML flag:
- BeforeBegin-The item is inserted in front of the flag.
- AfterBegin-The item is inserted after the flag, but before the text.
- AfterEnd-The items is inserted after the end tag.
Now we get to the element that will be inserted. It's a division
that has been positioned and given the NAME "TheTip" so that we
can call on it later. It looks like this:
<DIV STYLE="position:absolute; TOP:35px; LEFT:410px" ID="TheTip">
In terms of the effect, the positioning is very important. If you
decide to have multiple divisions popping up over a series of
links, you need to have each one positioned so that they pop up
at the right place.
Or, as I've seen it done, have them all appear in the exact same
place, which is a great effect. One just lays right over the other.
It's like a little billboard popping up.
You know what I've found with positioning? It's best to be most
concerned with the pixels from the top and go real easy on the
pixels from the left. Also, go easy on the concept of absolute
positioning. There are too many screen resolutions and sizes out
there to be overly concerned. Use the command positioning:absolute,
but keep in mind that you're only going to get "pretty close"
positioning. It'll keep your blood pressure down.
What follows in the division is a basic one-celled table with a
purple background. It might look a little strange because it is
all on one line, but that's all it is.
The </DIV> flag kills the line of text.
The second curly bracket and the </SCRIPT> wrap up the
entire format.
Now take that function, stick it in between
<SCRIPT LANGUAGE="javascript"> and </SCRIPT> commands,
and put that between the flags. So now, you understand and
posses a function that will make the division appear. But can
you make it disappear again? Read on to find out how.
Toggling Images and Text in Internet Explorer - Page 8
Beyond HTML Goodies
Make the Division Disappear - Page 10
|
