Problems with opacity! [Archive]

Click to See Complete Forum and Search --> : Problems with opacity!

pkng

08-13-2008, 06:45 AM

Hi!

I just made a simple test with opacity, but it dosen't work! I want to control the text within the <div> by the value of var x. I have done this before and then it worked well. This is not all the code, just the nessacery to show the problem.

Kind if anyone could discover whats wrong!?

<html>
<head>
<script langauge="javascript">
var x=50
document.getElementById("test").filters.alpha.opacity=x;
</script>
</head>
<body>
<div id="test" style="position:absolute;top:20px;left:20px;filter:alpha(opacity=0);">This is a test!</div>
</body>
</html>

coothead

08-13-2008, 08:32 AM

Hi there pkng,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#test {
width:200px;
line-height:30px;
border:1 px dotted #ccc;
margin:20px 0 02px;
filter:alpha(opacity=0);
opacity:0;
}
</style>

<script type="text/javascript">

var x=50;
var obj;

window.onload=function() {
obj=document.getElementById('test');
if(obj.filters) {
obj.style.filter='alpha(opacity='+x+')';
}
else {
obj.style.opacity=x/100;
}
}

</script>

</head>
<body>

<div id="test">This is a test!</div>

</body>
</html>

coothead

pkng

08-14-2008, 01:54 AM

Thanks!

But why must it be activated when the file i loaded? Is it impossible to use and change the value of opacity later?

Centauri

08-14-2008, 02:11 AM

Your original code tries to set the style value before the div exists - the onload ensures that the script runs after the div is created.

pkng

08-14-2008, 02:41 AM

OK! But if I want to change it later, can't I use a function to call when the page and the DIV already is loaded?

Centauri

08-14-2008, 03:27 AM

If the script is a function like coothead set it up, and given a name, then it can be called when desired.

coothead

08-14-2008, 05:10 AM

Hi there pkng,

here you go...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#display {
width:230px;
line-height:30px;
text-align:center;
border:3px double #ccc;
margin:10px auto;
cursor:pointer;
}
#test {
width:200px;
line-height:30px;
border:1 px dotted #ccc;
margin:20px 0 02px;
filter:alpha(opacity=0);
opacity:0;
}
</style>

<script type="text/javascript">

var x=50;
var obj;

window.onload=function() {

obj=document.getElementById('test');
document.getElementById('display').onclick=function() {
applyOpacity();
}
}

function applyOpacity() {
if(obj.filters) {
obj.style.filter='alpha(opacity='+x+')';
}
else {
obj.style.opacity=x/100;
}
}

</script>

</head>
<body>

<div id="display">apply new opacity setting</div>

<div id="test">This is a test!</div>

</body>
</html>

coothead

pkng

08-14-2008, 06:34 AM

Thanks!

Hmmm, could you be so kind and explane what the window.onload=function does? Is it the same as <body onload="something();"> ?

Your last script is interesting, but from the beginning I made a script that called this function every 0.1 second and increased the opacity from 0 to 100 in step of 10 so the things in the <div> was visible in smooth steps. Hopefully this is possible with your script with som miner changes?

coothead

08-14-2008, 09:27 AM

Hi there pkng,
but from the beginning I made a script that called this function every 0.1 second and increased the opacity from 0 to 100 in step of 10 so the things in the <div> was visible in smooth steps.
Well, it's a pity that you didn't say this in your first post. :eek:
And you should have used the javascript forum instead of this one. ;)
Here is an example of incremental opacity...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#box {
width:370px;
line-height:50px;
border:3px double #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:24px;
text-align:center;
margin:30px auto;
}
#text {
height:100%;
color:#000;
filter:alpha(opacity=0);
opacity:0;
}
</style>

<script type="text/javascript">

var words=[
'I must always remember to...',
'...place my posts in...',
'...the appropriate forum !!'
];

var c=0;
var d=0;
var seconds=3; /* this will give 3 seconds delay before text disappears */
var k=0;
var speed=60;
var delay=100+(1000/speed)*seconds;
var obj;

window.onload=function() {
obj=document.getElementById('text');
fadeIn();
}
function fadeIn() {
c++;
d++;
if(obj.filters) {
obj.style.filter='alpha(opacity='+c+')';
}
else{
obj.style.opacity=c/100;
}
obj.firstChild.nodeValue=words[k];
if(d>=delay) {
k++;
c=0;
d=0;
}
if(k==words.length) {
k=0;
}
setTimeout('fadeIn()',speed);
}
</script>

</head>
<body>

<div id="box">
<div id="text"> </div>
</div>

</body>
</html>

coothead

pkng

08-14-2008, 10:11 AM

Sorry! Thanks for the help!

coothead

08-14-2008, 10:34 AM

No problem, you're very welcome. ;)