Spry accordion panel not lining up with top of viewport in FF3.5

I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul A

so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                  <div id="Accordion1" class="Accordion">
                    <div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
</div>

Similar Messages

Spry accordion widget not playing nicely with IE7

Good day.
The answer to this issue may be on this forum somewhere already, but I cannot take the time to scour the several hundreds of posts.
I've build and customized my first spry accordion, which can be viewed at http://www.brianfisherart.com/Bio/Contact/
In Firefox and Safari, it works perfectly! IE7 however has some issues. the panels get too large on mouseovers, and jumpy and even larger when opening lower level panels.
Just hoping to find a quick fix.
Thanx in advance.

I'm certainly not going to do your search for you, but you might want to see if using the current version 1.6.1 works better.
http://labs.adobe.com/technologies/spry/
If that doesn't work, you might want to go to the Spry forum.
Of course, now that you've posted, I wonder if any of the links in that "More Like This" box apply?
Mark A. Boyd
Keep-On-Learnin' :-)
If you are reading this via email, be aware that it may not be an accurate representation of my message. Login to read the actual message and/or to reply.

Strange issue with Spry Accordion Panels

Hi, I'm having some strange issues with the Spry Accordion
Panels.
Here is the page:
http://www.bellaclientcenter.com/browncollege/aboutus.html
For some reason when I preview this message it adds extra
characters to the url above, so just delete those off to see the
correct url.
The only browser this does NOT happen in is safari, I'm
seeing it all of my other browsers. You'll notice when you first
load up the page, you'll see that the active panel header
background is green, and the non active is a dark grey. But when
you click one of the other panels they all turn a strange neon blue
color. This is very apparent in firefox.
Any thoughts on this? I've attached the spry css code in case
the problem is there.
thanks so much!!
Jeff

That is because your page is currently invalid. And renders in IE quirksmode..
<base href="http://www.industrialwebsearch.com/">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So make sure your page is valid, and the animations will go smooth in ie

Spry Accordion Panel

hi guys,
i have a Spry accordion panel, in the first panel i have some
dynamic text and some dynamic images, when i open the other panel
below, this opens over the top of the first panel (like it should)
and the dynamic text is covered (like it should) however the images
stay visable in the same place as if the images are placed ontop of
the accordion panel. The images are in the first panel container
though and so should become hidden but don't.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Genral Info</div>
<div class="AccordionPanelContent" id="accordcontent">
<p>Username: <?php echo $row_rsFull['UserName'];
?> </p>
<p>Name: <?php echo $row_rsFull['Forename']; ?>
<?php echo $row_rsFull['Surname']; ?></p>
<p>Date Of Birth: <?php echo
$row_rsFull['DateOfBirth']; ?></p>
<p>University: <?php echo
$row_rsFull['University']; ?></p>
<p>Project Name : <?php echo $row_rsFull['pName'];
?></p>
<p>Project Description: <?php echo
$row_rsFull['pDescription']; ?></p>
<p><img src="<?php echo $row_rsFull['pImage1'];
?>" alt="image 1" class="bottomimage" /><img src="<?php
echo $row_rsFull['pImage2']; ?>" alt="image 2"
class="bottomimage2" /></p>
</div>
</div>
Any Suggestions?

That would be very easy, just remove the tabindex attribute
of the top level div of the accordion. However keyboard navigation
will not work at that moment. The dotted line is a browswer
specific visualisation to show that the specific item is selected
using the tabindex.
You could also add the following style to your page
div:active,
div:focus,
div:hover
outline-style: none; -moz-outline-style:none;
Then none of the div items with a tabindex get an surrounding
border.

Anchor links to accordion panels not working properly across browsers

