PDA

View Full Version : hidden text

Or Ozery
07-04-2004, 06:54 AM
I want the text to be in the color of the background, like:
<font color="parent.bgcolor">blabla</font>

How is it done?
Thanks in advance
Antoniohawk
07-04-2004, 07:08 AM
This is more of a javascript question, than a html/css one. With my limited javascript knowledge, I can not think of a way that this could be done inline. If the script could be in the head, then I can think of a way to make it work.

<html>
<head>
<script type="text/javascript">
document.getElementById('foo').style.color = document.bgColor;
}
</script>
</head>
<body onload="changeColor()">

<span id="foo">You shouldn't be able to see this.</span> However, you should be able to see this.

</body>
</html>
Note the use of a span tag instead of the deprecated font tag. :)
Or Ozery
07-04-2004, 08:23 AM
This is more of a javascript question, than a html/css one. With my limited javascript knowledge, I can not think of a way that this could be done inline. If the script could be in the head, then I can think of a way to make it work.

<html>
<head>
<script type="text/javascript">
document.getElementById('foo').style.color = document.bgColor;
}
</script>
</head>
<body onload="changeColor()">

<span id="foo">You shouldn't be able to see this.</span> However, you should be able to see this.

</body>
</html>
Note the use of a span tag instead of the deprecated font tag. :)

Thanks!
But the problem is I'm using it with vBulletin on dynamic pages, so I'm looking for a way doing it straight in the text, not in the "head".

Also note that the color I'm looking for is not always the document bgcolor, it could also be the <td> bgcolor in which the text is located. That's why I thought using "parent" instead of "document".
Antoniohawk
07-04-2004, 09:27 AM
I still can't figure out how to do it inline, but this should work with the parent's background color. I'll go tell the html/css mods to move this on over to the javacript forum. :)

<html>
<head>
<script type="text/javascript">
function changeColor(){
var obj = document.getElementById('foo')
if (obj.parentNode.style.backgroundColor == '')
obj.style.color = '#FFFFFF';
else { obj.style.color = obj.parentNode.style.backgroundColor; }
}
</script>
</head>
<body onload="changeColor()">

<span id="foo">You shouldn't be able to see this.</span> However, you should be able to see this.

</body>
</html>
coothead
07-04-2004, 04:16 PM
Hi there Or Ozery,

You do it like this...
<span style="background-color:red;color:green"
onclick="this.style.color=this.style.backgroundColor">green text</span>

It is important to remember that the CSS that you wish to effect has to be inline.
<style type="text/css">
<!--
td {
width:100px;
height:100px;
border:solid 2px #ff0000;
}
//-->
</style>

<table><tr>
<td style="background-color:#000000;color:#ffffff;"
onclick="this.style.color=this.style.backgroundColor">white text</td>
</tr></table>
...or it must be set by script...<script type="text/javascript">
<!--
function setText() {
document.getElementById('foo').style.backgroundColor="#0000ff";
document.getElementById('foo').style.color="#ffff00";
}
onload=setText;
//-->
</script>

<table><tr>
<td id="foo"
onclick="this.style.color=this.style.backgroundColor">yellow text</td>
</tr></table>


coothead
Or Ozery
07-04-2004, 04:28 PM
I've found a simple way that suited me: visibility:hidden
Antoniohawk
07-04-2004, 07:51 PM
Oh! I can't believe that I didn't put it all together. I should have known that you just wanted it to be hidden lol. :p
Willy Duitt
07-04-2004, 11:54 PM
I hide text in posts all the time. (not here tho) :p
I just change the font color to match the background color and you will only see it if you quote me or select all of the text....

That's what I thought he was trying to do anyway....

.....Willy