3 Replies Latest reply: Jul 12, 2012 11:29 AM by admoore77 RSS

    Spry HTML Panel and Accordion

    admoore77

      I am using the spry html panel widget to load content into a div on my page. In the content that gets loaded, I have accordion panels. How can I automatically open a given panel when I load the content.

       

      For example, currently I use onClick="mine.loadContent('appeals.html') to load the content.

       

      I thought I could use getLocationParamsAsObject and have onClick="mine.loadContent('appeals.html?panel=1#Accordion1'), but I cant get this to work nor do I know if it is possible or the correct method to use.

       

      Thanks for any help you can give!

       

      - Adam

        • 1. Re: Spry HTML Panel and Accordion
          Ben Pleysier MVP

          HTMLPanel is exactly that, a way of including HTML into your document. Under certain circumstances (not all) you will be able include JS by adding the parameter to the constructor.

           

          I find the HTMLPanel too restrictive for me to have ever had any use for it. You are better off including the Accordion in your document and applying a show/hide behaviour to it.

           

          Gramps

          • 2. Re: Spry HTML Panel and Accordion
            MyDreamweaverExtensions Community Member

            You can do it with the HTML Panel, but it is a bit complex if you do not know JavaScript and Spry quite well. Contrary to Gramps, I love the HTML Panel widget and use it a lot to add Ajax to my pages. But you really have to dig into the documentation and into the code to get to know this widget and learn to use it.

            Note also the use of the SpryURLUtils.js file.

             

            Here is a main test page :

             

            <!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>Spry HTML Panel and Accordion</title>

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

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

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

            <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

            <link href="SpryAssets/SpryHTMLPanel.css" rel="stylesheet" type="text/css">

            </head>

             

             

            <body>

            <p><a href="loadMe.html?panel=1" onclick="hpanel.loadContent(this.href, {id:'loadMeId'}); return false;">Click to load the Accordion and open the 2nd panel</a></p>

            <div id="samplePanel">This is default content for the HTML Panel.</div>

            <script type="text/javascript">

            var hpanel = new Spry.Widget.HTMLPanel("samplePanel");

            var params;

             

             

            // Add an object as an observer of the panel.

            var obs = new Object;

            obs.onPreLoad = function (notifier, data) {

                      params = Spry.Utils.getURLParamsAsObject(data.url);

            }

            obs.onPostUpdate = function(notifier, data) {

                      var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: params.panel });

            };

            hpanel.addObserver(obs);

            </script>

            </body>

            </html>

             

            And the file to be loaded:


            <!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>Document sans nom</title>

            </head>

             

             

            <body>

            <div id="loadMeId">

              <div id="Accordion1" class="Accordion" tabindex="0">

                <div class="AccordionPanel">

                  <div class="AccordionPanelTab">Label 1</div>

                  <div class="AccordionPanelContent">Content 1</div>

                </div>

                <div class="AccordionPanel">

                  <div class="AccordionPanelTab">Label 2</div>

                  <div class="AccordionPanelContent">Content 2</div>

                </div>

              </div>

            </div>

            </body>

            </html>

             

            Regards,

            Xavier

            • 3. Re: Spry HTML Panel and Accordion
              admoore77 Community Member

              This works great. Although, I am using the var hpanel = new Spry.Widget.HTMLPanel("samplePanel"); for all the pages that I am loading based on the link they click and not all pages have accordions in them, so it is giving me a javascript error on the pages without an accordion.

               

              Also, I set my default panel to -1, {defaultPanel: params.panel ? params.panel: -1} and am unable to open panel=0.

               

              Thanks for all your help!

               

              - Adam