Spry Effects (appear/fade with menubar)

Hello,
I am trying to implement a spry menu effect that only targets
the drop down, submenu item list of my horizontal menu bar. When I
hover over the main category or list item, the javascript is set to
delay the appearance of the corresponding submenu items. What I
like to have happen if for the submenu items to fade in (or
"appear" in spry effect terminology) during this timed delay
(onmouseover), and fade out during the timed delay that occurs
onmouseout. I was unable to get the desired effect using the spry
menu effects in the main HTML file. I am thinking this change would
require altering the the sprymenu.js file becuase that is where the
underlying spry menu behavior that I am trying to target lives.
Any ideas? Or should I abandon this idea?

Similar Messages

Spry effect Appear/Fade don't toggle

Ok.
I have applied a simple, basic, no more basic then this
cannot be possible, Appear/Fade using the effects behaviors menu in
DW.
I have turn on the Toggle option and I said: "appear from 0
to 100".
Well the result is this:
http://www.cantinho.org/admin/cantinho/showhide.php
Note: I can make a CSS to make the element disapear at the
beginning, but why should I need that if I have configured to show
from 0 to 100% ?
What I'm missing here?
Thanks.

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">

</style>
<script src="SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">

</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>

Spry accordion with effect appear/fade

Hi,
I'm looking for a solution with the effect appear/fade which I've putten on an image.
http://www.home-maastricht.nl/signage.html
When I open the tab the content image is bright and the tab is dark (this is ok).
The image from the tab must lighten up when I close the content tab.
The content tab can be close by clicking on the tab image and also by clicking on the content image.
Can you follow me?
And the most important, can you help me?
Thanks al lot !!
Regards,
Carla

Sorry, it was the Appear/Slide Effect

Spry Effects doesnt work with position:absolute CSS

HI guys,
I have a text with position: absolute; left: 20px; top: 10px;
to it and using Spry's Fade Effect, it just shows it without any
fade animation, any ideas why?
quote:
<!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>Untitled Document</title>
<script src="assets/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="assets/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body onload="cycler.start();">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content1', 1000, 0, 100, false)"
tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content0', 1000, 0, 100, false)"
tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="Content1">
<div>Normal text here</div>
</div>
<div class="TabbedPanelsContent" id="Content0"
spry:detailregion="dsFeaturebox1">
<div class="cool">{XML text here}</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Thanks,
J

Hi guys,
I just would like to know why adding position: absolute on my
css would stop the Spry Effects from doing its job? Thanks!

Appear Fade effect

When you apply the appear fade effect to an image with an
'onload' command how do you stop the the image initially loading
and flickering before the effect happens?

add the style visability:hidden to the elements that flicker?
(easy solution)

Spry static gallery combined with Spry Effect Observers

I have set up a Spry static gallery using the
demo
here.
I would like to add a cross fade for the main image using the
Spry Effect Observers shown at the bottom of
this
demo page.
I like the thumbnail grow effect used in the first demo and
like to add a cross fade for the main image when the thumbnail is
clicked. Have someone built such an example or can someone show me
how it is done? Typically I have 4 thumbnails/images per product
page.

Mr. Andersson wrote:
> I thnik I know what's going on now...
>
> I tried Fireworks and it has a built in Slideshow
creator. The setting that
> dont use Flash uses Spry and looks like the Spry gallery
demo. The settings
> using Flash have cross fading images.
>
> From this I got the idea that Adobe maybe dont want us
to cross fade with
> Spry. They want to push Flash instead. It could explain
the total silence from
> Adobe in various threads where this question is asked.
This is a user to user forum, Adobe will never reply to you.
Also, Spry is still a pre-release framework, its nowhere near
finished.
Its the kind of framework where you take whats available and
make
something out of it, its very flexible if you know
javascript.
I am learning javascript just to understand the little bits
that I am
experimenting with, I think its the only way forward if you
intend to do
something outside the box.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Spry Effects with Animated GIF

