-
1. Accordian left to right oientation possible
deejayMK Sep 25, 2008 7:32 AM (in response to jefbak)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 Sep 25, 2008 4:41 PM (in response to deejayMK)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 Sep 26, 2008 12:22 AM (in response to jefbak)The accordion is flashing in safari :) -
4. Re: Accordian left to right oientation possible
deejayMK Sep 28, 2008 2:06 PM (in response to Arnout Kazemier)Indeed. I will look into that. -
5. Re: Accordian left to right oientation possible
deejayMK Sep 30, 2008 2:23 AM (in response to deejayMK)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 Mar 21, 2009 10:04 AM (in response to deejayMK)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 Mar 24, 2009 12:45 PM (in response to jefbak)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 Mar 25, 2009 3:41 AM (in response to MadMac01)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 Mar 25, 2009 1:21 PM (in response to maroschutte)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 Mar 27, 2009 12:05 PM (in response to maroschutte)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 Sep 28, 2009 7:56 PM (in response to deejayMK)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 Sep 29, 2009 10:33 AM (in response to icecappacino)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 Sep 29, 2009 5:49 PM (in response to maroschutte)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 Sep 29, 2009 11:08 PM (in response to icecappacino)You're welcome. Using the variable is ofcourse better, I was being lazy there.
-
15. Re: Accordian left to right oientation possible
icecappacino Oct 15, 2009 6:57 PM (in response to jefbak)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 Oct 16, 2009 4:35 AM (in response to icecappacino)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 Oct 16, 2009 4:39 AM (in response to maroschutte)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 Apr 8, 2010 7:27 AM (in response to deejayMK)can any one of you make a tutorial or a dreamweaver cs4 extension
which helps the noobus
thanks


