13 Replies Latest reply: Apr 4, 2011 6:40 AM by ina@nateurope.com RSS

    How to open Accordion by row select using Products Demo Example



      I have the products demo http://labs.adobe.com/technologies/spry/demos/products/ that comes with the spry examples setup on this site: www.t-plan.com...


      You will see that the Accordion has been set to be collapsed on initial page load.


      However what I would like to do is when someone selects / mouseover a product in the side panel - that this action actually open the accordion below and displays the Product Overview etc.


      Please help.. I have been googling for hours... I have found examples to open individual accordions based on their ID or name in this article: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

      This page prompts a use of: "<a href="#" onclick="acc1.openFirstPanel(); return false;">First</a>"


      I think the problem here is that because the spry example uses the SpryData and SpryHTMLDataSet to load the html from the page... the accordions are not numbered?


      I am not a developer and have got this far... last steps are always the hardest!


      Thanks in advance,



        • 1. Re: How to open Accordion by row select using Products Demo Example
          Ben Pleysier MVP


          <!DOCTYPE html>
          <title>Untitled Document</title>
          <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
          html {height: 100%;    overflow-y: scroll;}
          body{margin: 30px auto; width: 960px; background: #CF6; height: 100%;}
          .col30{float: left; width: 29%;}
          .col70{float: right; width: 69%;}
          <div class="col30">
            <div><a href="#" onmouseover="Accordion1.openPanel(0); return false;">Open first panel</a></div>
            <div><a href="#" onmouseover="Accordion1.openPanel(1); return false;">Open second panel</a></div>
          <div id="Accordion1" class="Accordion col70" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab">Label 1</div>
              <div class="AccordionPanelContent">Content 1</div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab">Label 2</div>
              <div class="AccordionPanelContent">Content 2</div>
          <script src="SpryAssets/SpryAccordion.js"></script>
          <script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });</script>


          • 2. Re: How to open Accordion by row select using Products Demo Example
            Wheech Community Member


            Apologies for the late reply... having to reply via email as I do not seem

            to be able to sign into the forums.

            Thanks for your post.

            I just cannot seem to make this work. I understand that I can rewrite the

            adobe products demo to suit your code... but how do I put your excellent

            reply into the adobe products demo example.

            I am no developer but the problem I think I am having is that the accordion

            div's are programmatically created in the dsproducts function using the

            spryhtmddataset.js and the sprydata.js from what I can see.


            The var acc = new Spry.Widget.Accordion("Acc1", ); is actually defined in the "products.js" as well as the

            collection of data pumped into the accordion. This in turn calls the

            products_template.html to use for formatting of the data etc.


            Knowing this though I just cannot see where to put your code to call the

            accordion panel to open: var acc = new Spry.Widget.Accordion("Acc1", );</script>

            into the index.html to declare the var I then get the following error (due I

            think because the accordion format is declared in the products_template.html


            Message: Object required

            Line: 418

            Char: 2

            Code: 0

            URI: http://localhost/t-plan/SpryAssets/SpryAccordion.js

            If I try to place the above code into the products_template.html file...

            nothing seems to happen as I think what I put there is getting stripped as

            it has not been declared as included in the products.js file...


            I am just going round in circles...


            Please help....













            • 3. Re: How to open Accordion by row select using Products Demo Example
              Ben Pleysier MVP

              Hi Charlie,


              It is very hard to judge the competency level of the posters to this forum. Sometimes the poster is confused because the answer is leveled at a higher level; other times the poster complains of a condescending attitude. My apologies.


              The example I gave was to show that it could be done.


              The important parts in my example are

                <a href="#" onmouseover="Accordion1.openPanel(0); return false;">Open first panel</a>
                <a href="#" onmouseover="Accordion1.openPanel(1); return false;">Open second panel</a>

              These are the links that will open the relevant panel when they receive a mousover event. Accordion1 can be renamed to whatever you have ID'd your accordion namely Acc1. Open first panel and Open second panel can be changed - even replaced with an image.


              The next important part is

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

              where useFixedPanelHeights: false is important for it to work and defaultPanel: -1 makes sure that all panels are closed when the page is loaded. As above Accordion1 should be renamed to Acc1.


              I hope this helps,


              • 4. Re: How to open Accordion by row select using Products Demo Example
                Wheech Community Member

                No need to apologise Gramps! I am just thankful for any help or suggestions I get...


                However... I understand what you have put... but in relation to the products demo example from Adobe I am still unsure what file these links should go in.


                If I put your links in the products_template.html file they do not get rendered. If I place them in the main html page where the data is I get the errors as I mentioned before.

                Where and how should I be calling the accordion rows to open? there must be a way as you can set them to open on default...




                • 5. Re: How to open Accordion by row select using Products Demo Example
                  Ben Pleysier MVP



                  I am confused. When I look at the site www.t-plan.com I do not see a Spry accordion nor do I see the Spry products demo.


                  Please bear with an old man, what is it exactly what you want to do on your site.



                  • 6. Re: How to open Accordion by row select using Products Demo Example
                    Wheech Community Member


                    Thanks for bearing with me...

                    I have used the products demo from adobe and placed it on the right hand side of the home page.

                    Under where it says T-plan Product Suite there is a table listing the 3 products and then under the changing images are the 2 accordions for Product overview and New features.

                    When I hover over the listed products I would like the first accordion to open so people know that there is more information to read.

                    Hope this makes sense and thanks again.


                    • 7. Re: How to open Accordion by row select using Products Demo Example
                      Ben Pleysier MVP

                      As much as I would like to help, you are not using any form of SpryAccordion in your document despite link to the JS file for same.


                      The only Spry widget that you are using is the SpryMenuBar as can be seen with the use of the following constructor

                      <script type="text/javascript">
                      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                      There is no such constructor for the accordion widget.


                      Thus I cannot help you my friend.


                      • 8. Re: How to open Accordion by row select using Products Demo Example
                        Wheech Community Member


                        Thanks for your help... however I am using the Adobe Spry Products Demo as per this example: http://labs.adobe.com/technologies/spry/demos/products/

                        If you see the previous link you will see that it is exactly the same as what I have incorporated into my site.

                        Perhaps you have had no experience of this method... and thanks for your help.

                        You have rightly though said that I am also using the spry menu for the menu links.

                        Thanks again,


                        • 9. Re: How to open Accordion by row select using Products Demo Example
                          Ben Pleysier MVP

                          With reference to the link to the Products Demo Example, at the bottom of the document you will notice

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

                          which means that an instance of the Spry.Widget.Accordion has been created. This I could not find in your document which means that you have not created an instance of name widget.


                          Of course I could be wrong (age related), in which case I would love you to point this out.



                          • 10. Re: How to open Accordion by row select using Products Demo Example
                            Wheech Community Member

                            Sorry Gramps... my bad... I did not take into account that the link for the products demo was for a previous version of spry... I cannot find one online for Spry_1_6_1_022408.

                            In this version I believe they moved the script logic to the "products.js" file that I have copied below:

                            (You will see that this is referenced in line 126 "<script type="text/javascript" src="Scripts/adobespryproducts/products.js"></script>")

                            It is this file that creates the "var acc = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights:false});"

                            // products-03.js - version 0.1 - Spry Pre-Release 1.6.1
                            // Create an HTML data set that can turn the static product markup in the
                            // page, into data that can be re-purposed.

                            var dsProducts = new Spry.Data.HTMLDataSet(null, "productListing", {firstRowAsHeaders:false, rowSelector:".product", dataSelector:".boximage, .category, h2, .productdescription, .featureslist", columnNames:["boximage","category","name","description","features"]});

                            // Add an observer to the dsProducts data set so we know when it is done
                            // loading its data. Once it is done loading, we want to *replace* the content
                            // inside the "productListing" container with an HTML fragment, which contains
                            // several region templates, that we will load dynamically.

                            dsProducts.addObserver({onPostLoad: function(notificationType, notifier, data)
                            // Load the HTML fragment that contains our region templates.

                            Spry.Utils.updateContent("productListing", "products_template.html", function()
                              // Tell Spry to process the regions.


                              // If an HTML data set loads its data from markup embedded in the page,
                              // it automatically hides the data source with display:none. Since we
                              // are re-using the same container as the data source, we need to make
                              // sure that it shows, so set its display to "block".

                              Spry.$('productListing').style.display = "block";

                              // The HTML fragment we loaded contains markup for an Accordion. Create
                              // an Accordion widget to attach the appropriate behaviors to that markup.

                              var acc = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights:false});

                            // Turn off the automatic region processing that occurs when a page includes
                            // SpryData.js. We will manually trigger the processing *after* the HTML fragment
                            // is loaded and inserted into the document.

                            Spry.Data.initRegionsOnLoad = false;

                            // Tell the HTML data set to load its data source as soon as the onload
                            // event fires. This kicks off the whole transformation of the document.

                            Spry.Utils.addLoadListener(function(){ dsProducts.loadData(); });


                            Thanks again for the help on this... sorry to be a pain...


                            • 11. Re: How to open Accordion by row select using Products Demo Example
                              Ben Pleysier MVP



                              You have proved that I was wrong, I did not realise that part of the JS had been externalised.


                              In my example I showed you to change the constructor to (adjusted to suit your situation)

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

                              and to add a mouse event to the part that changes the data within the accordion as per

                              <div class="productfont" onmouseover="Acc1.openPanel(0); return false;>Professional</div>



                              • 12. Re: How to open Accordion by row select using Products Demo Example
                                Wheech Community Member

                                Gramps - Again thanks for sticking with me!


                                In products.js I have: "var acc = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights:false, defaultPanel: -1});"
                                I understand that defaultPanel: -1 changes the accordion to be closed at fist load which is great (I actually had this declared somewhere else, but to now declare this here is better - thanks...)




                                "<div class="productfont" onmouseover="Acc1.openPanel(0); return false;">Professional</div>" now gives Javascript error in window of:

                                "Webpage error details

                                User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; MS-RTC LM 8)
                                Timestamp: Wed, 15 Dec 2010 15:35:59 UTC

                                Message: Object doesn't support this property or method
                                Line: 10
                                Char: 1
                                Code: 0
                                URI: http://localhost/t-plan/index.html"


                                Line 10 is very strange and I cannot for the life of me work out why...


                                Seems like you are now so close to the solution as this believe it or not feels the closest I have come so far to cracking this rather tough nut.


                                Many thanks in advance,


                                • 13. Re: How to open Accordion by row select using Products Demo Example

                                  Hi Charlie,


                                  sorry, I thought I might get an answer in your dialogue ...  I couldn't give an answer but I really like the arrows in the headlines (top tabs) of the Spry menue (before product overview and product features.) showing the user that there is some content. Would you mind to tell me how to implement them on my website.


                                  Thx in advance, I.