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
Similar Messages
-
Beyond frustrated. Tried EVERYTHING suggested here, and still get the error as soon as I click on a widget in the browser to view. Logged in, logged out multiple times in both widget browser and extension site. Cleared roaming data. Reinstalled multiple times. Windows 7 and Dreamweaver CS5. Help!!!
Problems related to Adobe AIR:
http://helpx.adobe.com/air/kb/troubleshoot-air-installation-windows.html
http://www.badrit.com/blog/2011/1/27/adobe-air-cannot-connect-to-internet-with-error-code- 2032
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/ -
How can I sync bookmarks between my opera mobile browser and my new Firefox for android browser ?
I just installed Firefox on my Android, and wondered if there was sone way that I could sync my existing Opera mobile bookmarks to it so I don't have to go thru and add them manually ?
I suspect you need to sync Opera Mobile to a desktop PC, then export/import to get into Firefox. The reason I suspect this is the enhanced security and limited features on mobile browsers .
Opera's Sync solution: http://www.opera.com/link/
Firefox desktop import: [https://support.mozilla.org/en-US/kb/Importing%20bookmarks%20and%20other%20data%20from%20Opera Importing bookmarks and other data from Opera] -
How to use Spry and Jquery on the same page.
I'm using both spry (dataset) and jquery (datepicker) on my page. When I load the jquery script my dataset doesn't work.
I've done some research and found that I need to insert an observer that tells jquery when the spry dataset is finished loading. Found this information at: http://forums.adobe.com/message/2899897. I've tried implementing this into my script but just doesn't seem to work. Below is the script from my site, how would I insert an observer into this script?
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.HTMLDataSet("/test/fsasearch_results_dynamic.php", "search_results");
var ds2 = new Spry.Data.HTMLDataSet("/test/countstable_dynamic.php", "table");
$(function() { $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: nonWorkingDates, numberOfMonths: 2, minDate: +5, maxDate: +30});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Saturday], [Sunday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
return [true];
//-->
</script>Please post any SPRY related question in the SPRY forum.
-
Spry Menu bar 2.0 from Widget Browser only works in Firefox, not other browsers
Hello,
I have downloaded and customized the Spry Menu Bar 2.0 from Adobe Widget Browser.
I have made a seemingly functionable horizonatl navigation bar that will be displayed on all of my website's pages.
While in live view in Dreamweaver and when I preview the page in FireFox the entire navigation bar works and displays perfectly.
However, when I preview the page in another browser, like Safari, the navation does not display and shows up as an ordered list. I have tried a couple of fixes with no success. I have also spent some time searching the forums for an asnwer, but more commonly I find that people have problems with the spry menu functioning in Firefox while I have the exact opposite problem.
Please help! I'm to have this website completed by the end of next week!
Thank you!!Hi John,
Thanks, however, my site is still only on my local computer and not live or on a testing server yet. I could copy and paste my code in, I thought that may be cumbersome, but here goes :
<!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>Pennsylvania Academy of Music, Welcome</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="NavigationDec2.html" rel="stylesheet" type="text/css" />
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<title>Spry Menu Bar - Basic : December 2</title>
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryMenu.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPl ugin.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPl ugin.js'></script>
<style type="text/css">
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#f9e440;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:12px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 750px;
.MenuBarFixedCentered {
float: none;
width: 750px;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 4px 6px 4px 4px;
background-color:#f9e440;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#003366;
background-color:#f9e440;
width:82px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 8px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
font-size: 13px;
font-style: normal;
background-color:#c82f6a;
padding:2px 2px 2px 2px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#c82f6a;
color:#000000;
padding: 6px 10px 6px 5px;
width: 25em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #ffff99;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #ffff99; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #ffff99;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: #cc99ff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #FFFDB8;
color: #333366;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #c82f6a;
min-width:100px; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:10px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #c82f6a;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #ffff99; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #cc99ff; /* consider exposing this prop separately*/
color: #333366;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -2px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
<style type="text/css">
</style>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="Header"> </div>
<div id="mainContent">
<div id="Nav"><ul id="MenuBar">
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a>
<ul>
<li> <a href="history.html">History and Mission</a> </li>
<li> <a href="admin.html">Administration</a>
<li> <a href="faculty.html">Faculty</a>
<li> <a href="artists-in-residence.html">Artists in Residence</a> </li>
</ul>
</li>
<li> <a href="#">Programs</a>
<ul>
<li> <a href="lessons.html">Lessons</a> </li>
<li> <a href="classes.html">Classes</a>
<li> <a href="ensembles.html">Ensembles</a>
<li> <a href="adultprograms.html">Adult Programs</a> </li>
</ul>
</li>
<li> <a href="#">Departments</a>
<ul>
<li> <a href="choir.html">Choir</a> </li>
<li> <a href="ealrydevelopment.html">Early Development</a> </li>
<li> <a href="guitar.html">Guitar</a> </li>
<li> <a href="jazz.html">Jazz</a></li>
<li> <a href="piano.html">Piano</a></li>
<li> <a href="strings.html">Strings</a></li>
<li> <a href="theory.html">Theory and Composition</a></li>
<li> <a href="voice.html">Voice</a></li>
<li> <a href="windsandpercussions.html">Winds and Percussion</a></li></ul></li>
<li> <a href="admissions.html">Admissions</a> </li>
<li> <a href="#">Events</a>
<ul>
<li> <a href="concertseries.html">Concert Series</a> </li>
<li> <a href="studentevents.html">Student Events</a>
<li> <a href="festivals.html">Festivals</a>
</ul></li>
<li> <a href="community.html">Community</a> </li>
<li> <a href="#">Support</a>
<ul>
<li> <a href="donate.html">Donate</a> </li>
<li> <a href="volunteer.html">Volunteer</a>
</li></ul></li>
<li> <a href="contact.html">Contact Us</a> </li>
</li>
</ul>
</li>
</ul></div>
<div id="connect"> <div id="connectbox">
<img src="emailus.jpg" width="55" height="52" alt="Email Us" /><p>
<img src="apply.jpg" width="55" height="52" alt="Apply" /><p>
<img src="newsletter.jpg" width="55" height="52" alt="Newsletter" /><p>
<img src="Facebook.jpg" width="52" height="53" alt="Facebook" /><p>
<img src="Twitter.jpg" width="55" height="55" alt="Twitter" /><p>
<p></div>
</div>
<div id="pageheader"><img src="adultprograms.gif" width="800" height="61" alt="adult programs" /></div>
<div id="MainCopy"> <div id="copywide">General Copy about Adult Programs
<div id="classbox"><img src="earlymusicensemblece.gif" width="770" height="42" />
<p>
Directed by Rainer Beckmann, the Pennsylvania Academy of Music's Early Music Program provides opportunities for students to learn more about historical performance practice. The program's current activities focus on the school's Early Music Ensemble, made up of enthusiastic amateur musicians performing on recorders and violas da gamba. The recent donation of a two-manual harpsichord will allow the program to include special Baroque ensemble lessons in the near future. In addition, individual Academy students will have the possibility to be accompanied on an instrument regularly used in music of the 17th and 18th centuries. The class meets 1 hour per week.
</div>
<div id="smallclassbox"><img src="grouppiano.gif" width="770" height="42" />
<p>
Learn to play the piano in a group setting of 4-6 students. Classes are offered for all beginner piano students. Our qualified teachers will teach you to read notes and make music with your family and peers!</div>
<div id="smallclassbox"> <img src="amateurchamber.gif" width="770" height="42" />
<p>
This course is designed for the adult amateur who would like to play his/her instrument in a chamber music setting with other amateurs of the same level. Groups meet once a week for a one-hour coaching and prepare a work to be performed at the end of the semester. Coachings address both individual needs and techniques of collaborative playing.
</div>
<div id="largeclassbox"><img src="rockandroll.gif" width="770" height="42" />
This course traces the American popular music from the work songs of enslaved Africans through the Beatles. The course focuses on the history, theory, and sociological implications of gospel, blues, bluegrass, rhythm and blues, rock and roll, and psychedelic rock. Class will include lecture, discussion, and demonstration. Students will give presentations on popular styles of the 1980s, 1990s, and beyond.
Course Objectives:
In this course, students will:<br/>
1. Understand the development of various styles/genres of popular music.
2. Understand the connectivity of the cultural, political and social, with the musical.<br/>
3. Become familiar with music terminology in order to discuss music with insight and authority.<br/>
4. Develop keen listening skills enabling them to discern such elements as instrumentation, stylistic characteristics, and beats/grooves.<br/>
5. Gain insight into the recording industry and its effects on American culture.
</div>
</div>
</div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
</script>
</body>
</html> -
Why does my Firefox say my java applet is corruped and will,not download for my game
I play a lot of games on POGO and they tell me that I have to have JAVA and Mozilla Fire Fox for my browser. I have 1 game that I get kicked off of each time I try to play it. I get a notice telling me that my browser says my applet from Java is corrupted and will not download. I have done everything they suggest and nothing works. Mozilla seems to be a terriable choice for me as a browser I have a lot of ppproblems with them getting me to my web pages.. help!!
Hi,
Have you tried deleting the Java applet cache from the '''Java Control Panel''' > '''Temporary Internet Files''' > '''Settings''' > '''Delete Files...'''? -
Widget Browser can't be started
Hello,
I can't start the Widget Browser. I get the message "Unable to load WSDL. If currently online, please verify the URI and/or format of the WSDL (http://www.adobe.com/cfusion/exchange/exchangedwwidgetsfacade.cfc?wsdl)"
What can I do? I use Windows 8 and Mozilla, cookies are allowed.Widget Browser was deactivated quite a while ago.
Use the Adobe Add-ons - https://creative.adobe.com/addons
Or, manually use jQuery plugins.
Alt-Web Design & Publishing: Primer for Using jQuery Plug-Ins
Nancy O. -
Adobe Widget Browser does not complete downloads
Hi,
i run Adobe Creative Suite CS5 in German for Windows on a Windows Vista PC.
I switched off all antivirus and firewalls.
I logged on and off and on again to the Widget Browser (v. 1.0 Built 543) and Adobe Exchange web-site.
I checked various folders underneath appData.
The result is always the same: No widget download is completed. They all terminate with Error#2032.
Reading the forum does not give me any result.
i am grateful for all sort of help.Hi,
Thanks for your report issue to adobe and I'm sorry you're having problems with widget browser. Unfortunately you've reached the AIR forums. Do you mind reposting this question over on the Dreamweaver widget browser forum?
Thanks,Qingyan -
Guten Tag,
mein Widget Browser geht nicht!
Diese Fehler erhalte ich.
Ich nutze eine GDATA firewallHi DenisCGN,
Support for widget browser has been dropped in DW CC. See widget browser download
Thanks,
Preran -
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 and #wrapper issue
Hi
I am in the process of trying to put together a portfolio site as part of a CIW course. If you look at the current site www.jmacphot.com you will see on the equipment page I have tried to add a spry accordion and then a spry tabbed menu inside the accordion. However you will see that when I insert a large amount of information into the content area it pushes the tab over the footer and does keep the footer at the very bottom of the page... I am stumped as I have not set any specific height on my CSS to keep moving.
Can someone please advise where I might be going wrong here. Sorry if this question has been asked repeatedly but I am very new to web design.
Your help with this is greatly appreciated!
Regards
JohnThanks ben, I initially thought if I left the height of my wrapper blank and also the height of the spry content blank they would expand as more information was entered? Is there possibly and issue with CSS hierarchy?
Thanks again for your help!!
John -
Hi,
I having a problem with spry and accordion.
If I do this (1a) then the accordion no longer works.
1a.
<div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><div>About "{Title}"</div></div>
<div class="AccordionPanelContent about_art">
<div class="artwork_descript">{Quote}</div>
</div>
Now I'm sure some might say just do this then (1b) which works fine.
1b.
<div id="Accordion2" class="Accordion" tabindex="0" >
<div class="AccordionPanel">
<div class="AccordionPanelTab"><div spry:detailregion="data">About "{Title}"</div></div>
<div class="AccordionPanelContent about_art">
<div class="artwork_descript" spry:detailregion="data">{Quote}</div>
</div>
Well there is more to it. Really the final goal is this (2a). I want the accordion to only show if there is data to populate it.
This works fine as far as the data is concerned but having spry:detailregion="data" in any of the top two divs breaks it and it no longer drops down.
2a.
<div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data" spry:if="'{Quote}' != ''">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><div>About "{Title}"</div></div>
<div class="AccordionPanelContent about_art">
<div class="artwork_descript">{Quote}</div>
</div>
</div>
So my thought is I need to add some kind of observer but I'm not sure exactly what is needed or if an observer is even the right way to go. Any help is appreciated.
Thank you.Hi Gramps,
The example you linked is the same as what I put in 1b and that works fine. Thats not what I am trying to do.
Going from the example you linked I will explain further.
See in the example how you click the link on the left and in the accordion "Product Overview" and "New Features" get populated with new data.
So what I am trying to do is; lets say I click on the left for a specific item that does not have "New Features" so the only accordion to show would be "Product Overview". And "New Features" would disappear (not show).
That was the code I put in 2a.
2a.
<div id="Accordion2" class="Accordion" tabindex="0" spry:detailregion="data" spry:if="'{Quote}' != ''">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><div>About "{Title}"</div></div>
<div class="AccordionPanelContent about_art">
<div class="artwork_descript">{Quote}</div>
</div>
</div>
While this works to not show the accordion "New Features" it breaks the accordion function as a whole.
So the question is it possible to have the accordion function work like that?
Thank you for taking the time to look over my post.
Albert. -
Accordion widget browser panel height
I am using the accordion widget browser and would like to shorten the height of the
panels - how can I do this...I found the solution!
Sample of before: www.muohio.edu/lll/studyabroadweek/index2.html
Sampe of after: www.muohio.edu/lll/studyabroadweek.
The solution was at: http://docs.jquery.com/UI/Accordion#options but was a bit difficult for me to figure out how to implement it... after a bit of experiment - I got it!
In your .html document, at the beginning of the widget look for the code in black. Code in bold red is what was needed to solve the issue.
$(function(){
// Accordion
$("#jQueryUIAccordion").accordion({ header: "h3",
animated: "slide",
event: "click",
collapsible : "false",
autoHeight: false -
Dreamweaver jQuery Ui Accordion
I am using Dreamweaver and trying to change the background and text colors for the <h3> section and <p> Content in the jQuery Ui accordion and cannot seem to get it to work.
I have tried the theme and accordion.css but it does not seem to work. I have tried to find a tutorial and they all seem to reference using spry which is not used now.
Does anyone have any suggestions?Nancy - The accordion is on the home page: index.php. It works fine, but I want to change the appearance.
Dreamweaver inserts this when I add the Accordion to the page:
In the head:
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css" />
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css" />
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css" />
and
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
And just before </body> tag:
<script type="text/javascript">
$(function() {
$( "#Accordion1" ).accordion({
collapsible:true,
animate:{easing: "linear"},
heightStyle:"content"
</script>
And I added this in the body of the page:
<div id="Accordion1">
<h3>About us</h3>
<div>
<p>Westside Bridge Academy is central and west Houston's premier venue for duplicate bridge instruction and play.</p>
<p>We have open games every day and I/N games several times each week - see the schedule to the left for details.</p>
<p>We are a friendly and welcoming place for you to play.</p>
<p>We have the nicest directors and players!</p>
</div>
<h3>What we do</h3>
<div>
<ul>
<li>You get an individual summary at the end of the game so you can easily check your scores!</li>
<li>You get an individual summary emailed to you only a few minutes after the game!</li>
<li>We use "The Common Game"; for details click below. </li>
<li>We offer complimentary snacks, coffee, and tea!</li>
<li>We have a full schedule of classes!</li>
</ul>
</div>
<h3>The Common Game</h3>
<div>
<ul>
<li>We play the same hands as hundreds of other clubs across the US and Canada.</li>
<li>You see your results compared with everyone who played the hand.</li>
<li>The results often come with expert commentary.</li>
<li>Results are match-pointed across the entire field - hundreds of tables!</li>
<li>Monthly winners are compiled and reported.</li>
</ul>
</div>
</div>
So I think I have all the coding correct, or at least workable.
It sounds like I need to replace one or all of the .css files with the one you specified. Is that correct?
Thanks for the help. -
Globally open and close all accordion panels
Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==--
Maybe you are looking for
-
Can't open Aperture after Snow Leopard to Mavericks upgrade.
Upgraded to Mavericks from Snow Leopard. Now, the Aperture icon in the dock is greyed out. When I try to open it I get the message that I have Aperture 3.2.4 and it can't be opened with Mavericks. I purchased Aperture from the App Store when I had Sn
-
Manual Bank Subaccount Clearing 1:N – Profit Center Assignment within NEW GL
Hello guys, What is the common practice to do Manual Bank Subaccount Clearing for Vendors outgoing payments? My main concern is Profit Center Assignment within New GL. The business process is: Payment Program (F110) creates multiple JEs to Bank Subac
-
lost ratings from itunes libarary following transfer to new mac book pro
-
How to make a web template as standard template
hi, we are trying to make the custom web template as the standard template. So, that it would be the basic template when we create a new template. could anyone let me know how to make the template as default template Thanks, raghavendra pothula
-
hi , i have exported the data from one server using script , but i gave the delimeter as comma(,) and now the file is not being loaded in the application . It works fine when i give the tab but its not getting loaded with comma .The size of the expor