This content has been marked as final.
Show 11 replies
-
1. Re: Spry effect Appear/Fade don't toggle
;-) Sep 14, 2007 2:36 PM (in response to oicram)Hey
I believe you need to use CSS to hide the element because you have the appear/fade working onclick not onload. That cause's your text to show when the page loads and only appear/fade after you click the Show Details div.
That should solve the toggle problem as well.
Hope that helps -
2. Re: Spry effect Appear/Fade don't toggle
oicram Sep 14, 2007 2:45 PM (in response to oicram)Nop. It does not work either!!!!
What a stupid error i'm having! Grr!!!
http://www.cantinho.org/admin/cantinho/blind_effect.php
:::::::::::::::::::::::::::::::::CODE:::::::::::::::::::::::::::::::::::::::
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#detalhes { display: none; }
-->
</style>
<script src="../../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>
<body>
<p>
<input name="mostra" type="button" id="mostra" onclick="MM_effectBlind('detalhes', 1000, '0%', '100%', true)" value="mostrar/ocultar detalhes" />
</p>
<div id="detalhes">
<p>Estes são os detalhes a mostrar.</p>
</div>
</body>
::::::::::::::::::::::::::::::::::::::::::::END OF CODE::::::::::::::::::::::::::::::::::::::::::
thanks for your reply :) -
3. Re: Spry effect Appear/Fade don't toggle
oicram Sep 15, 2007 1:06 AM (in response to oicram)Anyone PLEASE, I need some help...
Even if its a basic solution I don't get it.
Thanks. -
4. Re: Spry effect Appear/Fade don't toggle
MARIN Cristian Sep 15, 2007 1:42 AM (in response to oicram)Hello,
This problem is caused by a bug we discovered recently when using the Effects with the wrapping functions that Dreamweaver generate. The bug we fixed in the internal version and you can download a copy here: www.cristic.ro/samples/SpryEffects.js
Regards,
Cristian -
5. Spry effect Appear/Fade don't toggle
oicram Sep 15, 2007 2:02 AM (in response to oicram)And that bug covers all other effects, cas its not the only effect that don't toggle.
UPDATE: I have test. Yes it works.
Note: Can you please correct also the fact that the effects don't work inside the repeat regions. (only work with the first) will be nice to work with all.
Where do we put the .js file just provided, so she can be applied for future implementations to?
Thanks for your answer, waiting for your reply. -
6. Re: Spry effect Appear/Fade don't toggle
MARIN Cristian Sep 17, 2007 12:21 PM (in response to oicram)Hello,
Do you have a sample about the repeat region bug you experienced so I may debug and search for the solutions of this problem too?
Regards,
Cristian -
7. Re: Spry effect Appear/Fade don't toggle
oicram Sep 17, 2007 3:39 PM (in response to oicram)Ok. With the first .js (not the one you give me) only the first record show by the repeat region are able to work.
Imagine that I have a button that says: "More details" for each record in the repeat region, only when we click the button "More details" of the first record in the repeat region, produces the effect. All the others buttons generated by the repeat region do nothing.
With the new .js the effects work, but the effect its applied at the same layer (the first one).
The workaround is to add a counter to make the layers id to change.
Here his an effect inside a repeat region but with the new .js
See it here:
http://www.cantinho.org/admin/cantinho/find_search_result3.php
To reproduce the old error the page code is the same, but you must test with the old .js
Sorry for my poor english, i'm tired. Hope this helps, if you need I can send you the file, but I must know where.
-
8. Spry effect Appear/Fade don't toggle
oicram Sep 19, 2007 5:00 AM (in response to oicram)I found another bug at least in the Grow Shrink Effect.
When you apply several times the effect with the "this" option when you do not specifie the DIV that you want to apply the effect but you select the DIV and then you apply the effect with the "this" option.
Sometimes the "this" gets another value (normally the value of the first DIV that you applied the effect) and not the one of the DIV selected.
Is there a place where we can report this? -
9. Re: Spry effect Appear/Fade don't toggle
Guest Oct 10, 2007 9:13 AM (in response to MARIN Cristian)
I have been having a similar problem, and I thought your fix might help my problem, but after downloading and running it, I'm still getting the same thing. I'm trying to use effectAppearFade to make a target link appear when another link is clicked. In order for it to appear, I evidently need to not hide it in CSS Styles, but then when the page first opens, the target link is visible. I can almost make it work by fading it from 100 to 0 in an onload operation on the body of the page. The appear logic then works fine and even toggles okay if I turn that on, but, when the page first loads, the link that I'm hiding flashes briefly before it disappears. I've also tried using changeProp in the body's onload code to hide the target link, but it seems that whatever I have set the property to in CSS Styles overrides whatever I do in the onload. I've also tried controlling its visibility with the display property with the same result. So far, I haven't found a way to hide the target link before the page has loaded and then fade it to 0 before making it visible or in any other way to start the target link hidden and have it appear when I click the link with the AppearFade effect for it. Do you know what I'm doing wrong?
Thanks for any help you can give me.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
<!--
body,td,th {
font-family: Times New Roman, Times, serif;
color: #000099;
visibility: inherit;
}
body {
background-color: #CCCC99;
}
a:link {
color: #000099;
text-decoration: none;
}
a:visited {
color: #000099;
text-decoration: none;
}
.style1 {
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
visibility: inherit;
}
.style4 {font-style: italic; font-size: xx-large;}
.style5 {
font-size: 16px;
font-weight: bold;
visibility: visible;
display: block;
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args ))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
</head>
<body onload="/*MM_changeProp('#ArtLinks','','visibility','hidden','DIV');*/ MM_effectAppearFade('#ArtLinks', 0, 100, 0, false)/*; MM_changeProp('#ArtLinks','','visibility','visible','DIV')*/">
<div>
<table width="100%" height="477" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="22%" valign="top"> </td>
<td width="56%" valign="top"><p align="center" class="style1"> </p>
<p align="center" class="style1"><a href="TechnologyMainFrame.html" title="Technology" class="style1" accesskey="t">The Promise of <u>T</u>echnology</a></p>
<p align="center" class="style1">and</p>
<p align="center"><strong><span class="style4"><a href="javascript:;" title="Art" class="style4" accesskey="a" onclick="MM_effectAppearFade('#ArtLinks', 1000, 0, 100, true)">The <u>A</u>rt of Life</a></span> </strong></p></td>
<td width="22%" valign="top"><p align="center"> </p>
<div class="style5" id="#ArtLinks">
<p align="center" class="style5"><em><a href="Poems.php"><u>P</u>oems</a></em></p>
<p align="center" class="style5"><em><a href="Story.php"><u>S</u>tory</a></em></p>
</div></td>
</tr>
</table>
</div>
</body>
</html> -
10. Spry effect Appear/Fade don't toggle
oicram Oct 10, 2007 1:09 PM (in response to oicram)I don't understand quite well your problem so the first think I must do to try to help is undestand your problem.
Create a new page only to test this in order to isolate the problem and try to understand whats going on.
What you want is:
"use effectAppearFade to make a target link appear when another link is clicked."
Ok.
1) Make SURE the .js you use is the one provided in the update, and make sure you properly apply the update.
(if you create another instance of the behavior the .js in your site root is replaced by the one (maybe the older one) that is in the configurations of dreamweaver.
2) Put the link you want to show/hide inside a DIV.
3) Forget the onload event on the body. You don't need any onload on the body tag.
4) What you need is to make the default display of the "links that you want to show" to none.
Like this:
<div id="something" style="display:none"> The Links are here</div>
This code is in the body not in the HEAD and the reason I make this approach is because in your head section of the page you have names like style1 style2 etc... that are normaly generated by dreamweaver, but is better for code understanding proposes, to name the styles according to the tags or that according to that something you want to style.
I have not understand this passage:
"So far, I haven't found a way to hide the target link before the page has loaded and then fade it to 0 before making it visible "
because:
If you hide a target link before the page is loaded then you fade it to 0 this means that it will stay hide. I don't understand the point of doing it.
So lets move on ...
5) Then apply a ONCLICK on the link that you want to trigger for show/hide the hidden links in that div. But you must apply a fade effect from 0% to 100% and not, from 100 to 0.
I have not look to your code, sorry. But I have seen strange thinks like Visibility AND Display attribute in the same style, there are a diference between them, we can easily google it, but the point is, you will avoid conflits if you use only one of them. Lets say, display. So this can work with the example that I've provide earlier.
Hope this helps, somehow.
-
11. Re: Spry effect Appear/Fade don't toggle
Guest Oct 10, 2007 4:28 PM (in response to oicram)
That did it. By using
<span class="whatever"><a href="javascript:;" ... onclick="MM_effectAppearFade('#ArtLinks', 1000, 0, 100, true)">The trigger link is here</a></span>
and
<div id="something" style="display:none"> The target Links are here</div>
and leaving the visibility and display properties in the Property Inspector as inherit, the target links started out invisible and, when I clicked the trigger link, gradually became visible.
Thank you very much for your help.

