9 Replies Latest reply on Jan 14, 2009 7:17 PM by Newsgroup_User

    Accordion Spry Widget default loading behaviour

    Level 7
      Am using the accordion spry widget to display some spring/summer courses and
      I need all panels closed when the page first loads. I've tried to find the
      relevant code, but have not been successful in changing it to make this
      work. If I change the behaviour of the 'this.defaultPanel' the whole
      accordion stops working. How can I change the accordion behaviour to have
      all panels closed at page load?

      Thanks for any help.

      Marianne



        • 1. Re: Accordion Spry Widget default loading behaviour
          Level 7
          Marianne,

          This should help:

          http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed

          --
          Ken Ford
          Fordwebs, LLC
          Adobe Community Expert - Dreamweaver/ColdFusion
          Adobe Certified Expert - Dreamweaver CS3
          Adobe Certified Expert - ColdFusion 8
          http://www.fordwebs.com
          http://www.cfnoob.com


          "forums.macromedia.com" <marianne@NOSPAM__compuscribe.com> wrote in message news:gffk4g$khm$1@forums.macromedia.com...
          > Am using the accordion spry widget to display some spring/summer courses and
          > I need all panels closed when the page first loads. I've tried to find the
          > relevant code, but have not been successful in changing it to make this
          > work. If I change the behaviour of the 'this.defaultPanel' the whole
          > accordion stops working. How can I change the accordion behaviour to have
          > all panels closed at page load?
          >
          > Thanks for any help.
          >
          > Marianne
          >
          >
          >
          • 2. Re: Accordion Spry Widget default loading behaviour
            Level 7
            I am such a poor searcher, I didn't find this although I looked... :-)
            Thanks!

            Marianne

            "Ken Ford - *ACE*" <newsgroups2@fordwebs.com> wrote in message
            news:gffla3$m1s$1@forums.macromedia.com...
            > Marianne,
            >
            > This should help:
            >
            > http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
            >
            > --
            > Ken Ford
            > Fordwebs, LLC
            > Adobe Community Expert - Dreamweaver/ColdFusion
            > Adobe Certified Expert - Dreamweaver CS3
            > Adobe Certified Expert - ColdFusion 8
            > http://www.fordwebs.com
            > http://www.cfnoob.com
            >
            >
            > "forums.macromedia.com" <marianne@NOSPAM__compuscribe.com> wrote in
            > message news:gffk4g$khm$1@forums.macromedia.com...
            >> Am using the accordion spry widget to display some spring/summer courses
            >> and I need all panels closed when the page first loads. I've tried to
            >> find the relevant code, but have not been successful in changing it to
            >> make this work. If I change the behaviour of the 'this.defaultPanel' the
            >> whole accordion stops working. How can I change the accordion behaviour
            >> to have all panels closed at page load?
            >>
            >> Thanks for any help.
            >>
            >> Marianne
            >>
            >>
            • 3. Re: Accordion Spry Widget default loading behaviour
              pcgs
              Hi Ace,
              I would also like to make a Spry accordion widget be closed on page load. I went to your that Adobe Labs link and put the code I found there in the head of my HTML document. Dreamweaver didn't like it.

              Got this message:

              This document contains JavaScript code for a widget that no longer exists. If ou don't remove the code the browser might display errors when loading the page. Would you like Dreamweaver to find all instances of this code for you?

              Widget: var acc1 = new
              Spry.Widget.Accordion("Acc1", {
              useFixedPanelHeights: false, defaultPanel: -1
              });

              Test page here:
              http://www.priscillachristian.com/n10/LHESC2/closed.html (see line 48)
              Have I given you enough information to know what I'm doing wrong? Thanks.
              • 4. Re: Accordion Spry Widget default loading behaviour
                Level 7
                You are using 1.4 scripts and CSS so you need to download and install the Spry 1.6.1 Updater for Dreamweaver:

                http://www.macromedia.com/go/labs_spry_download

                Then you have the following on the page and it needs to be deleted:

                <script>
                var acc1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
                </script>

                And near the bottom you have this:

                <script type="text/javascript">
                <!--
                var Accordion1 = new Spry.Widget.Accordion("Accordion1");
                //-->
                </script>

                Change it to this:

                <script type="text/javascript">
                <!--
                var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
                //-->
                </script>


                --
                Ken Ford
                Fordwebs, LLC
                Adobe Community Expert - Dreamweaver/ColdFusion
                Adobe Certified Expert - Dreamweaver CS3
                Adobe Certified Expert - ColdFusion 8
                http://www.fordwebs.com
                http://www.cfnoob.com


                "pcgs" <webforumsuser@macromedia.com> wrote in message news:gfpn3e$gs0$1@forums.macromedia.com...
                > Hi Ace,
                > I would also like to make a Spry accordion widget be closed on page load. I
                > went to your that Adobe Labs link and put the code I found there in the head of
                > my HTML document. Dreamweaver didn't like it.
                >
                > Got this message:
                >
                > This document contains JavaScript code for a widget that no longer exists. If
                > ou don't remove the code the browser might display errors when loading the
                > page. Would you like Dreamweaver to find all instances of this code for you?
                >
                > Widget: var acc1 = new
                > Spry.Widget.Accordion("Acc1", {
                > useFixedPanelHeights: false, defaultPanel: -1
                > });
                >
                > Test page here:
                > http://www.priscillachristian.com/n10/LHESC2/closed.html (see line 48)
                > Have I given you enough information to know what I'm doing wrong? Thanks.
                >
                • 5. Re: Accordion Spry Widget default loading behaviour
                  pcgs Level 1
                  Thanks Ken! Works great!
                  • 6. Re: Accordion Spry Widget default loading behaviour
                    Level 7
                    Yep, thanks Ken, that works great. Solved my problem with display in FF
                    too... :-)

                    M..

                    "pcgs" <webforumsuser@macromedia.com> wrote in message
                    news:gfprq0$mqp$1@forums.macromedia.com...
                    > Thanks Ken! Works great!

                    • 7. Re: Accordion Spry Widget default loading behaviour
                      Hello! I have been reading up on this and playing around with the code for a few hours now and I can't seem to make it work. Basically I would like to have the accordion load collapsed, and get rid of the fixed height. Any clue what I'm missing?

                      Thanks!

                      Hello! I have been reading up on this and playing around with the code for a few hours now and I can't seem to make it work. Basically I would like to have the accordion load collapsed, and get rid of the fixed height. Any clue what I'm missing?

                      Thanks!




                      <!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>Lorem Ipsum : about us</title>
                      <style type="text/css">
                      <!--
                      -->
                      </style>
                      <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
                      <script type="text/javascript">
                      <!--
                      function MM_preloadImages() { //v3.0
                      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                      var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                      if (a .indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
                      }
                      function MM_swapImgRestore() { //v3.0
                      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a )&&x.oSrc;i++) x.src=x.oSrc;
                      }
                      function MM_findObj(n, d) { //v4.01
                      var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms
                      [n];
                      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers .document);
                      if(!x && d.getElementById) x=d.getElementById(n); return x;
                      }

                      function MM_swapImage() { //v3.0
                      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                      if ((x=MM_findObj(a
                      ))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                      }
                      //-->
                      </script>
                      <link href="css/main.css" rel="stylesheet" type="text/css" />
                      <style type="text/css">
                      <!--
                      -->
                      </style>
                      <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
                      <style type="text/css">
                      <!--
                      a:link {
                      color: #036;
                      text-decoration: none;
                      }
                      a:visited {
                      text-decoration: none;
                      color: #036;
                      }
                      a:hover {
                      text-decoration: none;
                      color: #FFF;
                      }
                      a:active {
                      text-decoration: none;
                      color: #036;
                      }
                      -->
                      </style></head>

                      <body onload="MM_preloadImages('images/menu_images/nav_a2_f2.jpg','images/menu_images/nav_a3_f2 .jpg','images/menu_images/nav_a4_f2.jpg','images/menu_images/nav_a5_f2.jpg','images/menu_i mages/nav_a6_f2.jpg')">
                      <div id="homebg">
                      <div id="spry1">
                      <div id="Accordion2" class="Accordion" tabindex="0">
                      <div class="AccordionPanel">
                      <div class="AccordionPanelTab"><img src="images/spry_background/about_spry1.jpg" width="747" height="35" alt="Vision / Purpose / Mission" /></div>
                      <div class="AccordionPanelContent">
                      <table width="744" height="179" border="0">
                      <tr>
                      <td width="95" height="175"> </td>
                      <td width="581" valign="top" bgcolor="#C2CAD2"><p><strong>Vision:</strong> Lorem Ipsum Dolor</p>
                      <p><strong>Purpose:</strong> Lorem ipsum dolor.</p></td>
                      <td width="54"> </td>
                      </tr>
                      </table>
                      </div>
                      </div>
                      <div class="AccordionPanel">
                      <div class="AccordionPanelTab"><img src="images/spry_background/about_spry2.jpg" width="746" height="34" alt="Guiding Principles / Core Values" /></div>
                      <div class="AccordionPanelContent">
                      <table width="744" height="388" border="0">
                      <tr>
                      <td width="95"> </td>
                      <td width="581" valign="top" bgcolor="#C2CAD2"><p><strong>Integrity</strong><br />
                      Lorem Ipsum</p>
                      <p><strong>Understanding</strong><br />
                      Lorem Ipsum</p>
                      <p> <strong>Innovation</strong><br />
                      Lorem Ipsum</p>
                      <p><strong>Perseverance</strong><br />
                      Lorem Ipsum</p>
                      <p><strong>Simplicity</strong><br />
                      Lorem Ipsum</p>
                      <p> <strong>Lorem Ipsum</strong></p></td>
                      <td width="54"> </td>
                      </tr>
                      </table>
                      </div>
                      </div>
                      <div class="AccordionPanel">
                      <div class="AccordionPanelTab"><img src="images/spry_background/about_spry3.jpg" width="746" height="34" alt="Lorem Ipsum" /></div>
                      <div class="AccordionPanelContent">
                      <table width="744" height="388" border="0">
                      <tr>
                      <td width="95"> </td>
                      <td width="581" valign="top" bgcolor="#C2CAD2"><p><strong>Lorem Ipsum</strong><br />
                      <br />
                      <br />
                      <a href="mailto:blahblah</a></p>
                      <p><strong>Lorem Ipsum</strong><br />
                      <br />
                      <br />
                      <a href="mailto:blahblah"</a></p>
                      <p><strong></strong><br />
                      Manager<br />
                      9<br />
                      <a href="mailto:blahblah</a></p></td>
                      <td width="54"> </td>
                      </tr>
                      </table>
                      </div>
                      </div>
                      </div>
                      <h6></h6>
                      </div>
                      <div id="text">
                      <h1>about us
                      <p>Lorem Ipsum </h1>
                      <p> </p>
                      </div>


                      <img src="images/bg_images/bg_interior.jpg" width="1374" height="931" /></div>

                      <script type="text/javascript">
                      <!--
                      var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: -1 });
                      //-->
                      </script>
                      </body>
                      </html>
                      • 8. Re: Accordion Spry Widget default loading behaviour
                        Chad_Keller Level 1
                        Using the Spry accordion widget as well and would like to know how to stop the animation from occurring when you don't have sub-links in the "PanelContent" div in IE7. I have 3 links and only 1 of them has sub-links. In FF when you click on a link w/o sub-links the animation doesn't occur, but in IE7 it does. I tried removing the "PanelContent" div from the page, but this causes the menu to no longer work at all. Any help is appreciated.

                        Don't want to hijack the thread, so let me know if I should start a new one.
                        • 9. Re: Accordion Spry Widget default loading behaviour
                          Level 7
                          I don't know how Adobe does it, but here is how we do it:
                          http://www.projectseven.com/testing/customers/andrea11/

                          Click the "What's New" link.

                          --
                          Al Sparber - PVII
                          http://www.projectseven.com
                          The Finest Dreamweaver Menus | Galleries | Widgets
                          http://www.projectseven.com/go/pop
                          The Ultimate DW Menu System




                          "Chad Keller" <webforumsuser@macromedia.com> wrote in message
                          news:gklk3a$spr$1@forums.macromedia.com...
                          > Using the Spry accordion widget as well and would like to know how to stop
                          > the
                          > animation from occurring when you don't have sub-links in the
                          > "PanelContent"
                          > div in IE7. I have 3 links and only 1 of them has sub-links. In FF when
                          > you
                          > click on a link w/o sub-links the animation doesn't occur, but in IE7 it
                          > does.
                          > I tried removing the "PanelContent" div from the page, but this causes the
                          > menu
                          > to no longer work at all. Any help is appreciated.
                          >
                          > Don't want to hijack the thread, so let me know if I should start a new
                          > one.
                          >