Spry accordion page scrolling

Hi,
Whenever I click on an accordion tab it scrolls the webpage to the first tab in the accordion. Why does it do this and is there any way I can control this scrolling.
See www.thehmc.co.uk/events4.html to see what I mean.
Cheers
Phil

instead of editing your Spry files it might be wiser to use the
options constructor for it. This option object will automatically
replace all "this" variables inside the Spry Widget without having to
edit the files.
So your constructor should become something similar like this:
var acc1 = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights: true, enableKeyboardNavigation: false })

Similar Messages

Spry Accordion gains scroll bars in IE7

Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!

Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks

How do I make my Spry Accordion menu scroll *with* my webpage?

Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
HTML of same div class:
<div class="contentright">
                            <div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?

Here is my HTML Coding
<html>
    <head>
        <title>BetsyMarvin.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
        <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div class="container">
            <div class="bannerArea">
                <div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
                <span class="toplogo"></span>
                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
            </div>
            <div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="theme_02_design.html">Home Page</a></li>
                    <li><a href="blog_design.html">Blog</a></li>
                    <li><a href="lessons_design.html">Lessons</a></li>
                </ul>
                <div class="content">
                    <div class="contentleft">
                        <h1>Welcome to my Website</h1>
                        <img class="imageright" src="images/faith reason.jpg" border="0" />
                        <p>text</p>
                    </div>
                    <div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
                                    <div class="accordion_340_tab">CONTACT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                      <p> <a href "mailto:[email protected]"> Email</a></p>
                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">ABOUT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <p>text</p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">PASSIONS</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />
                                             <p>text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="AccordionBottom"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="footerArea">
                <div class="copyright">© 2013 Betsymarvin.com | All rights reserved.</div>
            </div>
        </div>
<script type="text/javascript">

        </script>
    </body>
