?
Solved

Javascript - check if layer hidden, then call other function

Posted on 2008-02-12
3
Medium Priority
?
1,025 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:wobbled
  • 2
3 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20883982
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
 
LVL 17

Author Comment

by:wobbled
ID: 20892117
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
 
LVL 17

Author Closing Comment

by:wobbled
ID: 31430300
Did what I wanted, which you can't ask for more.  Great!
0

Featured Post

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.

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 . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

607 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