Hi everyone,
I need some help to figure out why my anchor links to specific accordion panels on another page are not working properly across browsers.
I have a Map page which has tooltips on mouseover on the site markers. 15 of the tooltips have "Click here for information" anchor links (although only 14 are currently linked) which, in theory, would take you to the Nurseries page where the specified accordion panel would be opened with the nursery entry appearing at the top of the new browser window.
Here are the links to the Map page and Nurseries page, respectively:
www.alegriadesignstudio.com/RFRI/map_v6.html
www.alegriadesignstudio.com/RFRI/nurseries_v6.html
I've tested the anchor links on IE, Firefox, Google Chrome, and Safari, and have received varying results. In most cases, the anchor links worked perfectly on two of the browsers, while on the other browsers, the correct accordion panel is opened but the nursery entry does not appear at the top of the new browser window. Anchor links using Safari and Google Chrome fared better (10 out of 14 links worked properly, and 8/14, respectively), whereas when using Firefox and IE, only 3 anchor links worked properly. The target audience for this website will be using IE and Firefox, so I would appreciate any help to figure out how to tweak the code so that the most, if not all, anchor links work properly on these two browsers in particular.
Here's an anchor link which worked perfectly in IE, GC, and Safari, but in FF, the entry did not appear at the top of the new browser window.
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green dot from the top of the map (Tooltip--Location: Mangatarem) and then click on "Click here for information."]
Here's a sample anchor link in which the entry did not appear at the top of the new browser window in any of the 4 browsers:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the bottom of the map and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet; North Cotabato) and then click on "Click here for information."]
Here's a sample anchor link in which the anchor link worked properly in GC and Safari, but the entry didn't appear at the top of the browser window in IE and FF:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island north and a bit west of "Mindanao" which is called "Bohol" and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then click on the first "Click here for information."]
Many thanks in advance for your assistance!
Joy

Hi everyone,
I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
Many thanks in advance.
Joy

Spry Accordion Panels view incorrect in IE8

