Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Similar Messages

Edit JS on spry sliding panels widget to fix auto panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
    var current = sp1.getCurrentPanel(); // Get the current panel
    var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
    var panelNumber=1; // Give a value to the first panel number
    Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                 if (node.id==current.id){ // The current panel now receives a number
         if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
           if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
        panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.

wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department

Sliding panels widget button

I have an issue with the buttons in the Sliding Panels Widget
after I implemented it in my page. The first time, I have to click
a button twice in order to have it working. Has someone seen this
problem before?

Hi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg

Spry Sliding Panel Widget Template

I have inserted the Spry Tabs and Accordion widgets and
adjusted using CSS. Can I do the same with a Spry Sliding Panel
Widget?, if so where can I access a sliding panel widget to
adjust?.
I have found a tutorial to create a Spry Sliding Panel Widget
inserting code, but my code experience is zero.
Thanks

Also copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href=

Sliding panel widget controls a la Brightcove website

I'm interesting in building a sliding panels widget with controls that behave as seen on the Brightcove website (Aug.2010). Specifically, when the user clicks on the previous or next buttons, the controls along the bottom change to an "active" state to properly indicate which is the current slide/panel. I assume this would be achieved through javascript. I have been trying to find a source where this method has been documented and have had no luck so far. Can anyone point me in the right direction?
Thanks in advance for any advice.

Brightcove uses a JQuery sliding panel. Google the subject and you will find your answer.
If you want to use Spry, have a look at the second example here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Or have a look at customizing http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2141541

Problem with Drag and drop in panel dashboard

Hi
I am having problem with drag and drop in panel dashboard.
I will explain what i am doing.
I am using Oracle three column template in First region i am having a table that showing all customer.
I drag one record from my table and drop it on customer info (CIF) page on second region it is working fine.
my CIF page has a dashboard with 6 panel box. i am showing 6 different jsff in 6 panel box.
I put drop target in each jsff
<af:dropTarget dropListener="#{backingBeanScope.backing_customerinformation.handleItemDrop}"
actions="COPY">
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"
discriminant="CustomerSearchDnD"/>
</af:dropTarget>
when i put drop target my panel boxes moves only when i drag it to another panel box header not entire part of panel box.
if i remove the drop target then panel box move normally as the example given on: [http://adfui.us.oracle.com:7778/faces-trunk/faces/visualDesigns/dashboard.jspx?_afrLoop=2021391022520156&_afrWindowMode=0&_afrWindowId=null] but in taht case i am not able to drag and drop my data

You must be an Oracle employee as you're referring to a component in the upcoming JDeveloper version which has yet been released to the general public. Oracle employee's are, I believe, directed to post on internal Oracle forums.
CM.

A problem with copy/paste from extract panel in Dreamweaver 2014.1.1

I have a problem with copy/paste from extract panel in Dreamweaver 2014.1.1 :
Russian letters pasting in dreamweaver html in such way: ffd0 ff9e ffd0 ff9a ffd0 ff9e ffd0 ff9c ffd0 ff9f ffd0 ff90 ffd0 ff9d ffd0 ff98 ffd0 ff98
Can you help? What could it be?

Hi,
I test the issue with my colleague and didn't find the same issue.
Here is the screenshot:
So please check if Lync Server 2013 and all the issued Lync 2013 client update to the latest version firstly, it not update to the latest version, update it and then test again.
Best Regards,
Eason Huang
Eason Huang
TechNet Community Support

Spry Sliding Panel Widget problem

I have tried to use the Spry Widget Sliding Panel code from
the Adobe tutorial and I keep getting an error message. The message
is that "Spry" is undefined in line 26. Please help! I have been
trying to figure this out for 2 days. Is there any code I have to
change in the .css file or in the .js file that comes with the Spry
Widget Sliding Panel download.
I am just getting familiar with the on-line community and I
have posted this to two other fora -- so please forgive the
repetition. I am also new to Spry and am eager to learn how to use
it. I hope it is not too advanced for my level.
Attached, please find the code.
Attach 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>
<link href="SprySlidingPanels3.css" rel="stylesheet"
type="text/css" />
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
</head>
<body>
<a href="#" onClick="sp0.showPanel(0);"> Panel
1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel
2</a>
<a href="#" onClick="sp2.showPanel(2);">Panel
3</a>
<a href="#" onclick="sp3.showPanel(3);">Panel
4</a>
<div id="slidingPanel_1" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div id="sp1"
class="SlidingPanelsContent">Content1</div>
<div id="sp1"
class="SlidingPanelsContent">Content2</div>
<div id="sp1"
class="SlidingPanelsContent">Content3</div>
<div id="sp1"
class="SlidingPanelsContent">Content4</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanel_1");
</script>
</body>
</html>

quote:
Originally posted by:
kinblas
If you're getting a "Spry is undefined" error, it probably
means that the browser is not finding the JS files you included at
the top of your HTML file. Make sure the path to your JS files are
correct ... you can do this by trying to load the JS files directly
in the URL field at the top of your browser.
--== Kin ==--
if u look at the code.. u will seee:
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
it should be
<script src="SprySlidingPanels.js"
type="text/javascript"></script>

Sliding Panels widget

Hi,
I do not know if this is the right place. If not, please tell me where to ask.
I do not know nothing of programing and my use of a program is to "click" on shortuct. I am familiar with using Tabbed panels, Accordion and Collapsible panel.
But I would like to know how to use sliding panels. I have read a lot on this links:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS5F39D2B9-A298-472a-8E50-AC4B1 0984EFC.html
but I do not know how to start. I do not understand English very much and do not have computer knowledge.
So, is there a way for me to "click" on a widget or icon of a SPry to make sliding panels?
On this link are samples, but I realy have no idea, how to make this.
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Thank you

Hi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg

Jump Menu for Sliding Panels Widget

I have used the sliding panels tutorial to build a 15 page
sliding document inside a new site I am building. It works
briliantly. However I want to be able to use a jump menu to access
any of the 15 pages as well as use the next and previous buttons.
I tried by inserting a form, then jump menu but couldnt put
it all together code wise.
Is it possible to use a jump menu for this widget (Im sure it
must be) and what bits do I put where? Any ideaas greatly
appreciated.
Nigel

OK Ive given it a shot but I dont where to put that code in
the mix so to speak.
The widget code skeleton is below: as per the tutorial.
Where exactly in this mix would I put the code you suggested.
Im not sure if its css, html or js.
Sorry Im such a novice at this business but I would be very
grateful for a bit more help here.
Nige
<!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 type="text/javascript"
src="SpryAssets/SprySlidingPanels.js"></script>
<link type="text/css" rel="stylesheet"
href="SpryAssets/SprySlidingPanels.css">
<script type="text/javascript">

</script>
</head>
<body>
<a href="#" onclick="sp1.showFirstPanel();">First
Panel</a>|<a href="#"
onclick="sp1.showPreviousPanel();">Previous Panel</a>|
<a href="#" onclick="sp1.showNextPanel();">Next
Panel</a>| <a href="#"
onclick="sp1.showLastPanel();">Last Panel</a>|
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">Panel
1</div>
<div class="SlidingPanelsContent" id="p2">Panel
2</div>
<div class="SlidingPanelsContent" id="p3">Panel
3</div>
<div class="SlidingPanelsContent" id="p4">Panel
4</div>
<div class="SlidingPanelsContent" id="p5">Panel
5</div>
<div class="SlidingPanelsContent" id="p6">Panel
6</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
</body>
</html>

Spry Sliding Panel widget

Okay, So I'm dense at times!
I want to try and learn the Spry Sliding Panels. Problem is that it does not appear in my Insert – Spry menu. After reading at Labs it assumes that since I have DW CS4 that it is installed. I can't be that dense.
Yeah, I located the CSS and and JS files online at Adobe. But that sure won't install it into my DW – Insert menu.
Am I really that dense?

To my knowledge it shouldn't appear in the insert menu?
I did the below tutorial to learn all about sliding panels.
The tutorial will show you how to link your js and css files to your html etc, which make the panels work.
http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html

Problem with Accordion Panels

Hi
I have an issue with Accordion Panels.
http://characteraday.businesscatalyst.com/guided.html
You can see in the link above that I have Accordion Panels on the right side that say open/close tip. The first one open and close and displays the tip. All the others do the same but when they open then push the one under it down. The first one does not do this and I like this a lot better. Any ideas how to make them all work the way the first one "Enter the Character's name" works.
Thanks for your time.

Modify the following line by adding the mark-up coloured red.
<div class="AccordionPanelContent"><span class="CollapsiblePanelContent"><img src="productimages/tinyimages/doorkitseat.jpg" width="50" height="50">The <strong>Door Insert Kit</strong> is a bathtub conversion kit. By removing a portion of the bathtub wall and inserting a door, an existing bathtub becomes accessible, retaining its use a a bathtub. <em><a href="doorkitandseat.html"><strong>More</strong></a></em></span></div>
I hope this helps.
Ben

Problems with accordion and animation

hi,
I have problems with the animation of the accordion widget
Accordion with 3 panels
panel1 no link but three subpoints with links
(for example: panel1: home, sublinks: me, you, us)
panel2 is a link with no sublinks
panel3 no link but two subpoints with links
PROBLEM:
If I turn on panel1 the animation works (there is no link on
panel1)
If I turn on panel2 the animation DON'T works (there is a
link on panel2)
what am I doing wrong that there is no animation ?
thanks

Sorry kimblas, you are quite right! That'll teach me not to
jump in without reading the comments :) OK, make a few changes
suggested by Steve, and played around with the css as per the
example (I think). It now works fine in Firefox if a little slow
(I'm assuming this is to do with the Flash movie and my painfully
old PC) but in IE7 it still wants to display the whole of the
selected content prior to the animation. Interestingily this wasn't
the case until I began to tinker to the recommended settings.
Unfortunately I can't get back to where it was to suss out what
code sorted it, nothing now seems to make a difference. Any
ideas?