CSS Style Sheet
body {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #545454;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a          { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover    { color: black; }
.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
    width: 980px;height: 145px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
.bannernav {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
    color: white;
    text-decoration: none;
.bannernav a:visited {
    color: white;
.bannernav a:hover {
    color: #ECBB7B;
.toplogo {
    position: absolute;
    z-index: 100;
    padding-right: 0px;
    float: right; margin-left: 675px;
    padding-top: 10px;
.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 10px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;
    z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #CCA72F;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
.leftnavigation a:visited{
    color: #5C4C17;
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
    width: 400px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;
.imageleft {
    margin-right: 10px;
    float: left;
/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #cfcfcf;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    color: #666666;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
    overflow: hidden;
    width: 255px;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    color: #CCA72F;
    margin: 0px;
    cursor: pointer;
    padding: 10px 30px 10px 20px;
    font-weight: bold;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-repeat: no-repeat;
    background-image: url(../images/accordion_255_tab_normal.gif);
.AccordionPanelContent {
    overflow: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
    background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
    background-color: #000000;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
    background-image: url(../images/accordion_255_tile.gif);
    background-repeat: repeat-y;
    background-position: 0px 0px;
.tabTop {
    background-position: 0px 0px;
    padding-top: 15px;
.middleTab {
    background-position: 0px -151px;
.accordion_255_tab {
    margin: 0px;
    font-weight: bold;
.acontent {
    height:200px;
    width:220px;
    overflow: auto;
    padding: 5px 10px 10px 20px;
    useFixedPanelHeights = null;
.AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);

Spry Accordion - window only 10 lines deep

I have embedded Spry Accordion pages within a Spry Tabbed Panel, using Dreamweaver CS3. When it opens in Firefox or IE the Accordion pages are only 10 lines deep. How can I make it open to the rest of the available screen?
Any help would be very gratefully received!
Regards
Geoff

Many thanks PZ.
I was just about to add to my previous message to say I had found the answer after many trials!
Regards
Geoff

Page scroll as spry blind opens

Hi,
I hope somebody can help me. I'm using a spry blind to display older posts on a blog. when the spry blind opens I can't see the full sexy animation. is there a way to have the page scroll down as the blind opens. or somehow lock onto the bottom of the page. i've tryed linking to an anchor but it dosn't work, i've looked everywhere to find a solution to no avail but i'm sure it's possible.
many thanks
-Paul

"Laura Edwards" <[email protected]> wrote in
message
news:g756p6$euq$[email protected]..
> Developing a new site with CS3 but am not getting
consistent behaviour
> with
> standard DIV or SPRY areas.
> On some pages the main text area containing the DIVs and
Sprys will resize
> when a spry accordian panel opens to be higher than the
original page
> height,
> on some pages it overlaps the page base and runs off the
bottom.
>
> Is there any way of getting consistent behavious, seeing
as I don't know
> why
> the ones that work, do...
>
> For examples of problem see
>
http://79.170.40.182/johnholloway.co.uk/index.html
> and surrounding pages.
>
> All pages controlled from one css and master template.
Spry widgets are pretty rudimentary. I imagine you are
talking about this
page:
http://79.170.40.182/johnholloway.co.uk/performance.html
It flashes all of the Accordion content as visible first,
then when the
script constructor is encountered, it all snaps shut. That is
pretty typical
of Spry. You can get around that with some custom
programming, which the
Adobe Spry folks might be able to help you with - but you
should post on the
Spry forum instead of this one.
Our widgets do not have this behavior, have lots more
features and
automation, but are not free.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

How can I make the spry accordion remember the panel open
when I refresh the page or jump to a new page?
I am using the accordion feature on all my pages as a
navigation aid. It has three panels. When you refresh the page the
panel goes back to the default pane... Is there a way of
controlling this so that the browser can remember the pane that is
open (say set a variable, cookie, other?)

Look for "Set the default open panel" on the following page:
http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
Keep in mind you would need to change that bit of code on
every page. The only way to do it more dynamically would be to
include a custom javascript or PHP/ASP style script in order to
change the value.

Spry Accordion default panel in Master Detail Page

Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
    <div class="AccordionPanelContent">
        <table width="385" border="0" class="AccordionPanel" id="content1">
          <?php do { ?>
            <tr>
            <td >
               <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
               </td>
            </tr>
            <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
        </table>
    </div>
</div>
<script type="text/javascript">

</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!

PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben

Spry accordion works in template, but not pages using that template

So I added a spry accordion to one of my templates and changed the script to default closed. It works great. In the template. But not in any of the pages using that template. Basically I can see the content in the accordion on the page as if there is no accordion at all. And I can see the script and html telling me an accordion should be there. It just isn't. I can see the framework when in edit mode. But in live mode, it's like there's not there but the content.
I'm using Dreamweaver CS6.
Any thoughts?
Thank you for your time!

If the template has been created properly, then the Spry files should automatically be included in the child page(s).
My template looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<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>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
My child page looks like
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


</head>
<body>

<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>

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

Spry Accordion open on page load

How do you stop the Spry Accordion from being open while the page is loading - as soon as the page loads the Accordion closes to the way it has been designed - it is just annoying!

Starting with All Panels Closed
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option.
Gramps

Spry Accordion menu opens on page load then closes

Hello,
I'm having issues with a SPRY Accordion menu loading with all of the tabs open, then closing once the page finishes loading.
Example page is here:
http://thesparkmachine.com/mca2009/academics
(site is still being worked on, so forgive any oddities)
Is this something that is occurring because of the large amount of material loading on the page at once? The site is Joomla!-based, and there are close to a dozen modules on the page, plus an random background image script.
Any advice would be helpful.
Thanks!

I see you have also fixed your menu sections linking..
But i still wanted to give you some advice on why it opens and closes.
If you check out the source of your page, you will see that the constructor for your accordion is at the bottom of the page. When the browser loads the page, it parses from top to bottom, so it has parsed the accordion markup. But not yet the constructor for the accordion, so once it finally done with parsing the rest of the markup it finds the constructor and executes it.
What would have helpt, if you just moved the <script> with the constructor to directly under the accordion. So when the accordion markup has been parsed the brower directly executes the scripts.

For multiple spry accordion in a single html page

I have created a single spry accordion in html page .But i want multiple accordion of similar size and color on that page.I have tried to create a multiple accordion on that page but only one is working and others doesn't work.
    Thanks in advanced.

I just tried doing the same thing without any problems. Not sure what you are doing wrong, heres the code:
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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 id="Accordion2" 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>
<script type="text/javascript">

</script>
</body>

Spry Accordion jumping to the top of the page

Hi
I've just about go the accordion looking perfect (it's a
great effect!), except that in IE7 when a panel lower down the list
is selected, the page jumps so that the highest panel is at the top
of the screen. As my accordion is longer than the screen this means
that the panel that is selected is off the bottom of the screen.
Does anyone have any suggestions for fixing this? It works
perfectly in Firefox.
Many thanks in advance!

I saw you are using an old version of Spry accordion.. you
use Spry.1.4 and the latest version is Spry 1.6 which contains some
bugs fixed for accordion widget.
Update link:
http://labs.adobe.com/technologies/spry/home.html
Please update to the latest version and make the keyboard
navigation change and see if still happens the pb.
Diana

Automatically Animating Spry Accordion Widget on Page Load

I've been searching and searching and still can't find a clue
as how to make the Spry Accordion Widget automatically open the
next panel. I want the panels to expand automatically and loop back
at the last panel.
Do I need to create another function for this or is there
already a function created in the .js file?
Any help is appreciated...even if you can point me in the
right direction.
Thanks!

DeviseInnovations wrote:
> I've been searching and searching and still can't find a
clue as how to make
> the Spry Accordion Widget automatically open the next
panel. I want the panels
> to expand automatically and loop back at the last panel.
>
> Do I need to create another function for this or is
there already a function
> created in the .js file?
>
> Any help is appreciated...even if you can point me in
the right direction.
Sounds more like you'd want sliding panels:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
I've seen an automatic version created that might do what you
want:
http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
But if you really want an Accordion, then you might be able
to adapt the code in the auto sliding panels above.
FYI: There's a Spry forum that would be better to post Spry
related question in:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

SPRY accordion and tabs not displaying in IE6

Hi everyone:
Even after clearing up some validation errors in my HTML, I
am experiencing issues with a SPRY accordion and another page with
a Tabbed SPRY widget not appearing in IE6. The pages all work fine
in IE7, Firefox and Safari. I would greatly appreciate anyone
taking a look (link below) and letting me know if you see any
errors or know of a bug I have not found the fix for. My CSS
validates 100% so I don't think I have made any style sheet errors.
Thanks very much.
www.ducksroofing.com
K.

Hi all:
After some more tinkering, I have discovered the real issue
is that my containing element is not containing the entire page and
therefore cutting off my SPRY elements on the pages which have
them. This is causing the SPRY widgets to fall apart and, of
course, for the page to only scroll partially down.
Does anyone have a suggestion as to why the SPRY tabbed
element and accordion element on my pages is not nesting within
document flow and remaining with the containing div? I appreciate
your help.
Once again, url is: www.ducksroofing.com
K.

Spry accordion page scrolling

Similar Messages

Maybe you are looking for