I have a page set up using both spry menu and spry accordion panels. The problem is that in FireFox and Chrome, the pages view as they should. However, in IE, the panels on the accordion spread and are open, it doesn't view as it should. The test page is here www.sbcvote.us/index1.html the source code is below. My initial guess is that I have an open or not closed tag somewhere?
<!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>Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters</title>
<meta name="keywords" content="Joe Paul Gonzalez, San Benito County, Clerk, Auditor, Recorder, Registrar of Voters, fppc form 460, reconveyance deed, deed of reconveyance, reconveyance, homepage, mechanics lien release, quit claim deed form, release of mechinics lien, form, san, reconveyance, county, deed, 460, california, fppc, nacimiento, trust, elections, ca, solictud, certifacadas, reporting, statements, nominees, handbook, contribution, joe, paul, gonzalez" />
<meta name="description" content="Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters" />
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<script src="/SpryAssets/menu/SpryMenuBar.js" type="text/javascript"></script>
<script src="/SpryAssets/accordion/SpryAccordion.js" type="text/javascript"></script>
<link href="/SpryAssets/menu/SpryMenuBarHorizontal_sbcvote.css" rel="stylesheet" type="text/css" />
<link href="/SpryAssets/accordion/SpryAccordion_sbcvote.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
</script>
</head>
<body>
<div id="wrapper">
    <div id="header">
      <div id="header_right">
            <ul id="header_button">
                <li><a href="#"><img src="images/home.jpg" alt="home" /></a></li>
                <li><a href="#"><img src="images/contact.jpg" alt="contact us" /></a></li>
            </ul>
            <div class="cleaner"></div>
            <form action="#" method="get">
                <input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
            </form>
      </div>
    </div> 
    <div id="banner">
    <div id="banner_box">
        <ul>
        <li><a href="clerk.htm" ><span class="current"></span><img src="images/countyClerk.jpg" alt="San Benito County Clerk" /></a></li>
            <li><a href="auditor.htm"><span></span><img src="images/countyAuditor.jpg" alt="San Benito County Auditor" /></a></li>
            <li><a href="recorder.htm"><span></span><img src="images/countyRecorder.jpg" alt="San Benito County Recorder" /></a></li>
            <li><a href="http://results.sbcvote.us" target="_new"><span></span><img src="images/coRegistrar_results.jpg" alt="" /></a></li>
        </ul>
        </div>
    </div> 
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
          <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
          </ul>
        </li>
        <li><a href="registrar/candidateinfo.htm" class="MenuBarItemSubmenu">Candidate Info</a>
          <ul>
            <li><a href="candidate_forms_manuals.htm">Forms & Manuals</a></li>
            <li><a href="pdf/forms/registrar/candidates/2010CandidateHandbook.pdf">2010 Candidate Handbook</a></li>
            <li><a href="registrar/form460.htm" class="MenuBarItemSubmenu">FPPC 460s</a>
              <ul>
                <li><a href="registrar/form460_all.htm">Candidate Form 460s</a></li>
                <li><a href="registrar/2010_form460.htm">2010 Candidate 460 Forms</a></li>
                <li><a href="registrar/2009_form460.htm">2009 Candidate 460 Form</a></li>
                <li><a href="registrar/2008_form460.htm">2008 Candidate 460 Form</a></li>
                <li><a href="registrar/2007_form460.htm">2007 Candidate 460 Form</a></li>
              </ul>
            </li>
            <li><a href="candidate_reporting.htm">Reporting</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="registrar/votebymail.htm">Vote-By-Mail</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="overseasvoting.htm">Overseas Voting</a>
              <ul>
                <li><a href="pdf/forms/registrar/votebymail/oversees_votebymail_request.pdf">Overseas Vote-By-Mail Request</a></li>
                <li><a href="pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide Military Overseas</a></li>
                <li><a href="#">Untitled Item</a></li>
              </ul>
            </li>
            <li><a href="mailvotestatus.htm">Ballot Status</a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_eng.pdf">Application </a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_SPAN.pdf"> Español</a></li>
          </ul>
        </li>
        <li><a href="/registrar/registration.htm" class="MenuBarItemSubmenu">Register to Vote</a>
          <ul>
            <li><a href="registrar/national_vrc_notice.htm">Form English</a></li>
            <li><a href="http://www.sbcvote.us/registrar/national_vrc_notice_sp.htm">Español</a></li>
            <li><a href="registrar/statement_distribution.htm">Distribution</a></li>
          </ul>
        </li>
        <li><a href="registrar/pollworker.htm" class="MenuBarItemSubmenu">Pollworker</a>
          <ul>
            <li><a href="registrar/pollworker.htm">Become a Pollworker</a></li>
            <li><a href="registrar/pollworker.htm#student">Students</a></li>
            <li><a href="registrar/pollworker.htm#student">State Employees</a></li>
          </ul>
        </li>
        <li><a href="registrar/hava_faqs.htm" class="MenuBarItemSubmenu">HAVA</a>
          <ul>
            <li><a href="registrar/hava_complaint_procedure.htm">Complaint Procedure</a></li>
            <li><a href="registrar/hava_compliancemanual.htm">Compliance Manual</a></li>
          </ul>
        </li>
</ul>
</div> 
    <div id="content_wrapper">
    <div id="left_sidebar">
        <div class="box">
            <h2><span></span>Click on a Tab for Info</h2>
                <div class="body">
                    <ul class="side_menu">
                      <li>
                        <div id="Accordion1" class="Accordion" tabindex="0">
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Vote-By-Mail (VBM)</div>
                            <div class="AccordionPanelContent"><a href="/registrar/votebymail.htm">Vote-By-Mail Voting</a><a href="/pdf/forms/registrar/votebymail/overseas_votebymail_request.pdf">Overseas VBM Request</a>
                              <a href="/pdf/forms/registrar/votebymail/VBM_Application.pdf">Application for Permanent VBM </a><a href="/pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide to Military Voting</a>
                              <a href="/pdf/forms/registrar/votebymail/votebymail_app_general_county_fill.pdf">Application VBM General Election</a><a href="/registrar/mailvotestatus.htm">Did My VBM Ballot Get Counted?</a><br />
                                <br />
                              <br />
