Skip navigation
admoore77
Currently Being Moderated

Spry HTML Panel and Accordion

Jul 11, 2012 1:54 PM

Tags: #spry_accordion #spry_htmlpanel

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

 
Replies
  • Currently Being Moderated
    Jul 11, 2012 5:47 PM   in reply to admoore77

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 3:29 AM   in reply to admoore77

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points