Show/hide with CSS/JS

Update - It has been pointed out to me that this do not validate. But that has Mattd from solucija forum fixed. Just click the link and you'll be beemed there. (I've also changed this in the code below.)

I'm no programmer in any one's mind, but I have picked up some here and there. The welcome-"popup" I have on the frontpage is something I fiddudled up while surfing the net trying to obtain a techniuqe to use layers as I had no idea how to use those.

I always thought this was something that DW used, hehe...I'm so stupid, and that one would have to use DW to get it. Well, now I know better. By using Javascript and some CSS one can do this without the Dreamweaver tool and thank god for that, if I might add.

Now, if someone would like to know how I managed this, I will tell you. There is a few things that need to be done. First we need to declare the looks of the "popup" itself. Mine looks like this:

.welcome { color:#80808; background-color:#fff; position:absolute; top:200px; left:25%; width:480px; padding:10px; z-index:99; visibility:hidden; }

Then we need to put in the javascript that makes this transition from hidden to visible possible. This we do by putting following in the head tag, like this:

Now, all we need to do is put the things we want to hide/show in the document itself. And that is made by:

Oups, almost forgot the linkage...How do we make it happen ? Well, we need to make a link that is supposed to show what we want to be shown. So inside the a tag we put the code to reveal it all:

onclick="popupBox('popup',1); return false;"

And the link to close it all (preferably put inside the box...):

onclick="popupBox('popup',0); return false;"

So, there you go. Have a nice time trying it out. Over and out.

02.06.2006. 12:21

No comments to this article yet..

Click to add a comment