I had a task a few days ago where I wanted to make web content appear and disappear depending on some backend DB constraints.

So CSS/DHTML was the obvious choice!!

By setting “style.visibility ” to either ‘visible’ or ‘hidden’ you can reveal or hide web content with ease.

so off I went and coded……….

I made the required div tags <div id=’$id’> around the content that I wanted to appear/disappear (where the $id is from the DB).

On the onmouseover event of the tag, I fired off some javascript and attempted to hide the code with the following.

onmouseover=”hide($id);”

Javascript:

function hide(id){
document.getElementById(id).style.visibility=’hidden’;
}

The idea was to fire off the javascript and hide the tag this way. The id being passed thru is id of the div tag

i.e. <div id=$id>

Well…what do you know….. it would not work.

Javascript would see the id being passed thru as a good parameter, but as an integer, not the required string.

so I changed the code as follows.

I added the letters “tagid_” before the id in the div tag

i.e <div id=’tagid_$id’>

In the javascript I added the following

var this_id=”tagid_”+id;

and then hide it as follows

document.getElementById(this_id).style.visibility=’hidden’;

And THIS worked like a dream..
PS!!… the code below was NOT run in a browser to check for validity.. it is only the idea.

 

Here is the basic sample code in full:

1. The div tags:

<div id=’tagid_$id’ >

2. The Onmouseover() event:

onmouseover=”hide($id);”

3.The javascript read:

 

function hide(id){
var this_id=”tagid_”+id;
document.getElementById(this_id).style.visibility=’hidden’;
}

And this seemed to work great.

Hope this helps someone out.

Advertisements