Spry Accordion images and gaps

I have a url at
http://www.postersforschools.com/testing/events.php.
There are a few problems.
I am getting scrool bars in the first panel. I assume this is
because I have an image there but I am pretty sure this has not
happened before. Also this same panel does not show up at all on
Firefox. There is a space for it but no image. I have trashed my
Firefox prefs and installed a new Firefox application.
The Taste of Downtown panel has a large white space after the
paragraph that I cannot get rid of. I do not see anything in the
code causing this gap.
I have set the panels to auto height using "var Accordion1 =
new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights:
false });"
Thank you.

I finally figured it out. 2 hours later! Hopefully this will
help some other print/web designer. The image was CMYK from the
print project it came from. Duh!

Similar Messages

Spry Accordion Image Issue

I have inserted a Spry Accordion in Dreamweaver CS5, however, I'm having issues with the viewing of the tabs on load, on hover, etc. I want a dark blue tab on load, have it change to a wavy red white tab, and when opened go to a dark blue tab with a star. I can never get this to work as I want. I've checked the image files and they are labeled correctly. The test site is www.sbcvote.us/index_spry.html
I am a novice, and really have a hard time on this issue, that no doubt is not that complicated to those that know.
Thank you in advance for your help.
On my index page I have the css page reference.
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
the css code is:
.AccordionPanelTab {
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font:Verdana, Geneva, sans-serif;
color:#FFF;
font-weight:bold;
background:(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-color:#EEE;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
background:url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
.AccordionPanelOpen .AccordionPanelTabHover {
background: url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-color: #EEE;

Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it.

IE renders spry accordion glitchy and unusable (FF works perfectly)

Hi everyone, I'm making my Dad a website and I've adapted a spry accordion into a large table that expands the row over mouseover. The problem is that internet explorer (only tested in 7 so far) renders it almost unusable, however it looks fine in good old firefox which I was developing it on. Since I've spent so much time trying to make this damn thing I'm hoping somebody could come up with a solution to make it behave as it does in FF?!
Here's the link http://www.photronics.co.uk/spry.htm
Thanks!
Nick

Your problem stems from
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabClick(e, panel); }, false);
But you already knew that. You just wanted to test us
To get the panel to open on a mouseover event have a look here http://forums.adobe.com/message/2980659#2980659
Gramps

Spry Accordion jerky and not content filling correctly after refresh

Hello.
I have a page I'm trying to make a Spry Accordion work smoothly.
I've tried options such as, fixedHeight fps from 30 - 500, timer from 100ms to 1000ms, disabling Keyboard navigation, all working somewhat, BUT....
When opening and closing the panels sometimes they open to "fill content" and others no.
For example in the LEgal panel there is only one line. I would like that panel open to a height equal to the line height. Some other pabnels open partially then fully, and back again.
The animation can be pretty jerky.
I've duplicated the page and while playing with a JQUERY UI accordion it is pretty smooth.
IS there anything I can do to get the Adobe Spry to work?
http://corporate.fr/ce/clientsSpry.html
Ooops never mind. I will post this anyway as maybe other noobs will resolve the problem if they do as I did.
I stuck this
In the container after the div not realising the default <script> is put at the very end of the mark up just before the </body>
Two things learned, one when the Adobe document says the script has to go in after the mark up, that means not just after the div with the Spry but all the way at the end,
and two: if you modify the Spry options, note the var acc1 and the string "Acc1" have to be replaced with your Spry ID, in both places.

Hello to all,
I have spent HOURS trying to figure this out....
I know the above code is messy, but it does correctly do the accordions via innerHTML. I have a dropdown on my page and when the user changes the input there, I call "doSpryData" and it is supposed to 1) reload XMLDataSet and 2) redraw the Accordion (I would like to have different data displayed on the same page depending on what user selects). For some reason, it will not redraw the accordion and show the data after it has been done once.
I am really desperate so any ideas would be much appreciated!
Cheers,

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 Accordion Menu and Frames?