Displaying problem with accordion

Hi. I'm facing this issues a long time. Sometimes it is
working, sometimes not....
If you click panelTab 'a little bit' quicker and not so nice
(meaning double clicking, clicking immediately another accordion
tab after you clicked previous), previously clicked tabs
accordionPanelContent is still visible and it is displayed over
opened panel below. everything is so strange. sometimes it works in
FF and in IE, sometimes nowhere, sometimes just in FF etc etc... it
occurs when enableAnimation is set to true, especially with high
duration set. im really confused.
i searched on net for some solutions but i found just
"solution" for dojokit accordion (and there was said that this
occurred just in IE, but it occurs in FF too - at least in my case)
but nothing on adobes spry accordion.
so i'm wondring if anyone in here faces similar strange
problems with this...

Hello Daniel,
This is the Adobe Dreamweaver Developer's Toolbox forum, I think you are looking for the Spry forums.
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Shane

Problem with Date fields in Search panel

Hi all,
I use TP2 and in my jspx page I have a search panel with two date fields and table where the results is displayed. But there is a problem with these date fields, because when I search dates the results is nothing even I retype the date from table. Also I have other pages where this problem exist with same structure.
Could somebody help me with some advice?
Thanks in advance!

Hi Frank,
Thanks for the answer.
I use the standart method to make search panel with drag and drop the data control to the page. The other search panel fileds work fine, only the date fileds are problem. Maybe something in view object doesn't work properly.
Here I post the code from my page.
<table border="1" style="margin:5px;">
<tr>
<td>
<af:showDetailHeader text="ТЪРСЕНЕ" disclosed="true"
inlineStyle="width:780px;">
<table cellspacing="2" cellpadding="3" border="0">
<tr align="left">
<td align="right">
<af:outputLabel value="#{bindings.EGN.hints.label}"/>
</td>
<td align="left">
<af:inputText value="#{bindings.EGN.inputValue}"
label="#{bindings.EGN.hints.label}"
columns="#{bindings.EGN.hints.displayWidth}"
maximumLength="#{bindings.EGN.hints.precision}"
simple="true"/>
</td>
<td align="right">
<af:outputLabel value="#{bindings.LNC.hints.label}"/>
</td>
<td align="left">
<af:inputText value="#{bindings.LNC.inputValue}"
label="#{bindings.LNC.hints.label}"
columns="#{bindings.LNC.hints.displayWidth}"
maximumLength="#{bindings.LNC.hints.precision}"
simple="true"/>
</td>
<td align="right">
<af:outputLabel value="#{bindings.AccPersonID.hints.label}"/>
</td>
<td align="left">
<af:inputText value="#{bindings.AccPersonID.inputValue}"
label="#{bindings.AccPersonID.hints.label}"
columns="#{bindings.AccPersonID.hints.displayWidth}"
maximumLength="#{bindings.AccPersonID.hints.precision}"
simple="true"/>
</td>
</tr>
<tr align="left">
<td align="right">
<af:outputLabel value="#{bindings.PersonName.hints.label}"/>
</td>
<td align="left" colspan="5">
<af:inputText value="#{bindings.PersonName.inputValue}"
label="#{bindings.PersonName.hints.label}"
columns="#{bindings.PersonName.hints.displayWidth}"
maximumLength="#{bindings.PersonName.hints.precision}"
simple="true"/>
</td>
</tr>
<tr align="left">
<td align="right">
<af:outputLabel value="#{bindings.DateFrom.hints.label}"/>
</td>
<td align="left">
<af:inputDate value="#{bindings.DateFrom.inputValue}"
label="#{bindings.DateFrom.hints.label}"
simple="true">
<af:convertDateTime pattern="#{bindings.DateFrom.format}"/>
</af:inputDate>
</td>
<td align="right">
<af:outputLabel value="#{bindings.DateTo.hints.label}"/>
</td>
<td align="left">
<af:inputDate value="#{bindings.DateTo.inputValue}"
label="#{bindings.DateTo.hints.label}"
simple="true">
<af:convertDateTime pattern="#{bindings.DateTo.format}"/>
</af:inputDate>
</td>
</tr>
<tr>
<td align="right">
<af:commandButton actionListener="{bindings.Execute.execute}"
text="#{bundle.FindBtn_LABEL}"
disabled="#{!bindings.Execute.enabled}"
icon="/images/find.png"/>
</td>
<td align="left">
<af:commandButton text="#{bundle.FindClearBtn_LABEL}"
icon="/images/find_clear.png"
action="#{PeopleBean.onClearVCBtn}"/>
</td>
</tr>
</table>
</af:showDetailHeader>
</td>
</tr>
</table>
Also I have a result table for the search panel, but I don't believe the problem can be there because it works fine when I search in fields different by inputDate.
Do you have any suggestions?

Problem with Accordion Widget INSIDE Sliding Panel Widget

Similar Messages

Maybe you are looking for