How to make Spry Accordion Content Panel with a variable content fit
I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.
<!DOCTYPE HTML>
<html>
<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>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps
Similar Messages
-
How to make spry accordion open on mouse hover ?
hi everybody i have just a simple question about spry accordion in cs4 it try to open it using mouse hover not onclick
can anyone help me plz ?This is one way
<!DOCTYPE HTML>
<html>
<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>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(0); return false;">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(1); return false;">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Another way is to have a SpryEventListener. Look that up for further info.
Ben -
Tabbed panel with adjustable/variable height based on content
Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?
Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all. -
How to make a mobile content in flash
plze does any one know how to make a mobile content in flash
You better ask in the Flash forum; this is the Flash Player forum.
-
How to make the LV front panel controls the current value through the programis set as the default value when the next time you open?
1110340051Try this: Re: How to make a VI remember the latest control value?
Jim
You're entirely bonkers. But I'll tell you a secret. All the best people are. ~ Alice -
How to make an hypertext link workable with adobe reader for IOS ?
Hello,
Hypertext links in a PDF file work perfectly well on Mac OS (Yosemite).
The same document on an IPAD with IOS is not able to open an hypertext link ...
How could I do to solve this problem ?
An author who want to publish electronic books with hypertext links on mobile devicesHello Steve,
All my best wishes for the new year.
To answer your question :
. I am writing books on my IMAC with Yosemite (10.10.1) using Word (14.4.7)
of OFFICE MAC.
. I can open Hyperlink connection by clicking on the link
. I save the document in a .PDF format
. This document is sent to my IPAD with IOS 8.1.2
. In this .PDF document I am no more able to open hyperlink connection
Please see attached an abstract of my book.
Thanks a lot for your help and advices.
Michel Poncet
Tel: +33 4 76 89 50 82
http://www.amazon.fr/Glariand-Copent/e/B007NXP7FU
De : Steve Werner <[email protected]>
Répondre à :
<[email protected]>
Date : vendredi 2 janvier 2015 03:34
À : Michel Poncet <[email protected]>
Objet : How to make an hypertext link workable with
adobe reader for IOS ?
How to make an hypertext link workable with adobe reader for IOS ?
created by Steve Werner <https://forums.adobe.com/people/Steve+Werner> in
Adobe Reader for iOS - View the full discussion
<https://forums.adobe.com/message/7058559#7058559>
Hyperlinks can be of several types. What are you linking to? Exactly what
application did you test the hyperlinks with on the Mac? What application
did you use to create the hyperlinks?
If the reply above answers your question, please take a moment to mark this
answer as correct by visiting:
https://forums.adobe.com/message/7058559#7058559 and clicking Correct¹
below the answer Replies to this message go to everyone subscribed to this
thread, not directly to the person who posted the message. To post a reply,
either reply to this email or visit the message page:
Please note that the Adobe
Forums do not accept email attachments. If you want to embed an image in
your message please visit the thread in the forum and click the camera icon:
https://forums.adobe.com/message/7058559#7058559 To unsubscribe from this
thread, please visit the message page at
, click "Following" at the
top right, & "Stop Following" Start a new discussion in Adobe Reader for iOS
by email
<mailto:[email protected]eso
ftware.com> or at Adobe Community
<https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=
14&container=4631> For more information about maintaining your forum email
notifications please go to https://forums.adobe.com/thread/1516624. -
Hi all, how to make slide show on Iweb with out QuickTime?
Hi all, how to make slide show on Iweb (with out QuickTime or link to YouTube) to be watched in any computer/system?
I used Imove - share - exported - medium (m4v)
This the one I did.
http://360motorcycleadventures.com
Must looking profissional (no YouTube frame)
The problem is: I lot people don't have QuickTime, any body can point me the right direction?
Thanks' in Advance.I use this slideshow often :
http://www.wyodor.net/iWebBlogTest/Wyodor_1/WebBanner.html
See it here in an iWeb page :
http://www.wyodor.net/_Demo/MyHouse/Huis.html
These are the slideshows :
http://www.wyodor.net/_Demo/Gardens/flagstones.html
http://www.wyodor.net/_Demo/Gardens/gardens.html
And here in a non-iWeb page :
http://www.wyodor.net/htmlegg/SmallCard/SmallSlideshow.html
This is the slideshow itself :
http://www.wyodor.net/htmlegg/SmallCard/VintageParis/
Or use WOW slider :
http://www.wyodor.net/htmlegg/TallCard/TallWow.html
There are lots of slideshows out there. Choose the one you like.
And search/browse this forum for other solutions. -
How to make pdf file auto open with adobe reader after downloaded
how to make pdf file auto open with adobe reader after downloaded
I note from your system details that you have the plugin for adobe pdf s so I would have expected the files should open in firefox '''without''' you needing to explicitly download them.
Once the files are open in firefox, you will also get the option to save them permanently to a location on your computer. If you wish I suppose you could set the file type pdf to be associated with and be opened by firefox instead of with the Adobe Acrobat Reader, but that would just seem to be an additional complexity. -
How to make a list item field with DATE data type?
I have a column with DATE data type. Using forms 6i I want to generate a poplist list item field with this column while the value of the elements in the list to will be day names like SATURDAY,SUNDAY,MONDAY. if we change the data type from date to char, it will work properly but now with DATE data type behind it, it gives the following error message
"FRM-32082: Invalid value for given item type.
List WEEKREST
Item: WEEKREST
Block: EMPRESTS
Form: MODULE3
FRM-30085: Unable to adjust form for output."
Using forms 6i how to make a list item field with DATE data type which can hold day names?Set your date column as a hidden (non-displayed) field. Create your list item with the varchar2 day names. Create the list item as a non-base-table field that accepts the text values of day names. On that field, create a when-validate-item trigger that translates the text into a real date, which it then uses to set the value of the actual base-table item.
-
How to make Windows 7 Clean Installation with the Rapid Boot extreme feature on ThinkPad T420s
How to make Windows 7 Clean Installation with the Rapid Boot extreme feature on ThinkPad T420s
@Bennycui,
Clean install here
http://www-307.ibm.com/pc/support/site.wss/document.do?sitestyle=lenovo&lndocid=MIGR-77353
Then install RapidBoot
http://www-307.ibm.com/pc/support/site.wss/document.do?lndocid=MIGR-77013
//JameZ
Check out the Community Knowledge Base for hints and tips.
Did someone help you today? Press the star on the left to thank them with a Kudo!
If you find a post helpful and it answers your question, please mark it as an "Accepted Solution"!
X240 | 8GB RAM | 512GB Samsung SSD -
How to make the mobile application work with firewall and anti-virus ON
Hi,
I keep on receiving internal processing error when i try to login sap mobile solution 1.3.0 on my ipad and i was provided a solution, that is to turn off my firewall and antivirus. I works by turn off both of it but i cant possible turn of the firewall and antivirus on the server.
Can anyone guide me how to make the mobile application work with firewall and anti-virus ON
Thank youDear Rajesh,
Create a policy in your fire wall to allow the port to send and receive data.
I believe the port for the mobile should be port 8080 and 8443.
And your license server port 30000 and 30001
nd.Q -
How to make "visa find resource" working with Agilent device
I am trying to use Agilent 82357B GPIB device with LabVIEW for instrument control.
I have checked:
1. NI-VISA (ver 5.1.1) is the primary visa by checking visa.dll properties under windows\system32 folder
2. Enable NIVISATulip.dll in NI Max Explorer
3. Enable the Agilent libraries to work with NI 488.2 in Agilent IO library (ver 16).
I am able to communicate with the instrument in Max Explorer and talk to the instrument in LabVIEW with VISA write for almost all commands.
But I can NOT make one particular visa function (Visa find resource) working with Agilent 82357B GPIB.
With NI USB GPIB device, the same code above can find attached instruments as below, where GPIB1 is the Agilent device and GPIB0 is the NI device.
I have no clue on how to make “visa find resource” working with Agilent device.
Please help.
Solved!
Go to Solution.Quick question. Did you also enable 488 support in Agilent?
If that does'not work try this. and well see if you found a bug
Jeff -
How to make a PDF file short ( with less memory)?
How to make a PDF file short ( with less memory)?
@nalinss
There are two ways: "Save as.." usually optimises size, but there is also "Optimize PDF" in the menu with many options what to exclude and to reduce in quality. Be careful here, as pictures can become very bad.
A note: the size of a PDF vastly depends on from what source it is created. For example, if you draw some vector graphics in Visio and print to Adobe Printer, the resulting PDF is usually quite small in file size. Opening it in Illustrator and saving it again after you, let's say, just moved one line, can make it 10x as big. This is due to big overhead, Illustrator creates and this can not be reduced anymore in Acrobat later on. Sometimes it helps to convert or "save as" such an inflated PDF to a different format like EPS or HTML and print or convert again to PDF.
So, if you created the PDF yourself and you still have the source, you may adjust settings in the export/print dialog to make it smaller. -
How do I make my Spry Accordion menu scroll *with* my webpage?
Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
padding-top: 410px;
float: left;
width: 210px;
HTML of same div class:
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?Here is my HTML Coding
<html>
<head>
<title>BetsyMarvin.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
<span class="toplogo"></span>
<div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="theme_02_design.html">Home Page</a></li>
<li><a href="blog_design.html">Blog</a></li>
<li><a href="lessons_design.html">Lessons</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Welcome to my Website</h1>
<img class="imageright" src="images/faith reason.jpg" border="0" />
<p>text</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">CONTACT ME</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p> <a href "mailto:[email protected]"> Email</a></p>
<p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
<p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
<p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">ABOUT ME</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>text</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">PASSIONS</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class ="imageright" src="images/love.jpg" width="130" height="64" />
<p>text</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2013 Betsymarvin.com | All rights reserved.</div>
</div>
</div>
<script type="text/javascript">
<!--
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:2});
//-->
</script>
</body>
CSS Style Sheet
body {
margin: 0px;
color: #666;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #545454;
background-image: url(images/page_bkgd.jpg);
background-repeat: repeat-x;
h1 {
color: #4F6179;
font-size: 24px;
font-weight: normal;
margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover { color: black; }
.container {
width: 980px;
margin-left: auto;
margin-right: auto;
background-image: url(images/content_bkgd_tile.jpg);
background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
width: 980px;height: 145px;
background-color: #4971a2;
background-image: url(images/banner_bkgd.jpg);
background-repeat: no-repeat;
.bannernav {
padding-top: 10px;
padding-left: 10px;
float: left;
color: white;
font-size: 10px;
font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
color: white;
text-decoration: none;
.bannernav a:visited {
color: white;
.bannernav a:hover {
color: #ECBB7B;
.toplogo {
position: absolute;
z-index: 100;
padding-right: 0px;
float: right; margin-left: 675px;
padding-top: 10px;
.content {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 10px;
background-image: url(images/content_bkgd.jpg);
background-repeat: no-repeat;
z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
width: 192px;
margin: 70px 0px 0px 0px;
padding-left: 8px;
float: left;
list-style-type: none;
.leftnavigation a{
margin-left: 0px;
width: 156px;
padding-left: 15px;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
float: left;
color: #CCA72F;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-image: url(images/nav_normal.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
border-bottom: 1px solid #999;
.leftnavigation a:visited{
color: #5C4C17;
.leftnavigation a:hover{
color: #ffffff;
background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
width: 400px;
padding-left: 30px;
padding-right: 20px;
float: left;
.contentright {
padding-top: 410px;
float: left;
width: 210px;
.imageright {
margin-top: 10px;
margin-left: 10px;
float: right;
.imageleft {
margin-right: 10px;
float: left;
/* FOOTER AREA */
.footerArea {
width: 980px;height: 88px;
background-color: #cfcfcf;
background-image: url(images/footer_bkgd.jpg);
background-repeat: no-repeat;
.copyright {
border-top: solid;
border-color: #737a90;
border-width: 2px;
margin-left: 240px;
margin-right: 30px;
padding-top: 12px;
color: #666666;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
overflow: hidden;
width: 255px;
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
color: #CCA72F;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
.AccordionPanelContent {
overflow: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
background-color: #000000;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
useFixedPanelHeights = null;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif); -
Spry Accordion Content not expanding fully
Hi,
I am trying to add some nice user friendly stuff to my site. I've created a Spry Accordion in which the content is images that I have created in photoshop. Some of the content is longer than 200px and will not show up in IE. When viewed in IE it only shows the 200px even though I have set a script that says fixed panel heights = false. I've updated everything to the updated spry...I'm going to attach all of the files that go with the dreamweaver file.
Please help me!
You can view the page at http://www.hofchurch.com/updated_site2/about_hof.php
CayleYou are using Spry 1.4, the latest version is 1.6.1, consider upgrading to the latest version.
Maybe you are looking for
-
FI link with pricing procedure in mm
In MM in pricing procdure there are two fileds Account key and Accruals key. I want to know how to create them and how to link them to the G/L account. These fields can be found in the "Calcualtion of pricing procedure" in the pricing of MM. Anybod
-
Alphabetic Quick Scrolling In Albums Produces Mixedup Listings
My video iPod (2nd Gen.) has started to produce a strange result whenever I use the Alphabetical Quick scrolling in my Albums list. For example In my Artists lists, when I scroll quickly it starts with all the numerical entries and then starts with t
-
Windows 10 technical preview BSOD when running Lightroom
I have been running Lightroom on a PC with the Windows 10 Technical Preview. I have been experiencing frequent crashed (BSOD) but they're primarily when I'm running Lightroom. I've never had any problems with Lightroom on Windows 7,8, or 8.1, but n
-
Hi, I would like to understand how SAP retrieves archived documents when we try to view line items for cumulative balance for a given period in FS10N. We are observing that each month some of the archived document are not getting retrieved where I ca
-
Lightroom 4 not loading onintel macbook with 10.6.8
I loaded lightroom4 on my mackbook intel duo running 10.6.8. I have 2 G ram and enough disk space. It seems to meet the posted requirements. The graphic card is a Intel gma950. When first loaded, I get the message " Lightroom 4.app will not run o