</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voto Por Correo</div>
                            <div class="AccordionPanelContent"><a href="/registrar/spanish/voto.por.correro.html">Voto Por Correro</a><a href="/registrar/spanish/overseasvoting.SPAN.html">Votante Información Extranjero</a><a href="/registrar/mailvotestatus.htm">Cheque se recibimos su voto por correro</a> <a href="/pdf/forms/registrar/votebymail/VBM_ApplicationSPAN.pdf">Solicitud de Balota de Votación por correo en California</a></div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voter Information</div>
                            <div class="AccordionPanelContent"> <a href="/registrar/national_vrc_notice.htm">Register to Vote</a>
                              <a href="http://www.voterguide.sos.ca.gov/pdf/english/" target="_new">Voter Information Guide Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/YourRightToVote_ENG.pdf">Your Right to Vote</a>                              <a href="/pdf/forms/registrar/register/eng-list-of-certified-candidates11.10.pdf">Certified Candidates Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/TimeOfftoVote_ENG.pdf">Time Off to Vote </a><br />
                              <br />
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Votante Información</div>
                            <div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Guía para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Inscíibase para Votar</a> <a href="/pdf/forms/registrar/register/Voter-bill-of-rights.SPAN.pdf">Declaración derechos de Votantes</a> <a href="/pdf/forms/registrar/register/spanish-vig-nov-2010.pdf">Guía Oficial Información Nov 2010</a> <a href="/pdf/forms/registrar/register/spanish-list-of-certified-candidates11.10.pdf">Lista Candaditos Certificados 2010 </a><a href="/pdf/forms/registrar/register/TimeOfftoVote_SPAN.pdf">Tiempo Libre Para Votar</a></div>
                          </div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">For the Candidates</div>
                            <div class="AccordionPanelContent">Blank 460 Forms<br />
                              Candidates 460 Forms Index<br />
                            2010 Candidate Handbook<br />
                            2010 Calendar </div>
                        </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Nov 2, 2010 Election</div>
                            <div class="AccordionPanelContent">Election Results Page<br />
                              Canvass of the Vote
                                <br />
                                Vote-By-Mail Ballot Look up<br />
                                State Vote Pamphlet<br />
                                Sample Ballot Statewide
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 7</div>
                            <div class="AccordionPanelContent">Content 7</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 8</div>
                            <div class="AccordionPanelContent">Content 8</div>
                          </div>
                        </div>
                      </li>
                        <li> <a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Donec bibendum semper</a></li>
                        <li><a href="#">Proin tincidunt dapibus</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam vehicula egestas </a></li>
                    </ul>
</div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>Our Departments</h2>
                <div class="body">
          <ul class="side_menu">
                        <li><a href="clerk.html">County Clerk</a></li>
                        <li><a href="auditor.html">County Auditor</a></li>
                        <li><a href="recorder.html">County Recorder</a></li>
                        <li><a href="index.html">Registrar of Voters</a></li>
                        <li><a href="http://results.sbcvote.us" target="_new">Election Results</a></li>
                        <li></li>
                        <li></li>
                        <li></li>
</ul>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
        <div id="content">
<div class="box">
            <h2><span></span>Welcome to the San Benito County Registrar of Voters</h2>
                <div class="body">
                    <p> Welcome to our new and updated website for the County of San Benito Clerk-Auditor-Recorder- Registrar of Voters. </p>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>News and Updates</h2>
                <div class="body">
                    <div class="news_box">
                      <h3><a href="http://results.sbcvote.us" target="_new">November 2, 2010 Election Results</a></h3>
                        <p>Up to the minute election results for San Benito County will be uploaded to our website at the close of the polls on Tuesday, November 2, 2010 at<a href="http://results.sbcvote.us" target="_new"> http://results.sbcvote.us.</a></p>
                      <div class="cleaner"></div>
                  </div>
              <div class="news_box">
                <h3><a href="registrar/mailvotestatus.htm">Vote-By-Mail Ballots</a>
                </h3>
                <p>Verify that your Vote-By-Mail Ballot has been received <a href="/registrar/mailvotestatus.htm">here.</a> To insure that your vote is counted, drop off your VBM ballot to our offices on the second floor of the courthouse building room 406 BEFORE Tuesday, Nov. 2, 2010.</p>
                    <div class="cleaner"></div>
                </div>
              <div class="news_box">
                    <a href="#"><img class="news_image" src="images/image_08.jpg" alt="image" /></a>
               <h3><a href="#">Auditor's Department</a></h3>
                    <p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
                <div class="cleaner"></div>
                </div>
                <div class="more float_r"><a href="#">View All</a></div>
                <div class="cleaner"></div>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
       <div id="right_sidebar">
        <div class="box">
            <h2 align="center"><span></span>Joe Paul Gonzalez</h2>
                <div class="body">
                  <ul class="side_menu">
                        <li></li>
                        <li></li>
                        <li><img src="images/joepaul_new.jpg" width="207" height="262" alt="joe paul gonzalez" /></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li><a href="#">County Clerk-Auditor-Recorder</a></li>
                  </ul>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="sidebar_box">
      <a href="http://results.sbcvote.us" target="_new"><img src="images/results.jpg" alt="Election Results" /></a>            </div>
            <div class="sidebar_box">
            <a href="#"><img src="" alt="City Zoo" /></a>            </div>
      </div> 
        <div class="cleaner"></div>
    </div> 