I have created a simple two column layout. On the right hand
side I have placed an accordion spry menu which seems to work well.
However rather than click on any one of the links and go to a new
page I want the new content to appear on the same page in another
frame.
Now from what I understand the use of frames is not W3C
compliant anymore and I know there is some way with DW CS3 to do
this, but this being my first real use with DW I'm not sure how.
Could someone please advise what the best solution for me
would be or at least point me to some online tutorial?
Thanks :)

> Now from what I understand the use of frames is not W3C
compliant anymore
That's not correct. But frames are a dirty trick to play on
your visitors,
and on yourself.
> Could someone please advise what the best solution for
me would be or at
> least
> point me to some online tutorial?
The best solution would be not to use frames. Other than
that, we would
really need to know more about what you are trying to
accomplish to direct
you to some learning resources.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"art_is_my_life" <[email protected]> wrote
in message
news:f8n86g$3ud$[email protected]..
>I have created a simple two column layout. On the right
hand side I have
>placed
> an accordion spry menu which seems to work well. However
rather than click
> on
> any one of the links and go to a new page I want the new
content to appear
> on
> the same page in another frame.
>
> Now from what I understand the use of frames is not W3C
compliant anymore
> and
> I know there is some way with DW CS3 to do this, but
this being my first
> real
> use with DW I'm not sure how.
>
> Could someone please advise what the best solution for
me would be or at
> least
> point me to some online tutorial?
>
> Thanks :)
>

Spry Accordion Not Working on Live Web Host

I added a Spry Accordion to my webpage and it worked perfectly when I previewed it in IExplorer from the link in Dreamweaver. However, once I launched my webpage to a live Web Host (Network Solutions-Unix platform), the Spry Accordion disappeared and "broke" the page. Text formatting disappeared and the text which was previously contained in the Spry Accordion was displayed vertically down the webpage instead of in the accordion. How can I fix this? Thank you!

ELR Enterprises wrote:
I added a Spry Accordion to my webpage and it worked perfectly when I previewed it in IExplorer from the link in Dreamweaver. However, once I launched my webpage to a live Web Host (Network Solutions-Unix platform), the Spry Accordion disappeared and "broke" the page. Text formatting disappeared and the text which was previously contained in the Spry Accordion was displayed vertically down the webpage instead of in the accordion. How can I fix this? Thank you!
Did upload the SpryAssets folder to your server?

Getting rid of gap between title banner image and Spry Menu bar?

Hi,
Here's what I have so far :
http://www.artbywaqas.com/TEST/index.html
How can I get rid of the gap between the banner image and the menu below it?

Please explain, what is the center element as in line 43 with the closing tag on line 94?
Also, wrapping the banner image in a paragraph element ensures that you will have a margin and/or padding above and below the element unless you specifically change the style rules to eleminate the marging and/or padding.
The quickest solution is to remove the center element (which does not exist) and change the paragraph elemnt to a div element.
Gramps

Using an image as label in Spry Accordion Menu

I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.

Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

Spry Accordion Widget hiccups and more

Hi, I am using the Spry Accordion Widget on my website and have the following problems:
1. Is there a way for the accordion movement not to affect the images that are placed below it. For example, I have the accordion placed on top of 3 different logos. Whenever, the accordion panels move up and down (in use) all the contents (below the accordion) moves with it. I don't want the logos to move up and down whenever someone clicks on the panels. How do I make the logos stationary so its placements won't change?
I don't want to use an ap div tag because that would force my website to be in a fix position on a page. All I have been using to position my graphics are div tags and floats; no ap div tags. If you resize the browser window you will see that my website is somewhat elastic. Meaning, the graphics are always in the center of the page regardless of the size of the browser window—this is something I want to keep.
Please go here for better understanding: http://meinaco.net/tblLists.html
2. When one of the accordion tab is clicked there seems to be some kind of hiccup/jump/jerky (up and down movement) before it settles/stops. Is there a way to fix that? I noticed the accordion moves up and down smoothly prior to my inserting the images into the tab panels. To be clear, the images I am referring to are the brown horizontal lines with white words on a green background. Do these images have anything to do with this problem?
3. When the 1st tab (the restaurant panel) is open and another tab is selected, the restaurant panel displays large incorrectly styled text for a brief second as it closes to allow the other panel to open. I know it has something to do with my style sheet but I can't figure out what is causing it. I checked my css files and it seems they all have the correct size. To see this problem reoccur please do the following:
Make sure the restaurant panel is open then click on another panel (one of the 3 panels). As you click on the second panel pay attention to the text that sits inside the restaurant panel. You will see that large minus leading text will appear for a split second.
4. When I run my webpage (url mentioned above) on Safari 4.0.3 there seems to be a blue line outlining the whole accordion widget. This outline doesn't exist on Firefox nor on Opera. Please see attached image for clarity.
Any suggestions or help on any of these problems is greatly appreciated! Thank you in advance.
Meina
I hope someone can help me resolve or give me suggestions for the 1st and 2nd problems at the very least.

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Combining image and text in accordion content panel

