?
Solved

CSS div fading

Posted on 2005-03-11
8
Medium Priority
?
1,036 Views
Last Modified: 2009-06-11
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
Comment
Question by:salvagbf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13520580
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13533295
salvagbf, have you looked at the code above?

Batalf
0
 
LVL 6

Author Comment

by:salvagbf
ID: 13534760
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13534998
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
 
LVL 6

Author Comment

by:salvagbf
ID: 13591039
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
 
LVL 6

Author Comment

by:salvagbf
ID: 13619257
Looks great! I should be able to play with that to get it to do exactly what I need.  Thanks!
0
 
LVL 1

Expert Comment

by:pothireddysunil
ID: 24597411
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
 
LVL 6

Author Comment

by:salvagbf
ID: 24602006
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question