</div> 
<div id="footer_wrapper">
<div id="footer">
        <ul class="footer_menu">
        <li><a href="#">Homepage</a></li>
            <li><a href="#">Site Map</a>
            </li>
            <li><a href="#">Clerk</a>
            </li>
            <li><a href="#">Auditor</a></li>
            <li><a href="#">Recorder</a></li>
            <li><a href="#">Registrar of Voters</a></li>
            <li><a href="#">Election Results</a></li>
            <li><a href="#">Forms</a></li>
            <li class="last_menu"><a href="#">Contact</a></li>
        </ul>
        Copyright © 2010 <a href="http://www.netwidesales.com" target="_new">NetWideSales</a> |
        <a href="http://www.netwidesales.com" target="_new">Designed by Irma C. Gonzalez</a> |
    <a href="http://www.joepaulgonzalez.com" target="_new">Joe Paul Gonzalez</a> </div> 
</div> 
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/images/menubar/SpryMenuBarDownHover.gif", imgRight:"/images/menubar/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
I appreciate any help here, it really doesn't make sense to me, it did work for a few viewing in IE and I must have changed something by mistake?
Thanks again.

I added a set width to the accordion css and that solved the problem of the widget running across the page. The IE issue appears to be an ongoing issue with IE. If a viewer has IE8, then hitting the compatibility button on the menu bar will solve the viewing problem. If not, it doesn't view correctly. It views fine on other browsers (Chrome, etc). Problem is how many people will know to hit the compatibility button?
Thank you for your help, I appreciate the time taken.

Sorting Spry Accordion panels?- Repost

I posted this question on 5/20 but did not get any replies,
so I am reposting in hopes that someone might have an answer.
Can Spry accordion panels be dynamically sorted the same way
that regular Spry tables can? I created a Spry Accordion with a
book title on each panel. When you click on a panel, a table
appears (dynamically generated from an XML database using a Perl
script) showing author name, publisher, date of publication, etc.
I'd like users to be able to alphabetize the book titles in case
they're not already in alphabetical order. I'd also like to add a
link on (or near) the panels to sort them by date of publication,
even though the date field is not visible when the panels are
closed.
Thanks!
- cpmorgan

I couldn't tell from your post if you were generating the
markup for your Accordion using regions and data sets. If you are,
then you are probably doing something similar to:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
In which case, you can cause the panels to sort by simply
sorting the data set:
<a href="#" onclick="dsEmployees.sort('firstname'); return
false;">Sort by FirstName</a>
<a href="#" onclick="dsEmployees.sort('lastname'); return
false;">Sort by Last Name</a>
--== Kin ==--

Spry Tabbed Panels - not correct in IE but correct in Chrome and MF

Hi,
I'm having problems with an extension I used for a client, so I want to use the Spry tabbed panels form dreamweaver, but they in IE8 it puts all the content under each other in the first tab ??
In Chrome and MF its correct. Do you know about this problem or is it because I did something wrong?
see: www.zorgfilosofie.nl/index2
The other pages where made with an extension but with that script my client can't edit with contribute. That's why I want to implement Dreamweaver Spry Tabbed Panels.
Thanks for answering!
Carla

