18 Replies Latest reply: Apr 8, 2010 7:27 AM by amitjoc RSS

    Accordian left to right oientation possible

    jefbak Community Member
      Has anyone tried to make a panels stack left to right horizontally instead of the default vertical orientation?
      I see some other ajax tools for this, but I am hoping to stick with Spry if I can.

      I can't figure out how to make the css do this with spry accordians (or any of the spry panels for that matter).
        • 1. Accordian left to right oientation possible
          deejayMK Community Member
          Yes, it can be done. You should alter not only the css file but also the javascript file. There is actually a working version on my site. You can use that.

          A few remarks:
          The horizontal version needs more css rules than the vertical one. I introduced a extra div level within the ContentPanel with it's own css rule to prevent the text from collapsing. I've called it AccordionPanelContentFixed.

          Because of the horizontal orientation there are several float:left css rules and width is defined for several divs. If you change them take for granted that the width's are linked to each other. This is because browser are more vertical oriented with text than horizontal ;-)

          The text in the tab cannot be vertically positioned with css rules. You should use images instead

          You should change the javascript constructor for the Accordion to

          var acc = new Spry.Widget.Accordion("acc", {verticalDirection :false}); // default is a vertical accordion

          I havent written a article on this but if you need more explanation feel free to ask. Right now I busy rewriting the Accordion, Sliding and Tabbed panels to a more consistent model. It will contain the horizontal accordion as well.

          ps. you can see it in real action at a website of a friend of mine www.schutte.name
          • 2. Re: Accordian left to right oientation possible
            jefbak Community Member
            Awesome! Thanks!
            I was playing around with the left float as well. This is just the functionality I needed.
            • 3. Re: Accordian left to right oientation possible
              Arnout Kazemier Community Member
              The accordion is flashing in safari :)
              • 4. Re: Accordian left to right oientation possible
                deejayMK Community Member
                Indeed. I will look into that.
                • 5. Re: Accordian left to right oientation possible
                  deejayMK Community Member
                  The flickering has something todo with how webkit (the engine for safari) handles things. The same is occuring in Google Chrome (also webkit). It's due to the following code

                  if (p==panel && s ==0) {
                  c.style.display = "block";
                  }

                  and the rewind of that

                  if (obj.panel != this.panel) {
                  obj.content.style.display = "none";
                  ....

                  The fix is very easy. Add the following rule to the .accordion class
                  .Accordion {
                  ...
                  height:200px
                  }
                  or whatever height you want it to have. Set also the height in the javascript file
                  this.fixedPanelSize = 200;

                  This will stop the flickering...

                  • 6. Accordian left to right oientation possible
                    maroschutte Community Member
                    The flashing is definitely a webkit thing, but I've found it has to to with setting the width to 0px. It looks like this is actually removing the dynamically set width, returning to the static value for a moment before the 'display=none' takes effect.

                    I didn't do a generic fix for all uses of SpryAccordion.js, but take a look at the version that is used on my site ( http://schutte.name/) for a flicker free horizontal accordion.

                    Another fix in this version of SpryAccordion.js is that the 'shivering' effect on the right hand part of the accordion is gone. There were rounding errors in the width calculations done in PanelAnimator that caused this. Go to http://schutte.name/ and select the left-most tab. Then quickly press right arrow a number of times. For the smoothest effect use google chrome, for the worst use firefox 3.0.x.
                    • 7. Re: Accordian left to right oientation possible
                      MadMac01 Community Member
                      Hi!

                      This is really awesome, but still a little buggy I'm afraid. In Safari, there is the flickering effect that your hacks did nothing to alleviate. I tried using the javascript file from the address above, but the whole thing broke then. I also tried adding all the other spry utilities in a vain hope that the solution was buried somewhere inside. Nope.

                      In addition, when viewed in Firefox, a horizontal scroll bar pops into the browser window as soon as a panel is clicked, and a strange dotted border appears to the right of the accordion.

                      Unfortunately, my client stopped by and looked over my shoulder while I was building this and jumped for joy. He really wants this on his page, and begged me to squash these bugs and make his page ready for prime-time. If I could perhaps send you the URL privately, would you be interested in helping me polish this up?
                      • 8. Re: Accordian left to right oientation possible
                        maroschutte Community Member
                        Hi,

                        Really strange that you still see the flickering. I did some really extensive tests in the following browsers:

                        Windows XP SP3
                        - IE6, IE7, IE8 beta
                        - FireFox 3.0.7 and 3.1 beta
                        - Google Chrome
                        - Safari 4 beta
                        - Opera 9.64

                        Mac
                        - Safari 3 and 4 beta

                        Everything looks fine, no flickering and no scrollbars. The dotted border might be the browser indicating that the accordion is selected (in safari you get a blue border).

                        Could you post your OS and browser versions back to the forum? As for helping you with your site, I'm leaving for a three week holiday this sunday, but if you send me the link through the email address on my site, I'll have a quick look.
                        • 9. Re: Accordian left to right oientation possible
                          MadMac01 Community Member
                          Thanks much!

                          My OS is Mac Os X 10.5.6, my browser is Safari 3.2.1 / FIrefox 3.0.7

                          I will be emailing you the link via your site. IF anyone else would like to help de-bug, please send me a private message.
                          • 10. Re: Accordian left to right oientation possible
                            MadMac01 Community Member
                            After some correspondence with maroschutte, I have managed to make my accordion work the way it does on his site. Unfortunately, I am not permitted to share the development environment with the public, and I am not entirely aware of the specific edits that arrested the flickering, so it might be best just not to give overt directions here.

                            However, I am sure that removing the "tabindex attribute stopped the ghosting in Firefox (also I had to twiddle with the ".Accordion" class width until it stopped popping the scrollbar.)

                            Nevertheless, I am extremely grateful to Marcel for all the invaluable assistance he gave me, as well as the time that he took out of his life to make sure my work approximates the level of perfection that his website reaches.
                            • 11. Re: Accordian left to right oientation possible
                              icecappacino Community Member

                              Hey I copied your style here

                               

                              http://www.kendallarneaud.com/website.html

                               

                              now this works smooth in FF3

                              slight jitter in IE7 (barely)

                              but jumps in Google Chrome

                               

                              whats your take on this...

                              • 12. Re: Accordian left to right oientation possible
                                maroschutte Community Member

                                It looks like you've got the wrong version of the .js libraries. Especially SpryAccordion.js does not contain my fix for the jumping in chrome/safari. Get the right version from http://schutte.name/. You will have to edit the hardcoded width at line 612.

                                • 13. Re: Accordian left to right oientation possible
                                  icecappacino Community Member

                                  Thanks,

                                   

                                  I am setting the fixedPanelSize in the in instantiating the class. I also used it on line 612 so that you just need to change the variable

                                   

                                  check the url for details

                                  • 14. Re: Accordian left to right oientation possible
                                    maroschutte Community Member

                                    You're welcome. Using the variable is ofcourse better, I was being lazy there.

                                    • 15. Re: Accordian left to right oientation possible
                                      icecappacino Community Member

                                      http://www.kendallarneaud.com/website.html

                                       

                                      Hey guys any reason why the Flash is acting that way in FF when you open close my "video panel"

                                      • 16. Re: Accordian left to right oientation possible
                                        maroschutte Community Member

                                        Hi,

                                         

                                        I don't know what FF problem you mean. There is one other thing you might

                                        change: during the accordion animation, the contents of your panels gets

                                        squeezed together. You can prevent this by putting the entire panel content

                                        inside a fixed width div.

                                         

                                        Regards, Marcel

                                        • 17. Re: Accordian left to right oientation possible
                                          icecappacino Community Member

                                          when you close the "video" panel....the flash sort of hangs outside the panel because of the shrinking in the content....i guess the suggestion you have might fix it...thanks

                                          • 18. Re: Accordian left to right oientation possible
                                            amitjoc Community Member

                                            can any one of you make a tutorial or a  dreamweaver cs4 extension

                                            which helps the noobus

                                            thanks