opacity change...

[xataku_nakusute]

how would i make a script where when an object is clicked, another objects opacity increments to 100?
and then, when clicked again, it decrements back to 0?

[Mr J]

Something like this maybe




<script>
num=0
running=0
function fade(){
running=1
elm=document.getElementById("odiv2")
num++
elm.filters.alpha.Opacity=num
document.getElementById("display").innerHTML=num
timer=setTimeout("fade()",10)
if(num==100){
running=0
clearTimeout(timer)
return
}

if(running==1&&num>100){
clearTimeout(timer)
elm.filters.alpha.Opacity=0
num=0
running=0
}
}

</script>

<div id="odiv1" style="background-color:red;width:100px;cursor:hand" onclick="fade()">click me</div>

<div id="odiv2" style="background-color:blue;width:100px;height:100px;filter:alpha(Opacity=0)"></div>

[xataku_nakusute]

nope....good try however....ill see if i can modify it for the correct display

[David Harrison]

I could probably clean this up a bit given time, however I don't have any so it'll have to do:

[xataku_nakusute]

thanx lavalamp!!!

its wonderful!

[Mr J]

Beaten to the post as they say, still here it is anyway just in case.




<script language="javascript">
<!--
num=0
running=0
dir=0
step= -5

function chk_dir(){
if(running==1){return}
if(dir==0){step= -step;fade();dir=1;return}
if(dir==1){step= -step;fade();dir=0}
}

function fade(){
running=1
elm=document.getElementById("fademe")
num+=step
elm.filters.alpha.Opacity=num
timer=setTimeout("fade()",10)

if(num>100){
running=0
clearTimeout(timer)
return
}

if(num<0){
clearTimeout(timer)
running=0
}
}
// -->
</script>

<div style="background-color:red;width:100px;cursor:hand" onclick="chk_dir()">click me</div>

<div id="fademe" style="background-color:blue;width:100px;height:100px;filter:alpha(Opacity=0)"></div>

[David Harrison]

Happy to help. :)
Sorry to disappoint. :(

[David Harrison]

If you're interested I developed a better way to do the fading, here ya go:

[David Harrison]

And here's the Ultra Customisable version:

[boojum]

you use
.style.filter="alpha(opacity=)"
but on the microsoft site i only see
.style.filter="progid : DXImageTransform.Microsoft.Alpha(opacity=)"
are they the same, is the first way a shorter version, is there a link to information on that way?

[David Harrison]

Well the CSS for changing the type of display of an element is this:

style="display:block;"

and the js is:

.style.display="block";


The CSS for setting the width of something is this:

style="width:100px;"

and the js is:

.style.width="100px";


So if the CSS for setting the opacity of something is this:

style="filter:alpha(opacity=n);"

then, shouldn't the js for it be this?:

.style.filter="alpha(opacity=n);";


I didn't look it up on the Microsoft site, or more importantly the W3C site, but it works. Also it seems that:

.style.filter="progid : DXImageTransform.Microsoft.Alpha(opacity=)"

is just a little bit Microsoft specific.

[boojum]

"just a little bit Microsoft specific"

thats something i was wondering about, is your way non-microsoft specific? do you or does anybody know of links relating to this, or links to what filters mozilla supports? there are no standards on filters right?

[David Harrison]

Well filters are CSS, so there will be something on the W3C site (http://www.w3.org/) about them.

[JPnyc]

I have a question on this issue. I know the JS syntax for changing this property in every browser that supports it, however in Mozilla/Netscrape as the opacity reaches 100% the elements "blink". Does anyone know a workaround for this problem? Has anyone else even experienced it? If you load this site in either Moz/NS you'll see what I mean : http://gkarchitects.biz/ Thanks.

[JPnyc]

Originally posted by boojum
"just a little bit Microsoft specific"

thats something i was wondering about, is your way non-microsoft specific? do you or does anybody know of links relating to this, or links to what filters mozilla supports? there are no standards on filters right?

In Mozilla and Safari, it's just opacity: .0 with 1 being 100%. In Netscrape its -moz-opacity:.0. IE's syntax you already know. No, there is no one syntax that all will recognize. But the good news is in the CSS they'll all ignore the proprietary syntax of the others and just respond to their own. All but Opera who doesn't support it at all. So it will ignore all of it.