Mozilla -moz-opacity css rule and javascript access
Moderator: General Moderators
Mozilla -moz-opacity css rule and javascript access
Does anyone know how to access the -moz-opacity css rule from within javascript (since the "-" are not allowed in javascript var names)?
I found a way to access the property from javascript, but I now have another problem.
Here is the code (my question is in the comments):
Thanks.
P.S. If anyone is interested I got the idea from a script here:
http://www.dejap.com/projects.htm
I'm trying to make that work in Netscape 6 (Mozilla)
Here is the code (my question is in the comments):
Code: Select all
<script language="JavaScript" type="text/javascript">
// call the function with the object (not a string) and the
// new Opacity (in percentages, like 50 for 50 percent)
function fade(object, newOpacity) {
// I have to do this because if I don't the opacity will not change
// The problem is here. If I call this function onmouse over, the
// object (the image) will be set to hidden then back to visible.
// When that happens the browser forgets that the mouse is over
// the image, so when I mouseout the onmouseout call is not
// made. Does anyone know how to get the mouseout event to
// trigger after adjusting this property? Or does anyone know
// how to get the opacity to change (and second time, third, etc)
// without using this trick?
object.style.visibility = 'hidden';
object.style.visibility = 'visible';
object.style.setProperty("-moz-opacity",newOpacity+"%") ,"");
}
</script>
<!-- calling image -->
<img src="some/src.gif" width="117" height="27" name="b1" id="b1" border="0" onmouseout="fade(this,50)" onmouseover="fade(this,100)" style="filter: alpha(opacity = 50); -moz-opacity: 50%">P.S. If anyone is interested I got the idea from a script here:
http://www.dejap.com/projects.htm
I'm trying to make that work in Netscape 6 (Mozilla)
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
Here's an update:
So this code works. My original assumption about changing the visibility off and then on again didn't pan out (I was able to remove that, this code works without that trick.) The mouseout event still disapears. I moved the mouse out event to the <td> behind the image and the mouseout still disapears. It keeps disapearing all the way up to the top most container.
I was able to create a work around by placing a layer over top of the image I want to fade but what a pain that is.
Does anyone know why the mouseout event is disapearing (no other events seem to disapear)?
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
Here's an update:
Code: Select all
<script language="JavaScript" type="text/JavaScript">
<!--
function fadeGate(object, destOp, rate, delta, initOp, altImage, mozNum) {
if (typeof object.filters == "object") {
if (initOp) {
object.src = altImage;
object.filters.alpha.opacity = initOp;
}
nereidFade(object, destOp, rate, delta);
} else if (typeof object.style.getPropertyValue != "undefined"){
if (object.style.getPropertyValue("-moz-opacity") != '') {
if (initOp) {
object.src = altImage;
object.style.setProperty("-moz-opacity", initOp/100,'');
}
nereidFadeMoz(object, destOp, rate, delta, mozNum);
}
} else {
object.src = altImage;
}
}
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta) {
clearTimeout(nereidFadeTimers?object.sourceIndex]);
diff = destOp - object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp) {
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects?object.sourceIndex] = object;
nereidFadeTimers?object.sourceIndex] = setTimeout("nereidFade(nereidFadeObjects?"+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
function nereidFadeMoz(object, destOp, rate, delta, mozNum) {
clearTimeout(nereidFadeTimers?mozNum]);
startingOpacity = object.style.getPropertyValue("-moz-opacity") * 100;
diff = destOp-startingOpacity;
direction = 1;
if (startingOpacity > destOp) {
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.style.setProperty("-moz-opacity",((direction * delta) + startingOpacity)/100,'');
object.onmouseout = object.parentNode.onmouseout;
if ((object.style.getPropertyValue("-moz-opacity")*100) != destOp) {
nereidFadeObjects?mozNum] = object;
nereidFadeTimers?mozNum] = setTimeout("nereidFadeMoz(nereidFadeObjects?"+mozNum+"],"+destOp+","+rate+","+delta+","+mozNum+")",rate);
}
}
//-->
</script>
<!-- the mouseout event disapears in both of these -->
<table width="466" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="78" background="images/navBar/about_off.gif"><a href="about.html" onMouseOut="fadeGate(document.about,0,50,10,false,'images/navBar/about_off.gif',3)" onMouseOver="fadeGate(document.about,100,25,20,1,'images/navBar/about_on.gif',3)"><img src="images/navBar/about_off.gif" name="about" id="about" border="0" width="78" height="27" style="filter: alpha(opacity = 100); -moz-opacity: 100"></a></td>
<td width="69" background="images/navBar/contact_off.gif" onMouseOut="fadeGate(document.contact,0,50,10,false,'images/navBar/contact_off.gif',4)" onMouseOver="fadeGate(document.contact,100,25,20,1,'images/navBar/contact_on.gif',4)"><a href="contact.html"><img src="images/navBar/contact_off.gif" name="contact" id="contact" border="0" width="69" height="27" style="filter: alpha(opacity = 100); -moz-opacity: 100"></a></td>
</tr>
</table>
I was able to create a work around by placing a layer over top of the image I want to fade but what a pain that is.
Does anyone know why the mouseout event is disapearing (no other events seem to disapear)?
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
-
alightstudios
- Forum Newbie
- Posts: 1
- Joined: Wed Apr 29, 2009 1:24 pm
Re: Mozilla -moz-opacity css rule and javascript access
Why use javascript at all?
Just use CSS
Just use CSS
Code: Select all
<html><head>
<style type="text/css">
#hover a{-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;cursor:default;}
#hover a:hover{-moz-opacity:1; filter:alpha(opacity=100); opacity:1;}
</style></head><body>
<div id="hover">
<a href="#" >
<img src="some/src.gif" name="b1" id="b1">
</a>
</div>
</body></html>
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: Mozilla -moz-opacity css rule and javascript access
-moz-opacity is obsolete, use the standard 'opacity' property for Gecko.
https://developer.mozilla.org/En/CSS_Re ... Properties
I'm not sure about the DOM though I recommend setting opacity in a CSS class and then changing the class with the DOM for what you're doing...
https://developer.mozilla.org/En/CSS_Re ... Properties
I'm not sure about the DOM though I recommend setting opacity in a CSS class and then changing the class with the DOM for what you're doing...
Code: Select all
document.getElementById('example_id').className='your_opacity_css_class_here';Re: Mozilla -moz-opacity css rule and javascript access
Your code would be easier to read if it didn't have all those HTML codes in it.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.