Hi,
I'm using Spry's fade it effect in conjunction with Spry's
update content to update a div with html content. Now i have an
animated gif that is totally non-related to this action on the
screen that is "draggable". What is happening is that each time i
invoke Spry's update content....The animation of the GIF
stops....However, this happens in IE and not FF...
Is there a bug here?

Hi,
Just an FYI, in most browsers, JavaScript executes on the
main UI thread which is the same thread that is responsible for
painting/updating the screen. If you have JS on the page that is
doing some long operation in a tight loop, or if you dynamically
insert lots of HTML content into the document, causing the browser
to recalculate/layout/re-render a lot of content in the page, then
you might see this situation.
I can't tell what your situation is without seeing what you
are actually doing.
--== Kin ==--

Appear/Fade Effect Trouble

I'm using the appear/fade effect to make the elements on my
pages fade in when they load. When I preview the pages, instead of
just fading in, they flash on screen for a millisecond before they
fade in. How do I solve this issue?
Here's an example of the code:
Please help!

On Thu, 23 Aug 2007 17:07:25 +0100, David Powers
<[email protected]>
wrote:
>[email protected] wrote:
>> <img src="images/places_03.jpg" alt=""
name="main" width="642" height="508"
>> id="main" onload="MM_effectAppearFade(this, 1000, 0,
100, false)">
>
>You can't use an onload event on an image. It works only
on the <body>
>tag. Remove the Fade effect from the image, then select
the body tag in
>the Tag selector at the bottom of the Document window.
Apply the Fade
>effect to the body, and select "main" as the Target
Element.
David - I'm sure it's in a book somewhere - but I can't find
it.
I already have the Modify Template Make Attribute Editable
<body id="default" >
use this to apply css to specific pages
Can you add a second or even third so that in addition you
can use
onload javascripts.
I've rather fought shy of Javascript - preferring to use php,
but I
now think that was a mistake - and just use JS to provide
extra
features whilst allowing for people that have it disabled
Or maybe I should just ditch Templates altogether and use
100% ssi's
~Malcolm N....
~

Problem combining Spry effects with image captions [was: LShub]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

On Mouse Text Appear/Fade IE Problem

Hello Dreamweaver Sages,
I'm having an odd problem I was hoping someone might be able to help me with. First, I am using CS6 and the latest of all browsers.
I have applied the same Spry Appear/Fade effect to a images having <a href> links and text with <a href> links created directly from the behavior panels. All coding has been properly located/placed.
Here is the odd thing:
1) The fade effect works pefectly on images and linked text on my Mac, on all browsers.
BUT...
2) On a PC, the fade effect works fine on images, but does not work at all on the linked text in any later version of IE.
I have tried making a few adjustments but have had no luck getting it to work. The only thing I can think of is a conflict with the "text decoration" designated as "none" in my overall defintition for the text involved, but don't think it's the case.
Anyone else heard of this? Is it just me or is there a work-around to an established issue?
Thanks!
Matt