Hello there from down under J
Het was mooi weer, maar vandaag regent het.
Toch zijn hier in deze kamer veel zonnestralen, want het probleem is opgelost!
I searched the whole evening for alternative but it did’t work with templates.
With the js files the problem is solved.
I don’t understand why the js file was not correct, because I just bought CS5.5
Where do I have to put de file so the problem will not happen again when I make another site?
Thanks a lot!
Best regards and take some sun with you!
Carla
Van: altruistic gramps [email protected]
Verzonden: woensdag 5 oktober 2011 2:16
Aan: Carla Leliveld
Onderwerp: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
Re: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
created by altruistic gramps <http://forums.adobe.com/people/altruistic+gramps> in Spry Framework for Ajax - View the full discussion <http://forums.adobe.com/message/3954185#3954185

Spry Accordion panels and Google search

Hello! I have about 30 pages with at least 15 spry accordion
panels on each. I've just implemented a local customized google
search and it looks like Google is able to pull pretty accurate
search on both the panels and panels content.
Once presented with the search results, can a user get to an
OPEN accordion panel, that relates to his search? I hope I've
explained it clearly, THanks!

highedwebby wrote:
> Hello! I have about 30 pages with at least 15 spry
accordion panels on each.
> I've just implemented a local customized google search
and it looks like Google
> is able to pull pretty accurate search on both the
panels and panels content.
Yes, this happens because all of the content is on the page.
> Once presented with the search results, can a user get
to an OPEN accordion
> panel, that relates to his search? I hope I've explained
it clearly, THanks!
I've seen some scripts that highlight Google search terms, so
I suppose that getting the search terms on the destination page is
possible, but making that leap to the proper panel to open may be a
little more difficult.
First you have to figure out which panel the words are
in,then you have to figure out what if the user is searching for
three terms and each of those terms is in a different panel, or if
only one term, and that term is in multiple panels? How would you
expect that work out?
You can highlight the words using code such as that discussed
on this page:
http://www.kryogenix.org/code/browser/searchhi/
I'd guess that someone could reverse that code that finds the
text and then take that find and then walk up the DOM tree to see
if you are within an accordion panel and then show that panel as
the default panel on the page.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

As an FYI: Adobe discontinued developing the Spry framework last year. And Spry was removed from DW CC. You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
Nancy O.

Spry Accordion Panel Default State All Closed?

Is it possible to set a group of Spry accordion panels so
that all are closed by default?

Steven_K wrote:
> Is it possible to set a group of Spry accordion panels
so that all are closed by default?
Yes, a Google search for "Spry accordion all closed" brings
up this as
the first result:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Collapse Spry accordion panels

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Spry horizontal menu bar and accordion panels not working when published

Hi,
I'm a newbie to Dreamweaver and have been asked to design an intranet site. On the site, I added both Spry widgets for a horizontal menu bar and an accordion panel. Both of these widgets work in preview, however, neither work when I publish. I uploaded the Spry asset folder (with all the CSS and JS files) to the remote server, but still no luck. What am I missing?
Thanks.

Despite of what you have staed, my bet is on the fact that the SpryAssets folder and/or the included files are not being found by your page..
Open the site in FF, click on view Source and in the source code click the link to the JS file. If it can be found, it will show the content of the file and you will have the satisfaction of knowing that the page can find the file.
If it does not show the content, you need to correct that.
Good luck.
Ben

Accordion Panel not seen in browser. Before, yes.

Hi,
I've using the Accordion Pannel with several Tabs. It was working good on the browser. Now, after few weeks I started to work with some PHP. I am now working with a LOCAL server for trsting the PHP applications.
But I can not preview in the browser all the accordion panels I made. I saw only the plain text, images, flash, everything but not the Accordion Panels. On the contrary in the localhost server oln the top right of the browser says "READER", I click there and I can read the text content of the first tab only.
I changed the server from local to remote in order to upload my regular html pages with the accordion panels. I uploaded them and I don't see them too, even when I browse in the URL. What is happening here? The PHP is blocking something?
Here you have one of these pages:
http://www.magicperu.biz/paginascom/faq_sp.html
Below the titles should be the accordion panel with 8 tabs and text content in spanish. Can you see that? If not, what was wrong? In those html files I didn't put any PHP code. The PHP I am using only for the contact form and stuffs.
I use Mac OS 10.6.4, Dreamweaver CS5 with MAMP. Safari.
Thanks for your help.

