Javascript - check if layer hidden, then call other function

Hi,

I have the following code, it makes a layer fade in or out.  What I need is for the code to first check if a layer hidden, if so make it visible but with the fade set so it can not be seen... then call the function to fade it in.  The reason for this is hidden layers don't leave links on the page, just having their transparency set to 100% still means the links are accessible.

<head>
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
      
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it invisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
}
</script>
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      width:200px;
      height:36px;
      z-index:1;
      left: 156px;
      top: 163px;
      background-color: #CCCCCC;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>
</head>

<body>
<p><a href="javascript:shiftOpacity('Layer1', 2000)" onClick="MM_callJS('shiftOpacity(\'Layer1\', 2000)')" onMouseOut="shiftOpacity('Layer1', 2000)">show/hide</a></p>
</body>
LVL 17
wobbledAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
I have changed your call a little - absolutely no need for the callJs from MM

And the script knows:

    if(document.getElementById(id).style.opacity == 0) { // invisible





<html>
<head>
<script>
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
 
    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
      
}
 
//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
 
function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it invisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
}
</script>
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      width:200px;
      height:36px;
      z-index:1;
      left: 156px;
      top: 163px;
      background-color: #CCCCCC;
}
 
-->
</style>
</head>
 
<body>
<p><a href="#" 
onClick="shiftOpacity('Layer1', 2000); return false" 
onMouseOut="shiftOpacity('Layer1', 2000)">show/hide</a></p>
<div id="Layer1">Hello</div>
</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wobbledAuthor Commented:
Cheers for that.  I had noticed the dreamweaver tags of callJs from MM bit - sometimes that program does like to add unecessary items

Kind Regards

W
0
wobbledAuthor Commented:
Did what I wanted, which you can't ask for more.  Great!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.