I have a webpage containing a textbox. Some events are bound to the textbox on key events, hence the UI changes as the user types on the textbox.
With IE10 a clear ('X') button appears on the textbox which allows users to clear the textbox.
Is there any event in JavaScript through which I can capture the clearing of the textbox with the clear ('X') button?
I also tried using change event of the textbox, but the problem with change event is that it gets fired only when the user focuses out of the textbox (see this fiddle
http://jsfiddle.net/MDMV5/ for repro) , which I don't want.
Reiterating the question: Is there any event in JavaScript through which I can capture the clearing of the textbox with the clear ('X') button?
If the user cuts/pastes with the mouse, does your UI behave as you would like?
I can accept events not occurring until the user moves to another control, but there seems to be a bug with this: if the user clicks the X button then clicks on a dropdown list control, the onchange event is not fired (found on Win 7 x64 + IE10 x64).
So I've had to use the input::-ms-clear hack to disable this feature :(

Spry Effects+Safari=Conflict?

I'm currently creating a site for a commercial video producer
and I've got thumbnails beneath the video player using Spry Effects
where onLoad, the thumbnails appear dimmed and upon rollover, the
thumbs brighten up. Problem is the effect works perfectly in
Firefox but not Safari at all. Is this a known conflict?
http://www.josephimartinez.com/commercials/index.html
This is being tested in v3.0.4 of Safari for Mac.

I tried the examples from the effects_coding/index.html but
it didn't matter whether it was the onclick or onmouseover effect.
Nothing is happening in any browser.
I've updated the following page with the new code and added
the reference to my SpryAssets folder (doh! how could I forget to
add that?) and you'll see I added the code to the vid1 instance.
http://www.josephimartinez.com/commercials/index2.html
Here's what I did:
First add the references to SpryEffects in the head:
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
Then did this to the div:
<div id="vid1">
<p><a onmouseover="fadeElement.start(); return
false;" href="coors_light.html"><img
src="../images/thumbs/coors_light.jpg" alt="Coors Light"
name="commCoors" width="124" height="93" border="0" id="commCoors"
/></a></p>
<p><a href="coors_light.html"><img
src="../images/logos/coors_light.gif" alt="Coors Light"
name="coorsLight" width="80" height="60" border="0" id="coorsLight"
/></a></p>
</div>
<script type="text/javascript">
var fadeElement = new Spry.Effect.Fade("vid1",
{duration:2000, from:100, to:20, toggle:true});
</script>

Spry Effects Question

Is there a way to use a spry effect to have a div (or image)
fade away and have it show the page underneath. For example, I have
a page where I want there to be a picture when you open the page. I
then want the picture to fade out automatically, and have my web
page (with navigation, etc) underneath of it show up. It seems that
when using spry effects however, the image will fade out, but it
doesn't fade to nothing. There is something there still blocking
the content underneath.
Any help at all would be greatly appreciated!

Hi,
I've just reproduced your case and I have a solution for you.
After the effect finishes, you should made the image
invisible and in the same time to release the space occupied by the
image.
To do this, add into the effect constructor the option:
'finish:' that receives a function as parameter. On this function
you set for the image to become invisible after the effect finishes
by adding display:none.
The constructor should look like this:
var effect = new Spry.Effect.Fade('test', {duration: 3000,
from: 100, to: 0, finish:function(el,
eff){el.style.display='none';}});
The effect will be started onload.
Diana

OnError event passed to Observer in Spry.Effect in IE

Hi ,
I have this issue that I have already spent 2 days on it and desperately need help from experts here.
I have two data sources ds3 and ds4 (div id="news"). (master detail regions). On click on ds3 row I fire a javascript function "fadeOutContent(rowID,rowNum)". Code is given below:
<script>
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;
function fadeInContent(notificationType, notifier, data)
   alert(" notificationType " + notificationType);
    if (notificationType != "onPostUpdate")
        return;
    var effect = new Spry.Effect.Fade('news', { to: 100, from: 0, duration: 2000, finish: function() {
        // The region is now showing. Process any pending row change request.
        gEffectInProgress = null;
        if (gPendingSetRowIDRequest >= 0)
            alert(" see if this causes the error");
            var id = gPendingSetRowIDRequest;
            gPendingSetRowIDRequest = -1;
            fadeOutContent(id);
    alert("starting the effect ");
    effect.start();
Spry.Data.Region.addObserver('news', fadeInContent);
function fadeOutContent(rowID,rowNum)
    // If we have an effect already in progress, don't do anything
    // We'll set the rowID when we're done.
    alert(" gEffectInProgress " + gEffectInProgress);
    if (gEffectInProgress)
        gPendingSetRowIDRequest = rowID;
        return;
    // If the correct row is already showing, don't do anything!
    if (rowNum == ds3.getCurrentRowNumber())
        return;
    gEffectInProgress = new Spry.Effect.Fade('news', { to: 0, from: 100, duration: 2000,finish: function() {
        ds3.setCurrentRow(rowID);
        alert("Currne tRow updated in ds3" + rowID);
    gEffectInProgress.start();
</script>
Div for spry regions are as below:
                    <div class="rows" spry:region="ds3">
                        <div class="rowOdd" spry:repeat="ds3" spry:odd="rowOdd" spry:even="rowEven" spry:hover="mouseOver" spry:select="selected">
                        <div onclick="fadeOutContent('{ds_RowID}','{ds_RowNumber}');">{NewsLine}</div>
                        </div>
                    </div>
                    <div id="news" spry:region="ds4" style="margin-top:20px">
                                <p>{NewsPage}</p>
                    </div>
PROBLEM:
On first row everything works fine. On clicking on second row function fadeOutContent line ds3.setCurrentRow(rowID); causes on onError event passed to Observer, as a result fadeInContent function returns without doing any Fading.
Please help with any information that can provide possible solution to this.
ALL WORKS WELL IN FF. P.S. My site is on localhost. So can not share a link.
Thanks

Sorry, I am working on localhost so far.

Doable? Setting Spry Effects to trigger one after the next ala timeline?

I've got a series of four slide effects. Each one controls another div. Simple enough. Problem is at this time they're all happening at the same time. I want it where once the first div slides into place, then the second div slides into place and so on. So there has to be a delay or something so the slide effects habe staggered starts. Is this doable in Spry? I've seen some examples but they seem to come off ars rather complex.

Nope. That's not the answer. For starters, I pasted in your code and it came back with syntax errors. so I changed it to this:
<script type="text/javascript">
var showContent1 = new Spry.Effect.Fade('ms1',{duration: 1000,from: 0, to: 100, toggle: true, finish:new Spry.Effect.Fade('ms2',{duration: 1000,from: 0, to: 100, toggle: true, finish:new Spry.Effect.Fade('ms3',{duration: 1000,from: 0, to: 100, toggle: true, finish:new Spry.Effect.Fade('ms4',{duration: 1000,from: 0, to: 100, toggle: true})})})});
</script>
Which brought up no syntax errors, so I uploaded it and the first effect happens just fine but then it tries to trigger the second effect and instead I get a window prompt in Firefox like this:
Spry.Effect ERR: Spry.Effect.Animator.prototype.stop: finish callback: Type Error: self.options.finish is not a function
So I guess they don't consider the finish:new I added a function? Don't get it.

Spry Effects jumpy at start, then smooth

Here is my sample page:
http://www.bloominvestors.com/sample.html
I am trying to put a toggle on/off feature at the head of a
dynamic table. The user can click an "Instructions On/Off" button
and the instructions on how to use the table will fade in or out. I
am applying two effects - highlight and appear. As you can see,
when the page is first loaded and you click "Instructions On/Off"
the appear effect on the text comes first, then highlight on the
background. It's jumpy. However, once it is loaded the first time,
it toggles on/off in synch beautifully. How do I get it to
synchronize the effects the first time.
Here is the code:
#instructions {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-variant: small-caps;
color: #333;
text-align: center;
width: 890px;
height: 150px;
margin-right: auto;
margin-left: auto;
#instructions_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-variant: small-caps;
color: #606;
background-color: #FFF;
text-align: center;
#instructions_interior_body {
color: #90C;
height: 200px;
width: 900px;
margin-right: auto;
margin-left: auto;
visibility: hidden;
-->
</style>
<script src="SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div id="instructions"
onclick="MM_effectHighlight(instructions_interior_body, 1000, '',
'#330066', '#ffffff',
true);MM_effectAppearFade(instructions_interior_body, 1000, 0, 100,
true)"><span id="instructions_title"> Instructions
(On/Off)</span>
<div id="instructions_interior_body">This is how you
use this table! </div>
</div><br />

one more hopeful bump

Spry Effects (appear/fade with menubar)

Similar Messages

Maybe you are looking for