Hi,
looking to the source code of your
http://www.magicperu.biz/paginascom/faq_sp.html
I can see your advices, indeed:
name="head">
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
but I miss the consistent continuation, here (German DW):
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bezeichnung 1</div>
    <div class="AccordionPanelContent">Inhalt 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bezeichnung 2</div>
    <div class="AccordionPanelContent">Inhalt 2</div>
</div>
</div>
and especially this:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
I suggest that you first try inserting Accordion Pannel into a very new *.html file to see what happens.
Hans-G.

Help tweaking Spry accordion panel code!

Hello all,
I'm currently working on an information portal for a client and am having trouble with creating code to open a specific accordion panel on another html page without messing up the code so that the accordion panels have adjustable heights based on content.
The website has an Interactive Map page, which has some tooltips that have links to the Nurseries page. The Nurseries page has accordion panels with nursery entries ordered by province; anchor links were added to nursery entries that are linked to the Map page. In theory, when a user clicks on a "Click here for information" link on the Map page, the Nurseries page will load and automatically open the exact panel where the entry is housed with the exact entry showing at the top of the browser window. So I tested it out and it works exactly as I want it to, HOWEVER, the adjustable height feature that I added to the accordion panels on the Nurseries page now no longer works (now there are scrollbars on the right if the height exceeds the default height), AND all the panels by default are open instead of closed!
Here is the pertinent code that I am using on the NURSERIES page:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></ script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></ script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
</script>
This is the code I added to one of the tooltips on the MAP page:
<a href="nurseries.html?panel=9#mangatarem" title="Go to native species nursery listing" target="_blank">
What do I need to do in order for this to work? I tried reordering the code to read { defaultPanel: params.panel ? params.panel:
0, useFixedPanelHeights: false } and even tried combining the two { useFixedPanelHeights: params.panel ? true: false } but nothing worked. Any suggestions?
Many thanks in advance for your assistance!!
Joy

Hi Joy,
Without going to a lot of trouble in writing an onload event, the following method is feasable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" />
<style>
.region {
    color: #090;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
</style>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="acc" class="Accordion" tabindex="0">
<span class="region">Luzon</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.1</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">Morong; Bataan</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Center for Biomolecular Science</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Dr. Lourdes J Cruz <br />
              [email protected]</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.2</div>
    <div class="AccordionPanelContent">Content 1.2</div>
</div>
<span class="region">Visayas</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.1</div>
    <div class="AccordionPanelContent">Content 2.1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.2</div>
    <div class="AccordionPanelContent">Content 2.2</div>
</div>
<span class="region">Mindanao</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bukidnon Province</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">San Vincente; Baungon; Bukidnon</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Kalangan San Vincente Farmer’s Association</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Mr. Nonito Antoque <br />
            0926 904 7336</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
      <hr width="565" align="center"/>
      <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Brgy. Imbayao; Malaybalay City; Bukidnon</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>DENR Community-Based Rainforestation Project</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Mr. Felix Mirasol (CENRO & PASU)<br />
              [email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Compostela Valley Province</div>
    <div class="AccordionPanelContent">
        <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Maragusan; Compostela Valley</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>Kasilak Development Foundation</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Joemil Montebon<br />[email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
</div>
<script>
    var acc = new Spry.Widget.Accordion("acc", { defaultPanel: params.panel ? params.panel: 0 });
</script>
</body>
</html>
Notes:
Apart from the 14 errors created by the table elements and their style rules, the above document is HTML5 validated.
The panels count include the <span>'s so that panel 0 is Luzon and panel 1 is the first accordion panel
Because the <span>'s are part of the accordion, they take on the accordion style rules so that you will have to tweak them.
I hope this helps.
Ben

Spry accordion panel not lining up with top of viewport in FF3.5

Similar Messages

Maybe you are looking for