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

    Spry Detail Region With Effects Not Working

    ruthvik89

      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?

       

      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" xmlns:spry="http://ns.adobe.com/spry" >
      <head>
      <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>
      <![endif]-->
      <style type="text/css">
      <!--
      body,td,th {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 100%;
      }
      -->
      </style>
      <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")
              return;
          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;
                  fadeOutContentThenSetRow(id);
              }
          }});
          effect.start();
      }

       

      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;
              return;
          }

       

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

       

          if (rowID == ds1.getCurrentRowID())
              return;

       

          gEffectInProgress = new Spry.Effect.Fade('DetailColumn', { to: 0, from: 100, duration: 500, finish: function() {
              ds1.setCurrentRow(rowID);
          }});
          gEffectInProgress.start();
      }

       


      //-->
      </script>

       


      </head>

       

      <body>

       

      <div id="main">
          <div id="banner">
        </div>
          <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>
            <div spry:detailregion="ds1" class="DetailContainer">
              <div id="DetailColumn">{Picture}</div>
            </div>
            <br style="clear:both" />
         
          </div>
         
      </div>
          <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>
          </div>
      </div>

       

       

       

      </body>
      </html>