0 Replies Latest reply on Apr 5, 2010 9:47 AM by ruthvik89

    Spry Detail Region With Effects Not Working


      I am trying to replicate this sample: http://labs.adobe.com/technologies/spry/samples/data_region/DetailRegionEffectsSample.html with an html data set and spry master-detail region, but I can't get it to work. Anyone know why?




      <!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" xmlns:spry="http://ns.adobe.com/spry" >
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>India Night XXV</title>
      <link rel="stylesheet" type="text/css" href="./home.css" media="all" />
      <!--[if IE]>
      <style type="text/css" media="all">.borderitem {border-style:solid;}</style>
      <style type="text/css">
      body,td,th {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 100%;
      <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
      <script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryMasterDetail.css" rel="stylesheet" type="text/css" />
      <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
      <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
      <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
      <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
      <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />


      <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
      <script type="text/javascript">
      var ds1 = new Spry.Data.HTMLDataSet("calendarList.html", "calendarList");


      var gEffectInProgress = null;
      var gPendingSetRowIDRequest = -1;


      function fadeInContent(notificationType, notifier, data)
          if (notificationType != "onPostUpdate")
          var effect = new Spry.Effect.Fade('DetailColumn', { to: 100, from: 0, duration: 500, finish: function() {
              // The region is now showing. Process any pending row change request.
              gEffectInProgress = null;
              if (gPendingSetRowIDRequest >= 0)
                  var id = gPendingSetRowIDRequest;
                  gPendingSetRowIDRequest = -1;


      Spry.Data.Region.addObserver('DetailColumn', fadeInContent);


      function fadeOutContentThenSetRow(rowID)
          // If we have an effect already in progress, don't do anything
          // We'll set the rowID when we're done.


          if (gEffectInProgress)
              gPendingSetRowIDRequest = rowID;


          // If the correct row is already showing, don't do anything!


          if (rowID == ds1.getCurrentRowID())


          gEffectInProgress = new Spry.Effect.Fade('DetailColumn', { to: 0, from: 100, duration: 500, finish: function() {








      <div id="main">
          <div id="banner">
          <br class="clearfloat" />
          <div id = "bodyarea" align="center">
          <div class="MasterDetail">
            <div spry:region="ds1" class="MasterContainer">
              <div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" onclick="fadeOutContentThenSetRow('{ds_RowID}');">{Menu}</div>
            <div spry:detailregion="ds1" class="DetailContainer">
              <div id="DetailColumn">{Picture}</div>
            <br style="clear:both" />
          <img src="images/adspace.png" id="adspace"  alt="" />
      <br class="clearfloat" />
          <div id="footer">
              <p>         </p>
              <h5>Copyright 2010 Ruthvik Basavaraj. Design by Chiraag Deora.</h5>