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">
<!--
function MM_effectHighlight(targetElement, duration,
startColor, endColor, restoreColor, toggle)
Spry.Effect.DoHighlight(targetElement, {duration: duration,
from: startColor, to: endColor, restoreColor: restoreColor, toggle:
toggle});
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
//-->
</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

Similar Messages

  • Spry.Effect.GrowShrink crazy behaviour

    Hi, I was wondering if someone could help me figure out why
    when I pass the mouse over the thumbnails in my photo gallery, they
    act all jumpy. I used the same effect as in the Spry demo photo
    gallery yet they behave differently. My gallery is located here
    http://www.fotosite.ca/temp/index.htm
    my grow function looks like this (and shrink is similar)
    function GrowThumbnail(img, from, to){
    img.style.zIndex = 150;
    img.style.borderStyle = 'solid';
    img.style.borderWidth = '3px';
    img.style.borderColor = '#ffff00';
    Spry.Effect.GrowShrink(img, {duration: 500, from: from, to:
    to ,toggle:false });
    Thanks in advance for any help,

    Hi,
    I see 2 problems:
    1. The Grow/Shrink effect do not know to consider the margin,
    border and padding so when you add these properties from the
    JavaScript you'll have the weird behavior of images moving down and
    right before animation start and then up and left when the mouse
    leave.
    We automatically include the 1px border in the thumbnail view
    and we only change its color. You remove 2px from the border while
    the mouse is not over the element and when you add them the effect
    is really visible and disturbing. If you consider in keeping a such
    big value for the border then you should keep it when the images
    are not focused.
    2. While you move the mouse over the thumbnails fast some of
    the images will remain open. This is a bug that also reproduce in
    our photo gallery too and I will look to fix it while the new Spry
    will be released. The issue is basically generated by the fact you
    are not using the toggle option while running the effect.
    Cristian

  • 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

  • IE7 and Spry Effect

    In IE 7 when you start your div with display: none; in order
    to have the slide collapsed at start, when it expands, the text
    inside the div remains hidden, in FireFox the text displays
    properly. Any ideas?

    I just tried V1 Fusions idea and it sort of works, didn't
    have time to play with it more.
    The solution I found, though its still hack and I don't like
    it is to add a second effect to start it off closed:
    so my two effects are:
    var slideClose_effect = new Spry.Effect.Slide("slide1",
    {duration: 1, from: '0%', to: '0%', toggle: false});
    var slide_effect = new Spry.Effect.Slide("slide1", {duration:
    200, from: '0%', to: '100%', toggle: true);
    where slide_effect is triggered on a click of a link
    slideClose_effect is triggered on the page load
    and then I start off the div as visibility = hidden for the
    sliding div. Which works but now there is a blank div that
    collapses on load then works perfectly. I just wish I could start
    out with it collapsed at the get go.
    here are my two effects

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

  • 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 not recognizing classes

    When adding a spry effect to an <img> element, it will pick up on ID's but not classes.
    <style>
    img.color {color:#fffff}
    </style>
    <body>
    <img src="image.jpg" class="img.color" img />
    </body>
    In the spry effect dialogue, it will let me select the current img tag, but if i were to specify a second class
    <style>
    img.color {color:#fffff}
    img.opacity {opacity:50}
    </style>
    <body>
    <img src="image.jpg" class="img.color img.opacity" img />
    </body>
    then it wouldnt work because it can only recognize the current selection instead of the individual styles like i can do with an ID (which wont work for multiple styles as there can be only one id per element).

    It makes it very hard for us to know what you are trying to achieve without seeing some code hence I shall give you some code to work with
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    </head>
    <body>
    <img src="header.jpg" onClick="MM_effectAppearFade(this, 1000, 100, 0, false)">
    <script src="SpryAssets/SpryEffects.js"></script>
    <script>
        function MM_effectAppearFade(targetElement, duration, from, to, toggle)
            {Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}
    </script>
    </body>
    </html>
    Just copy and paste the above code into a new document, make sure that you do have SpryEffects.js in the SpryAssets folder and try it out.
    Gramps

  • Spry Effects

    I am using the Grow/Shrink behavior from Spry Effects in
    Dreamweaver. I am trying to grow an image from 20% to 100% but the
    image appears in the browser at a 100% then when I click on it it
    then appears at 100% and grows to 100%. Is it possible to get the
    image to appear at 20% on the page and only grow when I click on
    the image.

    gregmccarthy wrote:
    > Thanks, that works beautifully. Kinda thought that was
    what was needed but was not sure exactly how to do it - it is a
    shame that how to books that you pay good money for don't explain
    that.
    As somebody who writes books, I can tell you why. My
    "Essential Guide to
    DW CS3" devotes about 250 pages to Spry, almost certainly
    than any other
    book on the market; but I don't include that technique. If I
    tried to do
    so, my 750 page book would probably be 7,500 pages long, and
    would be
    published a couple of years late.
    One of the great things about web design is that you can do a
    lot of
    amazing things by experimenting. But you need to have a firm
    grasp of
    the basic technology to be able to do so. That's one of the
    main things
    you can learn from books. I had no idea how to create the
    effect that
    you wanted, but I did know how to apply a Spry effect. I sat
    and thought
    about the problem for about two minutes, tested my theory,
    and was
    delighted to discover that it worked. Devising new techniques
    rarely
    goes as quickly as that, but that's the challenge - and fun -
    part of it.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • 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">
    <!--
    .TabbedPanelsContent {
    background-color: #006699;
    .cool {
    background-color:#993366;
    position:absolute;
    left: 20px;
    top: 10px;
    -->
    </style>
    <script type="text/javascript">
    <!--
    function TabbedPanelsCycler(tp)
    this.tp = tp;
    this.timerID = 0;
    this.interval = 5000; // Milliseconds
    TabbedPanelsCycler.prototype.start = function()
    this.stop();
    var self = this;
    this.timerID = setTimeout(function() { self.next(); },
    this.interval);
    TabbedPanelsCycler.prototype.stop = function()
    if (this.timerID)
    clearTimeout(this.timerID);
    this.timerID = 0;
    TabbedPanelsCycler.prototype.next = function()
    var tp = this.tp;
    Spry.Effect.DoFade('Content' + (tp.getCurrentTabIndex()+1) %
    tp.getTabbedPanelCount(), {duration: 1000, from: 100, to: 0,
    toggle: false, finish: function(){
    var el = document.getElementById('Content' +
    ((tp.getCurrentTabIndex() + 1) % tp.getTabbedPanelCount()));
    tp.showPanel((tp.getCurrentTabIndex()+1) %
    tp.getTabbedPanelCount()); // 1, 2, 3, 4, 0 ... loop
    Spry.Effect.DoFade('Content' + (tp.getCurrentTabIndex() + 1)
    % tp.getTabbedPanelCount(), {duration: 1000, from: 0, to: 100,
    toggle: false});
    if (this.timerID)
    this.start();
    TabbedPanelsCycler.prototype.previous = function()
    var tp = this.tp;
    var curIndex = tp.getCurrentTabIndex();
    tp.showPanel(((curIndex < 1) ? tp.getTabbedPanelCount() :
    curIndex) - 1);
    if (this.timerID)
    this.start();
    function MM_effectAppearFade(targetElement, duration, from,
    to, toggle)
    Spry.Effect.DoFade(targetElement, {duration: duration, from:
    from, to: to, toggle: toggle});
    var dsFeaturebox1 = new
    Spry.Data.XMLDataSet("assets/xml/featurebox_data.xml",
    "featurebox/feature1");
    //-->
    </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">
    <!--
    var tp1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var cycler = new TabbedPanelsCycler(tp1);
    //-->
    </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!

  • Why does adobe premier elements render my video everytime i change something in it even when i have lots more of the video to edit? other editing software only seems to render at the start then lets you edit until your ready to save at the end.  Constant

    why does adobe premier elements render my video everytime i change something in it even when i have lots more of the video to edit? other editing software only seems to render at the start then lets you edit until your ready to save at the end.  Constant rendering means its almost impossible to edit anything. Please help.

    H TheGamer
    What version of Premiere Elements and on what computer operating system is it running? It will not influence my answer but will give me information in case I need to get into version specifics to detail my answer further.
    Timeline rendering is a preview matter. It does not fix anything, but it is your window of opportunity to catch of problem sooner than latter. If the Timeline rendering indicator displays orange (11 or higher) for the line above the Timeline content, that is the project telling you that you are not getting the best possible preview of the playback of that content in the Edit area monitor. And, every time you edit a file, you have altered the file from the time before. So, if you want to see the best possible for what you now have, you Timeline render. This is particularly helpful when you are dealing with titles, effects, transitions, and non native formats. You cannot turn off the Timeline render indicator system, at least none that I have ever found nor seen reported. You can do selective Timeline rendering by having the gray tabs of the Work Area Bar span only the Timeline segment that you want Timeline rendered.
    Consequently, you either ignore the Timeline render indicator system, move on in the project, and take your chances in the outcome or you Timeline render to get your best possible preview if the Timeline render indicator is suggesting that you do so.
    I am not approving or disapproving of this project feature, just commenting on the what is.
    This is not Adobe. Rather user to user. If you want to have your voice heard at Adobe, you might consider filing an Adobe Feature Request Bug Report Form.
    https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
    Please consider.
    ATR
    Add On...it is also possible to do Timeline rendering in a project, save close the project, and reopen it to find your previously "green" lined content now "orange", indicating unrendered. Yet the preview files generated originally by Timeline rendering are still existing in their hard drive save location. That is another story for other time.

  • 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.

  • Spry.Effect.Slide - cannot set initial state.

    I have 3 div elements using the Spry.Effect.Slide effect. I
    use CSS to close 2 elements and leave 1 element open. It works fine
    in Firefox. But in IE7 when the hidden elements slide down to show,
    its still display of none!! In firefox, the elements are displayed
    fine when the slide effect is started. Below is my code.
    Is there another simple approach that will work in IE7?
    <style>
    #menuGroupAboutCompany { display:none; }
    #menuGroupAboutProducts {}
    #menuGroupMoreMatchpoint { display:none; }
    </style>
    <script type="text/javascript">
    var menuGroupAboutCompany_toggle = new
    Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
    '0%', to: '100%', toggle:true,
    setup:menuGroupInit('menuGroupAboutCompany') });
    var menuGroupAboutProducts_toggle = new
    Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
    toggle:true});
    var menuGroupMoreMatchpoint_toggle = new
    Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
    '0%', to: '100%', toggle:true, setup:menuGroupInit});
    </script>

    Sorry, previous code posting had some other code I was
    experimenting with. This is the current code that works in Firefox.
    <style>
    #menuGroupAboutCompany { display:none; }
    #menuGroupAboutProducts {}
    #menuGroupMoreMatchpoint { display:none; }
    </style>
    <script type="text/javascript">
    var menuGroupAboutCompany_toggle = new
    Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
    '0%', to: '100%', toggle:true});
    var menuGroupAboutProducts_toggle = new
    Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
    toggle:true});
    var menuGroupMoreMatchpoint_toggle = new
    Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
    '0%', to: '100%', toggle:true});
    </script>

  • Spry Effect Inside Accordion

    I've come across a little hiccup when using a Spry Effect inside an Accordion. I am creating a survey page with one question per accordion tab. Some of these questions have sub-questions based on a yes or no answer.
    I was able to use an onclick with a radio button to open a Spry Effect that will display more questions. The problem is that these questions are normally hidden and when the accordion renders it passes over the hidden content and ignores it when it is time for the onclick event to display them.
    I was able to get it to work with one set by making the accordion open to that tab by default first (which renders the content) and then hides the sub-questions. The Spry Effect then calls a javascript function to open the fist accordion tab using the setup trigger.
    But this doesn't seem to work for multiple Spry Effects on different tabs... am I missing something?
    I have a demo page here (click "yes" on question 3) -- http://tv.swirelive.com/survey/demo_survey.php

    Ok. I figured it out. I had to define the Spry Effects first and then the Accordion last.

  • Spry.Effect ERR: Element "undefined" not found

    http://demiurgical.fluctuation.net/development/test.html
    Hi guys,
    I used Spry Data, Tabbed Panels, and the very helpfull Tabbed
    Panels Extension that Kin provided. It works fine on both Firefox
    and IE, however, IE6 gives me an alert box of "Spry.Effect ERR:
    Element "undefined" not found 4 times but still working.
    How can I get rid of this?
    Thank you again,
    John

    Looking at Retrospective's code in test.html, I see that the
    error is due to the fact he had a script block in his region:
    <script type="text/javascript">
    <!--//
    var testtab = new Spry.Widget.TabbedPanels("testtab", {
    interval: 3000 });
    testtab.start();
    //-->
    </script>
    That executes immediately when the page is loaded, even
    before the region is processed. To get rid of the problem, all that
    has to be done is remove the script block and move its code into a
    region observer so that it gets exectued any time the region markup
    is re-generated. Here's how it should look:
    <html>
    <head>
    <script src="SpryTabbedPanels.js"
    type="text/javascript"></script>
    <script src="SpryTabbedPanelsExtensions.js"
    type="text/javascript"></script>
    <script src="xpath.js"
    type="text/javascript"></script>
    <script src="SpryData.js"
    type="text/javascript"></script>
    <script src="SpryEffects.js"
    type="text/javascript"></script>
    <link href="SpryTabbedPanels.css" rel="stylesheet"
    type="text/css" />
    <script type="text/javascript">
    <!--//
    var dsTest = new Spry.Data.XMLDataSet("test.xml",
    "Test/TestOne");
    dsTest.setColumnType("name", "html");
    Spry.Data.Region.addObserver("FeatureBoxHome", {
    onPostUpdate: function()
    var testtab = new Spry.Widget.TabbedPanels("testtab", {
    interval: 3000 });
    testtab.start();
    //-->
    </script>
    <title>Test</title>
    </head>
    <body bgcolor="#FFFFFF">
    <div id="FeatureBoxHome" spry:region="dsTest">
    <div id="testtab" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li spry:repeat="dsTest" class="TabbedPanelsTab"
    tabindex="0">{name}</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div spry:repeat="dsTest" class="TabbedPanelsContent"
    style="display: block;"> <a
    href="{feature_url}">{title}</a> <img src="{photo}">
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    --== Kin ==--

Maybe you are looking for

  • How to "get object" -- ResourceBundle

    According to the ResourceBundle API: ResourceBundle myResources =  ResourceBundle.getBundle("MyResources");Besides getString, ResourceBundle also provides ... a generic getObject method for any other type of object. When using getObject, you'll have

  • Can not connect iTunes Store message

    Hi, İ bought my iPad from US and it's sync. to Turkey conditions by itself. İt's been just 1 months, so i iTunes store gives a Message which says " can't connect to Store" and just one option, you need to pick "OK" button. on my user manuel says iTun

  • Sequence Settings, HD Export problems.

    1. I'm importing a perfectly good quality Quicktime Movie segment of about 150 MB 1344x840 H.264 codec Duration 00'55 ...in which it's perfectly easy to read small print in the movie. The source audio/video comes from the game World of Warcraft, and

  • Finder window opens on startup

    All of a sudden, a few days ago, I started getting an open finder window when starting up the computer. It doesn't do it every time; I think it does it the first time I start the computer on any given day. I do not have the finder set up as one of my

  • Why trackpad wakes iMac up from sleep after activating wi-fi despite I've unchecked this option at  bluetooth System Preferences?

    In the bluetooth advanced options at system preferences I've unchecked the item "Allow Bluetooth devices to wake this computer". My iMac is running Lion and sleep mode works fine, i.e. trackpad doesn't recall it from sleep, the Mac's back panel is co