3 Replies Latest reply on Apr 7, 2010 10:52 AM by WRobN1

    Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

    WRobN1 Level 1

      Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?

       

      Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent

       

      And click on the "Using Spry.Utils.updateContent()"

       

      The 3rd example shows how to use a fade transition whenever the content changes.

       

      I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.

       

      Tabs code;

      <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab">
                     <table class="Button"  >
                          <tr>
                          <td style="padding-right:0px" title ="Home">
                          <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                          </td>
                          </tr>
                     </table>
                </li>
      etc
      etc
      etc
      

       

      and the panel code:

      <div class="TabbedPanelsContent" id="Home">
           CONTENT
      </div>
      

       

      I hoped i can use the example code from the link into my tabbed panels.

       

      I thought this code:

      onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
      
      

       

      could be added to the tab code like this:

      <a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
      

       

      But the content doesnt fade...

       

      I know i need to change the header etc.

      The following is from the link:

      <!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>Aquo Events</title>
      <script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
      <script src="../../../includes/SpryData.js" type="text/javascript"></script>
      <script type="text/javascript">
      <!--
      
      function FadeAndUpdateContent(ele, url)
      {
      try {
           Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
                Spry.Utils.updateContent(ele, url, function() {
                          Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
                });
           }});
      }catch(e){ alert(e); }
      }
      
      -->
      </script>
      <style type="text/css">
      /* IE HACK to prevent bad rendering when fading. */
      #event { background-color: white; }
      </style>
      </head>
      
      

       

      So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...

       

       

      Is there a way to keep my tabbed panel (or change as less as possible) and let

       

      A. The fade work

      B. The loading work.

       

      ???

       

      The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.

      And the fading part is just because its nice...