Sliding panels with dynamic heights

Hello,
I'm currently working with sliding panels. When I resize my
panels, the panel indexing system in spry does not seem to conform.
Ie, if my panels are 100px high. As soon as I dynamically
change them to 50px, panel(1) is no longer the second panel but
rather the fourth.
It appears that spry retains heights of elements. Is there
something in SprySlidingPanels.js I can call for it to
'recalculate' the heights?
Thanks

I was wrong!
Spry is indeed clever and retains panel number.
Doh!

Similar Messages

Horizontal Sliding Panels with 100% width

Hi,
Im trying to use horizontal sliding panels with a width of 100% for an expandable website. So far i got it working with the vertical sliding panles where if i increase the width of the site the sliding panels width increases as well, but how do i get them to float left and slide horizontally, if i change the slidingpanelscontentgroup width it messe up. so far here is the css:
.SlidingPanelsP {
width: 100%;
position: relative;
height: 300px;
padding: 0px;
border: none;
.SlidingPanelsContentGroupP {
width: 100%;
position: relative;
margin: 0px;
padding: 0px;
min-height:0;
border: none;
.SlidingPanelsContentP {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
.SlidingPanelsAnimatingP * {
overflow: hidden !important;
.SlidingPanelsCurrentPanelP {
Thanks in advance

Had a hard time find the solution, but this seem to work in major browsers, except Opera which does not like the 33.33% width apparently and shows a bit of next panel. You may be able to play with margin or padding to correct this behavior.
You have to know the number of panels and make the calculation of the SlidingPanelsContent class width accordingly. Here's my test page and code for you:
<!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>Document sans nom</title>
<script language="javascript" type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
#slidingPanel_1 {
    height: 200px;
.SlidingPanelsContentGroup {
    width: 300%;
.SlidingPanelsContent {
    height: 200px;
    float: left;
    width: 33.33%;
#content1 { background: yellow; }
#content2 { background: red; }
#content3 { background: green; }
</style>
</head>
<body>
<a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
<a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
<div id="slidingPanel_1" class="SlidingPanels">
     <div class="SlidingPanelsContentGroup">
        <div id="content1" class="SlidingPanelsContent">The Content 1</div>
        <div id="content2" class="SlidingPanelsContent">The Content 2</div>
        <div id="content3" class="SlidingPanelsContent">The Content 3</div>
     </div>
</div>
<script language="javascript" type="text/javascript">
   var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
</script>
</body>
</html>

Spry sliding panels with tab

Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?

Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image.

Sliding panels with tabs

Hello again,
Is there some way to change the orientation of tabs to bottom
in this example: Sliding panels with tabs?
that's all folks,
morpheto

You need to look at the code in the load handler of this JS
file:
http://labs.adobe.com/technologies/spry/home_assets/spry_home.js
If you add a tab, you need to add it to the list of items to
select in this statement:
Spry.$$("#nutshell, #widgets, #data,
#effects").addEventListener("click", function(){
switchTab(this.id); return false; }, false);
--== Kin ==--

Panel with dynamic form

I need to create panels with dynamic forms. Why does my application will have various forms and if I have to create a lot of forms it will take too long to complete my application.
Can anyone help me?

So my idea is as follows ...
I need to create various forms, actually I wanted to create a scheme where the forms to adopt the characteristics defined by me.
<s:Panel width="350">
            <mxml:CustomForm dataConfig="{dataConfig1}" width="100%" />
</ S: Panel>
Yo I'm adding the inputbox, LABES and buttons on the panel through the
dataConfig1 = new ArrayCollection ([
                    (Label: 'Name', message: 'Invalid name', validateType 'noblank', id: 'name', text: 'Pedro Claudio', required: true),
                    (Label: 'Mail', message: 'Invalid Email' validateType: 'email', id: 'email', text:'', required: true)
I wonder if this is the easiest way to create the forms?
How does this business of the panels child?

Report Formatting with Dynamic Height Header/Footer

I need to generate a printable report (pdf if possible) with a:
1) Header - Dynamic Height based on recordset output
2) Body - Recordset output, may carry over to multiple pages
3) Footer - Dynamic Height based on recordset out
In short, the whole page is dynamic- The header and footer need to be on every page and whatever height is left over to fit within the print area goes to the body and the line item output of each record (think invoice). Then the number of pages will depend on how long it takes to output the body recordset (but the header and footer MUST be on each page).
I have been trying to get this to work using cfdocument since CF7 and have never had any luck. It has not worked due to the reason that since the header and footer are dynamic height, I do not have any way to set the margins properly on page generation (so it shrinks the header or leaves excess whitespace).
Anyone recommend the best way to go about this? I have heard about the report builder and am not sure if that will fit these requirements. I appreciate any assistance!

When the footer goes to the 2nd page the page subform is incremented so you will have to reference the page subform as well. I suggest that you add a button (this is for a test only) to the footer subform and add the code app.alert(this.somExpression). Now render the form and make sure the footer stays on one page. Hit the button and take note of the someExpression. Now add enough rows to force the footer to a new page. Hit th ebutton again and take note of the changed somExpression. So to solve your problem you will have to find out which page your footer is on. and then construct your expression to incorporate this chane in expression. Note that the indexes are 0 based but the page numbering is 1 based.
Hope that helps
Paul

CreateTextfield with dynamic height?

Is it possible to use createTextfield with a fixed width, but
without defining height, so that it will size according to the
amount of text loaded into it from XML? I would like to do this so
that I can get the _height property at runtime to use for custom
scrolling of the text field. Thank you in advance!

So, if I can't have dynamic height, (assuming no reply
probably means "no" ;) ) I decided I would at least make it so the
height can be defined from the XML file. I added an "h"= 300;
attiribute to the node that contains the text in the XML file.
Everything loads properly and traces just fine, but when I try to
create the text field, nothing is there. I must have some wrong
syntax or something,or perhaps I have to define a font differently.
My font is in the library and linkage is set for exporting for
actionscript. Could someone be so kind as to take a look and see if
anything is obviously wrong? Thanks!

How to have a UILabel with dynamic height?

Hi, I have a UILabel which I created it programmatically. This UILabel consists of dynamic data and has line break. I tried setting this to my UILabel:
CGRect cuisineRect = CGRectMake(94, 66, 180, 50);
UILabel *cuisineStr = [[UILabel alloc] initWithFrame:cuisineRect];
cuisineStr.numberOfLines = 0;
cuisineStr.lineBreakMode = UILineBreakModeWordWrap;
If the UILabel text is higher than 50, it'll be cut off, without word wrap. Is it that I should set the init with position only, without the height and width?

Try implementing this method:
- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath;
You'll learn more if you figure out how to use it on your own or with google. If you come up empty, I'll show you some example code.
-Phil

How to fill my collapsible panels with dynamic content from PHP scripts?

Hi people,
I'm trying to generate dynamically generated content in a
Spry collapsible panel. Previously I've generated PHP files that as
an output generates a dynamic table with the data I want to show. I
figured it would be possible to use an php include option to
generate this table in a content section of a Spry collapsible
panel. However, when I do this the collapsible panels appear to
join and when panel1 is clicked all tables close instead of only
panel 1 and all tables are put benath each other without putting it
in each seperate panel. But when i replace the file with only the
text "content" it works fine. Do i maybe have to add some kind of
command at the end of my php file to make it look like the
"content"-text or is this not the problem?
I've been looking for the answer now for a couple of weeks on
various forums and nothing seemed to work for me. Can please
somebody help me out?
Greets,
Damian
The code in its non working form:
<head>

<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet"
type="text/css" />

<script src="SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
</head>
<body>

<div id="CollapsiblePanel1" class="CollapsiblePanel1">
<div class="CollapsiblePanelTab">Tab</div>
<div class="CollapsiblePanelContent"><?php
include('details_books.php');?></div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanelTab">Tab</div>
<div class="CollapsiblePanelContent"><?php
include('details_authors.php');?></div>
</div>

<script type="text/javascript">
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
<script type="text/javascript">
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
</body>

you need to save the page as a php page (.php) It works
fine

Sliding Panels with srollbar

Hello,
Is it possible to put a scrollbar on .SlidingPanels div
(assuming we use the following code:
<div id="apDiv1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1"><img src="./{image}" />
</div>
</div>
If i put overflow: auto; on it in my css nothing happens. The
SlidingPanelsContainer has fix height too and it is higher than
.SlidingPanels Div have.
PS: If i put it on SlidingPanelsContainer it works but the
navigation with Link (panel navigation with showPanel(index) )
bcause the requested panel is hidden beneath the
SlidingPanelsContainer.
Thank you in advance!

Hi originaliti,
Thank you for your reply. Already tried, that isn't working
either. By the way my idea was wrong. Even if i make it work that
is no good for me. You should ask why. Because if you slide the
rows with the links you won't be able to see the data before the
active row since it is hidden by the div which contains the
dataset, if you see what i mean.
this is the way how I get to this conclusion:
in the html:
<div class="scrollpanel" class="SlidingPanels" >
<div id="apDiv1" class="SlidingPanels" spry:region="ds1"
>
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1"><img src="./{image}" />
</div>
</div>
</div>
in style sheet:
.SlidingPanels { width:620; height:8000em; overflow: scroll;
position: relative; padding: 0px; border: 1px solid yellow;
display: block;}
.scrollpanel {width: 620px; height: 354px; overflow: auto;
position:relative;}
.SlidingPanelsContainer { width:auto; height:8000em;
position: absolute; margin: 0px; padding: 0px; border: 3px solid
green; display:block;}
.SlidingPanelsContent {width: 625px; height: 230px; border:
2px dotted red; }
Anyway Thank you originalit again for the reply.
If any one have more idea than please post it!

CS3/CS4 - Tree view with dynamic height/width

Hi,
I have a resizable panel that contains a treeview, when the panel is resized the treeview resizes but I would also like the treeview nodes to adjust their width. For the record, -my treeview nodes contain static text widgets and images.
Can I hook up some observers and manually resize the widgets when the panel resizes?
Kind regards Toke

If your node re-size needs are simple you may achieve it by setting e.g. kBindRight | kBindLeft on the appropriate widgets in the .fr file. For a complex view I'd extend PalettePanelView to create your own implementations of Resize (adapting the widget widths in there) and perhaps ConstrainDimensions.
Ian

Sliding Panels No Javascript Enabled,

I'm not crazy about how the Sliding Panels widget degrades if
JavaScript is disabled (it exposes all the panels side by side
horizontally). Go to the sliding panels widget example from Adobe
and disable your JavaScript:
Adobe
Sliding Panels example page.
As an alternative for users who have JavaScript disabled, I
would only like to show only the first panel (preserving the
original width of the sliding panel as if JavaScript were enabled)
or I'm looking for a way to create an error message (not on a
separate page, but in the section where the sliding panels would
be) that reads something like "please enable javascript etc. and
will hide the sliding panels content). Netflix does this with their
sliding panels if you have JavaScript disabled- located on the new
releases page after you login (would give the link but you have to
login). Or if someone has a better solution I am all ears. Thank
you.

elen,
I had to make the sliding panel the same height as my container div.
For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue.

Spry: Sliding panels - Next/previous buttons

I'm trying to make a horisontal sliding panel with next and
previous buttons. When the user are on the first panel I don't want
to display the previous button, or if the user are on the last
panel, I don't want to display the next button.
How can I check which panel thats active, and how can I get
the last panels ID/number?

var currentPanel =
sp1.getContentPanelIndex(sp1.currentPanel); // Current panel
var firstPanel = 0; // First panel
var lastPanel = sp1.getContentPanels().length - 1; // Last
panel

Sliding Panels Navigation Question

I'm using the sliding panels widget to display some image
thumbnails. The problem is, I'm displaying about 5 or so at a time,
and the showNextPanel function only moves the whole thing over by
one thumbnail, making it necessary to click it five times to show
the next set of thumbnails.
Mangled test file can be found
here.

Hello Luke,
I see there are 3 problems here you want/have to solve:
1. On page load you try to animate an element in page that
doesn't exists: thimbContainer. Every time you load the page in the
browser 3 alerts that the element is not found are generated by the
Spry Effects because the element isn't there. Please remove the
following code from the onload attribute attached to the body tag:
MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
2. The move next arrow doesn't work on the first click. The
problem appears because the SlidingPanel widget is instantiated
before the data to be putted in place in your page by the ds1 XML
DataSet. The regions are populated on page finish with the data but
the SlidingPanel widget will still try to animate the old,
incorrect element on the first click. To avoid this problem you'll
have to remove from page the SlidingPanel instantiation and
register a listener on the 'ticker' region update. Remove this
code:
<script type="text/javascript">
var sp = new Spry.Widget.SlidingPanels("ticker");
</script>
and just after the ds1 DataSet instantiation add the
following line:
Spry.Data.Region.addObserver('ticker',
{onPostUpdate:function(){sp = new
Spry.Widget.SlidingPanels("ticker");}});
3. To move the slider with the next 5 or prev 5 elements
you'll have to create your own functions that should add or
subtract from the current display index 5. The functions you look
for are:
function moveNextFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
var maxPanels = sp.getContentPanels().length;
if (idx > maxPanels)
idx = maxPanels;
sp.showPanel(idx);
function movePrevFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
var minPanels = 0
if (idx < minPanels)
idx = minPanels;
sp.showPanel(idx);
Please change the onclick for the previous and next arrows in
your Sliding Panels with calls to these 2 functions.
Regards,
Cristian

Sliding Panels 'Jumpiness'

I have a page in development using Spry 1.6.1 hosted
Here
The content in the sliding panels is dynamic, and the
animation 'jumps up' at the end. I've verified that this behavior
is the same in FF, Safari, IE 7, & Konqueror (OpenSuse 11 KDE4)
Thanks in advance for your help

After a nights sleep I poked at this again this morning and
resolved the issue I was seeing by editing the
SprySlidingPanels.css as follows:
comment out
.SlidingPanelsAnimating * {
overflow: hidden !important;
None of my content has scroll bars inside the panel and I was
trying to reduce the transforms - this seems to have done it

Sliding panels with dynamic heights

Similar Messages

Maybe you are looking for