Mozilla -moz-opacity css rule and javascript access

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
CaptainN
Forum Newbie
Posts: 9
Joined: Tue Jun 18, 2002 1:41 pm

Mozilla -moz-opacity css rule and javascript access

Post 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)?
CaptainN
Forum Newbie
Posts: 9
Joined: Tue Jun 18, 2002 1:41 pm

Post 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)
User avatar
mikeq
Forum Regular
Posts: 512
Joined: Fri May 03, 2002 3:33 am
Location: Edinburgh, Scotland

Post 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
CaptainN
Forum Newbie
Posts: 9
Joined: Tue Jun 18, 2002 1:41 pm

Post 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.
alightstudios
Forum Newbie
Posts: 1
Joined: Wed Apr 29, 2009 1:24 pm

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

Post 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>
 
User avatar
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

Post 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';
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post by pickle »

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.
Post Reply