Hello,
I'm having difficulty displaying image and text together within an accordion content panel. What I need is a thumbnail photo of a staff member plus a short bio. I've put a panel together so it displays as needed in Live View, but not in IE8, Foxfire8, or Chrome. I'm using Dreamweaver 5.5, Spry 1.6.1, Windows 7.
Here's the code for the panel that includes an image not displaying:
<div class="AccordionPanel">
<div class="AccordionPanelTab">Stan Swiercz, Training Manager</div>
<div class="AccordionPanelContent">
<div class = "PanelImage"> <img src="/images/StanSwiercz.jpg"/></div>
Bio text goes here</div>
</div>
Here's a link to a test page (ignore funky color variations, still settling those). The panel that is set to open should display an image floating left with text wrapping, as it does in Live View.
http://cet-training.org/Test%20folder/people.html
I''ve double-checked documentation, help, and done searches, but can't find any information about what should be an easy thing to do. Any help out there?
Thank you very much,
George

The location of the image is http://cet-training.org/Test%20folder/images/StanSwiercz.jpg (click the link to see the image)
This is the markup from your document <img src="/images/StanSwiercz.jpg"/> which means that the image is located in the images folder which is located in the root directory.
Hence the image cannot be found by your document.
The following are possible solutions, please choose one only
change the location of the images folder to reside in the root directory
delete the leading slash from the link as in <img src="images/StanSwiercz.jpg"/>
change the link to an absolute value as in <img src="http://cet-training.org/Test%20folder/images/StanSwiercz.jpg"/>
Gramps

Inserting a Spry Accordion on top of a background image?

I created an 800 x 600 pixel graphic image in Adobe Photoshop CS4 to be used as an overall background image for a webpage. I also created a few navigation links from the image Layers using the Slice Select Tool, then optimized and saved the image as an html file using the Save for Web & Devices command in Photoshop. Next, I opened the html file in Dreamweaver CS4.
Is it possible to insert a Spry Accordion with a clear (transparent) background anywhere on top of that background image in Dreamweaver CS4 so that I can see the background image behind the text content of the Spry Accordion? I use Windows Vista.

Hi,
Yes, as is shown by the following code:
<!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>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: url(images/detail/cd1.jpg) no-repeat center;"> //use your own location and file
<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">

</script>
</body>
</html>

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

Spry Accordion not working in IE7 and IE6

My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
The site is www.christendom.edu/n. It is there on the left. I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
Please help!

Remove the offending comma (marked in red)
var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
I hope this helps.
Ben

Spry Accordion and jQuery UI Accordion for Widget Browser

I have Dreamweaver CS5 and used the spry accordion for a left menu. I then used the widget browser and added jQuery UI accordion. But there appears to be a conflict in that the spry accordion is not displaying the white font on hover, instead using the gray font from the jQuery UI accordion.
This may be a duplicate post, I asked this question on another section of this site, if so, I do apologize. Any help is greatly appreciated.
The page sample is
http://www.sbcvote.us/registrar/2006_form460.htm
Thanks to all,

In SpryAccordion.css you are telling the Spry Accordion to do exactly that.
Have a look at lines 97 and 100 where the colour is set to #555555
Gramps

Spry Accordion images and gaps

Similar Messages

Maybe you are looking for