Resetting A Function()

**7079** · 12-24-2007, 08:01 PM

I have a function that works great when it is first called, but when you call the same function again the second time it doesn't work properly. Here is a link to the sample I created:

http://7079.net/Spry/

If you click the "click me1" link the first time, a div will appear in the center of the faded out div. When you clikc the "close1" it works fine also. But if you click the "click me1" again, it fades out but doesn't make the div re-appear. i am thinking and this just a guess, that the function has to be re-initilaized somehow.

If anyone can help, that owuld be greatly appreciated!

Thanks

**jscheuer1** · 12-25-2007, 08:51 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spry Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position:relative;
width:700px;
height:570px;
}
.details {
width:500px;
height:200px;
left:100px;
top:100px;
background-color:yellow;
display:none;
position:absolute;
font-size: 1em;
}
#targetID {
position:absolute;
width:700px;
height:500px;
background-color:green;
top:70px;
}
</style>
<script type="text/javascript" src="http://7079.net/Spry/SpryEffects.js"></script>
<script type="text/javascript">
function fadeOut(){
var effect = new Spry.Effect.Opacity("targetID", 1, 0.2, {duration: 300, toggle: false});
effect.start();
}
function fadeIn(){
var effect = new Spry.Effect.Opacity("targetID", 0.2, 1, {duration: 300, toggle: false});
effect.start();
}
function displayDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 0, 1, {duration: 300, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex=10000;
}
function closeDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 1, 0, {duration: 300, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex='';
}
</script>
</head>
<body>
<div id="container">
<div id="targetID"></div>
<h3><a href="#" onclick="displayDetails('targetID2'); fadeOut();return false;">Click Me1</a></h3>
<h3><a href="#" onclick="displayDetails('targetID3'); fadeOut();return false;">Click Me2</a></h3>
<div class="details" id="targetID2"><a href="#" onclick="closeDetails('targetID2'); fadeIn();return false;">close1</a>
<p>This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. 
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. 
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. </p>
</div>
<div class="details" id="targetID3"><a href="#" onclick="closeDetails('targetID3'); fadeIn();return false;">close2</a>
<p>This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. 
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. 
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. </p></div></div></body></html>

Notes: I'm not at all familiar with Spry. But I guessed (apparently correctly) that fade wasn't the same thing as opacity. I also guessed (apparently correctly) that IE would need a z-index component to show on top and not get confused about what was where in the stack. The one thing I was certain of was that all the stacked items should probably be positioned absolutely and independently within a relatively positioned container. There are other ways to work that out, but the way you had it with:

HTML Code:

<div id="targetID">

containing the details, no. Opacity and other styles that govern whether something can be seen or not are inherited from the parent, regardless of how they are set for the child.

**7079** · 12-25-2007, 04:16 PM

jscheuer1,

First of all, this is something that was plagueing me for days and I want to thank you for your help and the time that you took to figure out my problem. It was very kind of you, especially not being familiar with spry to take a stab at the problem and figure out a solution. I posted this on 2 other forums and was not able to get the help I needed. In all fairness, the adobe labs forum was not able to help due to the fact that the Spry participating members were on vacation till the 2nd of the new year. I was anticipating having to wait till than since the other forum I visited was useless in helping me, they were more concerned with addressing the forum rules which were mildly broken vs. helping me attain a solution.

To sum it up:
Dynamic Drive will be the first place I go to for JS help, the members here are very friendly and eager to solve problems.

Thank you so so much!

**jscheuer1** · 12-25-2007, 06:50 PM

In fairness to other forums, the frequent posters here, myself included, can get finicky about the forum rules at times. This is especially true when someone asking for help hasn't given enough information, or as much information as would make helping easier, and/or when they exhibit a tendency not to be following advice in general. But, it can happen any time. Personally, for most minor infractions, I tend to ignore them with new users. After someone has been around for a little while, it's generally time for them to 'get with the program', if they haven't already.

**7079** · 12-25-2007, 07:35 PM

It makes total sense, and btw, I am a new user on that forum, i had 43 posts there. I feel if you take the time to point them to the rules, include a response also to help the person, don't ignore their posts. Maybe a feature in the forum to rate a user by the number of times they've been told to go to the rules so that maybe they can be skipped. It's like posting something on a forum and someone saying: "Google it".

Anyway, thank you so much, have a merry xmas!

**jscheuer1** · 12-25-2007, 09:05 PM

In fairness to you, I might add that IMHO some forum members just quote rules to you to up their post count and because they aren't really focused on helping with your particular issue. It happens everywhere. Some places it happens a lot.

**7079** · 12-28-2007, 02:36 PM

jscheuer1,

I was playing some more with the script, I have a couple of questions that I'm not sure are possible or not:

1) When fading out the background, can i disable the links on the page from being "clickable" to prevent users from clicking them while the details are displayed? The only links "clickable" should be the ones in the detail div that's on top of everything.

2) When the "close" link is clicked within the details div, is it possible to close all other open divs so that nothing is on top?

I appreciate your help!

Thank you!

**jscheuer1** · 12-28-2007, 04:25 PM

With the page as it exists, the two are mutually exclusive. If you cannot click on the other links while the detail is open, there is no need to ever close more than one detail panel at a time.

To disable the links:

Code:

function displayDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 0, 1, {duration: 300, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex=10000;
displayDetails.open=true;
}
function closeDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 1, 0, {duration: 300, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex='';
displayDetails.open=false;
}

and:

Code:

<h3><a href="#" onclick="if(!displayDetails.open){displayDetails('targetID2'); fadeOut()};return false;">Click Me1</a></h3>
<h3><a href="#" onclick="if(!displayDetails.open){displayDetails('targetID3'); fadeOut()};return false;">Click Me2</a></h3>

To close more than one detail at a time make both of these:

Code:

onclick="closeDetails('targetID2'); fadeIn();return false;"

and:

Code:

onclick="closeDetails('targetID3'); fadeIn();return false;"

like so:

Code:

onclick="closeDetails('targetID2', 'targetID3'); fadeIn();return false;"

and use this closeDetails function:

Code:

function closeDetails() {
for (var trgt, t=arguments, i = t.length-1; i > -1; --i)
if(document.getElementById(trgt=t[i]).style.zIndex>1){
var effect = new Spry.Effect.Opacity(trgt, 1, 0, {duration: 300, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex='';
}
}

**7079** · 12-28-2007, 04:30 PM

jscheuer1,

You are the best! Thank you again for your help, I knew I can count on you and DynamicDrive!!!

I feel really bad for one reason, I know there are many that come to this and other forums expecting someone else to do their work for them. I hope that you don't think that of me, I would never expect someone to do my work for me. I am trying to learn JS so that I can be better at it, It's one thing I struggle with since I never really took the time and read books or tutorials on it, i have always found scripts and tried to modify them to work for me which is good, but probably not the best thing to do for learning.

With that said, can you make a recommendation on how I can get better with JS? Are there any book or tutorial recommendations you can make? I know this is probably simple stuff what I needed done and that I should have been able to do it myself, that's why i'm asking. I appreciate any recommendations that you can give me.

Thanks again!

**7079** · 12-28-2007, 04:41 PM

Here is the final script:

<html>
<head>
<title>Spry Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position:relative;
width:700px;
height:570px;
}
.details {
width:500px;
height:200px;
left:100px;
top:100px;
background-color:yellow;
display:none;
position:absolute;
font-size: 1em;
}
#targetID {
position:absolute;
width:700px;
height:500px;
background-color:green;
top:70px;
}
</style>
<script type="text/javascript" src="http://7079.net/Spry/SpryEffects.js"></script>
<script type="text/javascript">
function fadeOut(){
var effect = new Spry.Effect.Opacity("targetID", 1, 0.2, {duration: 600, toggle: false});
effect.start();
}
function fadeIn(){
var effect = new Spry.Effect.Opacity("targetID", 0.2, 1, {duration: 600, toggle: false});
effect.start();
}
function displayDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 0, 1, {duration: 600, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex=10000;
displayDetails.open=true;
}
function closeDetails(trgt) {
var effect = new Spry.Effect.Opacity(trgt, 1, 0, {duration: 600, toggle: false});
effect.start();
document.getElementById(trgt).style.zIndex='';
displayDetails.open=false;
}
</script>
</head>
<body>
<div id="container">
<div id="targetID"></div>
<h3><a href="#" onclick="if(!displayDetails.open){displayDetails('targetID2'); fadeOut()};return false;">Click Me1</a></h3>
<h3><a href="#" onclick="if(!displayDetails.open){displayDetails('targetID3'); fadeOut()};return false;">Click Me2</a></h3>
<div class="details" id="targetID2">
<a href="#" onclick="closeDetails('targetID2'); fadeIn();return false;">close1</a>
<p>This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test.
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test.
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. </p>
</div>
<div class="details" id="targetID3">
<a href="#" onclick="closeDetails('targetID3'); fadeIn();return false;">close2</a>
<p>This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test.
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test.
This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. This is a test, this is only a test. </p>
</div>
</div>
</body>
</html>

I didn't use all the stuff you suggested in the end, it had the script working funny, maybe I didn't add everthing right, not sure to be honest with you. But, this is working exactly like I had wanted it to work, I will modify it to work with the app that i'm working on, i'm sure it's going to do the job just fine!

Thread: Resetting A Function()

Thread Tools

Search Thread

Resetting A Function()

Bookmarks

Bookmarks

Posting Permissions