Page 1 of 1

Mozilla -moz-opacity css rule and javascript access

Posted: Tue Jun 25, 2002 4:40 pm
by CaptainN
Does anyone know how to access the -moz-opacity css rule from within javascript (since the "-" are not allowed in javascript var names)?

Posted: Wed Jun 26, 2002 10:26 am
by CaptainN
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):

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) &#123;

// 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+"%") ,"");

&#125;
</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%">
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)

Posted: Thu Jun 27, 2002 3:26 pm
by mikeq
Could you maybe have a blank image under (in a layer) the one you want to hide, put a mouse out on this with a bit logic - if top image is hidden then show. Sort of thing

Posted: Mon Jul 01, 2002 11:04 am
by CaptainN
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: :arrow: 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) &#123;
    if (typeof object.filters == "object") &#123;
        if (initOp) &#123;
            object.src = altImage;
            object.filters.alpha.opacity = initOp;
        &#125;
        nereidFade(object, destOp, rate, delta);
    &#125; else if (typeof object.style.getPropertyValue != "undefined")&#123;
        if (object.style.getPropertyValue("-moz-opacity") != '') &#123;
            if (initOp) &#123;
                object.src = altImage;
                object.style.setProperty("-moz-opacity", initOp/100,'');
            &#125;
            nereidFadeMoz(object, destOp, rate, delta, mozNum);
        &#125;
    &#125; else &#123;
        object.src = altImage;
    &#125;
&#125;
 
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
 
function nereidFade(object, destOp, rate, delta) &#123;
    clearTimeout(nereidFadeTimers?object.sourceIndex]);
 
    diff = destOp - object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp) &#123;
        direction = -1;
    &#125;
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
 
    if (object.filters.alpha.opacity != destOp)&#123;
        nereidFadeObjects?object.sourceIndex] = object;
        nereidFadeTimers?object.sourceIndex] = setTimeout("nereidFade(nereidFadeObjects?"+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    &#125;
&#125;
 
function nereidFadeMoz(object, destOp, rate, delta, mozNum) &#123;
    clearTimeout(nereidFadeTimers?mozNum]);
    startingOpacity = object.style.getPropertyValue("-moz-opacity") * 100;
 
    diff = destOp-startingOpacity;
    direction = 1;
    if (startingOpacity > destOp) &#123;
        direction = -1;
    &#125;
    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) &#123;
        nereidFadeObjects?mozNum] = object;
        
        nereidFadeTimers?mozNum] = setTimeout("nereidFadeMoz(nereidFadeObjects?"+mozNum+"],"+destOp+","+rate+","+delta+","+mozNum+")",rate);
    &#125;
&#125;
//-->
</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>
 
 
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: :arrow: Posting Code in the Forums to learn how to do it too.

Re: Mozilla -moz-opacity css rule and javascript access

Posted: Wed Apr 29, 2009 1:37 pm
by alightstudios
Why use javascript at all?
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>
 

Re: Mozilla -moz-opacity css rule and javascript access

Posted: Sat May 02, 2009 10:51 pm
by JAB Creations
-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...

Code: Select all

document.getElementById('example_id').className='your_opacity_css_class_here';

Re: Mozilla -moz-opacity css rule and javascript access

Posted: Mon May 04, 2009 10:05 am
by pickle
Your code would be easier to read if it didn't have all those HTML codes in it.