• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1039
  • Last Modified:

CSS div fading

Currently, I have a container div with two divs inside it, one positioned top left, one bottom right. The bottom right one has opacity so it appears to be a shadow of the other.  I'm using the JS getElementByID to change the visibility tag so that when you roll over a TD in a table, it'll pop up those div's with info about that day.

My question is, how can I make that fade in and out instead of just appearing and disappearing?

Thanks!
0
salvagbf
Asked:
salvagbf
  • 4
  • 3
1 Solution
 
BatalfCommented:
Example:

<html>
    <head>
    <script type="text/javascript">
    var opacity = 100;
    var timer = 50;
    function hideDiv(init,inputValue,inputDiv){
        if(init){
            opacity = document.getElementById(inputDiv).style.filter;
            opacity = opacity.replace(/[^\d]/g,"");
        }
        if(inputValue==0){
            if(opacity=='100')inputValue=-1; else inputValue = 1;
        }
        opacity = opacity/1 + inputValue/1;
        if(inputValue<0){
           
            document.getElementById(inputDiv).style.filter = "alpha(opacity="+opacity+")";    
            if(opacity>0){
                setTimeout('hideDiv(0,-1,"'+inputDiv+'")',10);
            }
        }
        if(inputValue>0){

            document.getElementById('myID').style.filter = "alpha(opacity="+opacity+")";    
            if(opacity<100){
                setTimeout('hideDiv(0,1,"'+inputDiv+'")',10);
            }
        }
    }
    </script>
   
<body>
<div id="myID" style="position:absolute;left:50px;top:50px;filter: alpha(opacity=100);height:200px;width:200px;z-index:5;background-color:#FFFFFF">Top div</div>
<div id="backgroundDiv" style="position:absolute;left:50px;top:50px;border:1px solid #000000;background-color:#FF0000;height:200px;width:200px">Background div</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#" onclick="hideDiv(true,0,'myID')">Show/Hide</a>
</body>
</html>
0
 
BatalfCommented:
salvagbf, have you looked at the code above?

Batalf
0
 
salvagbfAuthor Commented:
Thanks! I just checked it out and it looks great, definitely seems as though I can work it into my code.  The only problem is that it doesn't work in Firefox.  I'm guessing because Firefox uses '-moz-opacity' instead of 'filter:alpha(opacity=)' and I don't know how to change to code to work that in.  Any ideas?
      
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
BatalfCommented:
Try this:


<html>
    <head>
    <script type="text/javascript">
    var opacity = 100;
    var timer = 50;
    function hideDiv(init,inputValue,inputDiv){
        if(init){
              if(document.all){
                  opacity = document.getElementById(inputDiv).style.filter;
                  opacity = opacity.replace(/[^\d]/g,"");
              }else{
                    opacity = document.getElementById(inputDiv).style.opacity*100;
              }
              
           
        }
        self.status = opacity;
        if(inputValue==0){
            if(opacity=='100')inputValue=-1; else inputValue = 1;
        }
        opacity = opacity/1 + inputValue/1;
        if(inputValue<0){
           
            document.getElementById(inputDiv).style.filter = "alpha(opacity="+opacity+")";  
           
            if(!document.all){
                  document.getElementById(inputDiv).style.opacity=opacity/100;  
            }
            if(opacity>0){
                setTimeout('hideDiv(0,-1,"'+inputDiv+'")',10);
            }
        }
        if(inputValue>0){

            document.getElementById('myID').style.filter = "alpha(opacity="+opacity+")";    
            if(!document.all){
                  document.getElementById(inputDiv).style.opacity=opacity/100;  
            }
            if(opacity<100){
                setTimeout('hideDiv(0,1,"'+inputDiv+'")',10);
            }
        }
    }
    </script>
   
<body>
<div id="myID" style="position:absolute;left:50px;top:50px;filter: alpha(opacity=100);opacity:0;height:200px;width:200px;z-index:5;background-color:#FFFFFF">Top div</div>
<div id="backgroundDiv" style="position:absolute;left:50px;top:50px;border:1px solid #000000;background-color:#FF0000;height:200px;width:200px">Background div</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#" onclick="hideDiv(true,0,'myID');return false">Show/Hide</a>
</body>
</html>
0
 
salvagbfAuthor Commented:
Sorry I haven't had a chance to look at that last bit of code yet, I'm hoping to get a chance this week sometime.  Thanks!
0
 
salvagbfAuthor Commented:
Looks great! I should be able to play with that to get it to do exactly what I need.  Thanks!
0
 
pothireddysunilCommented:
Hi ,

I'm trying i have the same requirement,but when i copy it into html page and run it ..it don't display anything...

it show error at style has no =

Regards

S
0
 
salvagbfAuthor Commented:
S,

Wow, been over 4 years since this Q... Best bet is to post a new Question with what you're trying to accomplish, and possibly reference this Question so people can address your specific issue, and possibly take a look at the code you're working with.

Best of luck!

Bernie
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now