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

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

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

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

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 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>

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

How to apply sliding panels Spry Widget in Dreamwevaer CS4

Could someone please share how to apply sliding panels widget in Dreamwevaer CS4 as it is not in insert spry panel?
Thanks kindly!

Hi Brad,
I meant something like this:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
or the one used on their site:
http://labs.adobe.com/technologies/spry/home.html
Thanks kindly

Two sliding panels/w tabs widgets on the same page?

I would like to use two of the same widget (Sliding Panels/w
tabs) on the same page.
How can I get two instances to function independently and not
break each other....?
I edited the sp_withTabs.js file by duplicating the first
section below copying it, modifying it, and then pasting it below
as the second section:
// Turn the slidingPanel region into a real sliding panel
widget.
Spry.$$("#slidingPanel").addClassName("SlidingPanels");
Spry.$$("#slidingPanel >
div").addClassName("SlidingPanelsContentGroup");
Spry.$$("#slidingPanel .SlidingPanelsContentGroup >
div").addClassName("SlidingPanelsContent");
sp2 = new Spry.Widget.SlidingPanels('slidingPanel');
// Turn the slidingPanel2 region into a real sliding panel
widget.
Spry.$$("#slidingPanel2").addClassName("SlidingPanels");
Spry.$$("#slidingPanel2 >
div").addClassName("SlidingPanelsContentGroup");
Spry.$$("#slidingPanel2 .SlidingPanelsContentGroup >
div").addClassName("SlidingPanelsContent");
sp2 = new Spry.Widget.SlidingPanels('slidingPanel2');
This actually gets the second instance to function properly,
but now the first instance is "frozen".

Chapman, i know its been a while
but where on the JS file is the part you changed?
I cant find that in mine
check out my page:
http://www.pupr.edu/department/industrial/students.asp
Im trying to do that same thing, but a sliding panel inside another one.
The one inside isnt being recognized as a slliding panel, im thinking its the same problem you were having.
If you need me to copy the .js file let me know!
This is working with the Spry Sliding Panels Widget

Possible to have two occurences of sliding panels in same location on page?

Hi, any help you guys could give me would be greatly appreciated.
I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
Here's the page I'm working with, with only one of the Content Groups active:
http://www.susanmeyerart.com/redesign/
eta: I'm working with Spry Pre-Release 1.6.1.

I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
This may not work, but, as they say...you don't know until you try!
Beth

Sliding Panels

Have a problem with the sliding panels widget. Say for
example I have 2 panels - each with a number of form fields on. If
I tab through the form fields on panel 1 the focus automatically
goes to the form fields on panel 2 and therefore panel 2 is visible
in it's current position.
Here's an example:
Spry
Panel Test
Any ideas how to fix this?

So the problem with just showing the panel that has focus is
that we don't know what the designer/developer intended. For
example, the sliding panels widget could be used to present a
wizard, where the user is not allowed to proceed to the next page
(panel) until they have dones something specific.
So a possible workaround for this is to use CSS to hide
elements that are not visible. Elements on the page that are not
visible, can't receive focus. Try adding the following CSS
somewhere *BELOW* SprySlidingPanels.css on your page:
<style type="text/css">
.SlidingPanelsContent {
overflow: hidden;
.SlidingPanelsContent * {
visibility: hidden;
.SlidingPanelsCurrentPanel *, .SlidingPanelsAnimating * {
visibility: visible;
</style>
The sliding panels widget programatically places
SlidingPanelsCurrentPanel and SlidingPanelsAnimating classes on the
various panels at strategic times. The styles above make use of
these classes to hide content when they aren't showing. Thus
preventing them from getting focus. Note that the overflow:hidden
on the SlidingPanelsContent class is necessary because if it is
auto or scroll, the browser will place the div in the tab order so
it can get focus. If it is overflow:hidden, it does not do this.
--== Kin ==--

Sliding Panels Help for Javascript Idiot

I have a simple thumbnail gallery to which I am attempting to
apply the Spry Sliding Panels widget. I am creating the gallery
from an xml file, and this seems to be working fine.
I looked at the code of the Sliding Panels examples, but
being the Spry and javascript idiot that I am, I was not able to
incorporate the Sliding Panels successfully. Would someone mind
taking a look at my code and perhaps commenting about how I would
go about adding the sliding panel? I would appreciate it.
P.s., I currently have 5 thumbnails visible. I would like to
slide to the next 5 on the click of the arrows that are included.
Here is the code, without any of my failed attempts at SP
included:

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright">
<a href="#">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft">
<a href="#">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>

Thanks for the response.
I have tried to implement that, and it still does not work.
Here is my code with it implemented.
Thanks again.
<script type="text/javascript">

</script>
<script type="text/javascript"
src="scripts/gallery.js"></script>
<<<<<<<<<<<<<<body>>>>>>>>>>>>>>>

<div id="thumbsmask">
<div id="thumbsbox" spry:region="dsPhotos dsGalleries
dsGallery">
<div id="p{ds_RowNumber}" spry:repeat="dsPhotos">
<div class="thumb">
<img id="tn{ds_RowID}"
alt=""
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100,
30, true)"
onclick="HandleThumbnailClick('{ds_RowID}');"
title="tn{ds_RowID}" />
</div>
<div class="thumbspacer"></div>
</div>
</div>
</div>

<div id="arrowholder">
<div id="arrowright" spry:if="{ds_RowNumber} % 2 == 0
&& {prevStartIndex} >= 0">
<a href="#" onclick="sp1.showPanel('p{prevStartIndex}');
return false;">
<img src="images/arrowright.png" alt="left" width="20"
height="20" align="right" border="0" />
</a>
</div>
<div id="arrowleft"spry:if="{ds_RowNumber} % 2 != 0
&& {nextStartIndex} < {ds_RowCount}">
<a href="#" onclick="sp1.showPanel('p{nextStartIndex}');
return false;">
<img src="images/arrowlef.png" alt="right" width="20"
height="20" border="0" />
</a>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("thumbsmask");
</script>

Vertical Sliding Panel Code

I want to create some vertical sliding panels but can't seem
to find the JS and the spry code files anywhere on the Spry site. I
have CS3 but they do not include this as a built in widget. Is
there a place where I can get the code so I can implement this?
Seems easy enough.
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html

jergerb wrote:
> I want to create some vertical sliding panels but can't
seem to find the JS and
> the spry code files anywhere on the Spry site. I have
CS3 but they do not
> include this as a built in widget. Is there a place
where I can get the code so
> I can implement this? Seems easy enough.
>
>
>
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
FWIW: the sliding panel widget isn't built into DWCS4 either.
The page you linked to has all the code you need, simply view
source and look for the vertical section in the code. If it's
easier, you can also check out the samples within the Spry
Download:
http://labs.adobe.com/technologies/spry/home.html
and look within the "samples" folder and open up the files for the
various sliding panel examples to see how the code is constructed.
Also, you can visit Spry API page:
http://labs.adobe.com/technologies/spry/articles/data_api/index.html
click on Sliding Panels on the left, then Overview, and you'll see
the code you can insert into your page as well as a list of the
required JS and CSS files for the panel.
HTH
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Sliding Panels widget

Similar Messages

Maybe you are looking for