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

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

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=

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>

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

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

Sliding Panels Bug?

Clicking buttons on the sliding panels widget causes the page
to jump to the top.

kinblas,
I figured out that adding "return false" to my javascript
statement on the link prevents the page jumping. Here is what I had
originally that was causing the jumping
<a href="#" onclick="sp1.showPreviousPanel(); ">
and here is what I changed it to to prevent the jumping
(notice the addition of the return false statement)
<a href="#" onclick="sp1.showPreviousPanel(); return
false;">
Just in case anyone else has this problem, hopefully it will
help them out.
r!

Sliding Panels Question

Hi there. I'm new to Spry, and I'm using 1.6.1 in Dreamweaver CS3. I want to create sliding panels to showcase some work I've done, but I wanted to know if it's possible to build a scroll function for one panel which will have multiple pieces of work (not a scrollbar).
There's not enough horizontal real estate to show all the work in this particular panel at once, so I want to put a "continue" or "next" and a "previous" button/function on that panel so the user can automatically view differents areas of the panel to see the rest of the related work, without creating a number of different panels for all this.
Is this possible in the sliding panels widget, or is there just one pass per panel? I hope my question is clear.
I'm trying to decide whether to build this in Spry or Flash.
Thanks in advance for any suggestions.
L

I dug around a bit more and saw an example that shows me that I can do this. Thanks anyway!

Sliding panels active link

Hi
So yeah. When using the sliding panels widget, I want to be
able to hightlight in the menu eg Prev 1 2 3 Next, which sliding
panel is currenly being viewed. This must work when either pressing
the page number or my clicking through using the Prev and Next
buttons.
Any ideas would be greatly appreciated.
Cheers
Jen

Did you check out the source code for that those panels?
http://labs.adobe.com/technologies/spry/samples/slidingpanels/sp_withTabs.js
Als you see, they use a separate function to set active classes to the tabs. You can use the same functionality for your active link class.

Sliding Panels: displaying active panel number, total panel count, etc.

I have an XML-generated Sliding Panels widget. How do I fetch the active panel number, total panel count, and disable Previous/Next buttons based on panel's place in the sequence?
In other words:
Panel 1 of 3 | < Previous (disabled) | Next >
Panel 1 (active)
Panel 2
Panel 3

I've not seen an example of exactly what you're trying to do, but take a look at the code for this page:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsFromData.html
It dynamically builds up the sliding panel from data and dynamically creates the list of numbered links based upon the number of panels.
In a quick look, there isn't a method of the Sliding panel object which tells you the index of the current panel, but you can get that by calling getCurrentPanel() and then loop over the panels which you can obtain by getContentPanels() and checking against each panel to see if it is the current panel and then that's the index of your current panel. From there you can set the "(active)" label and enable and disable the previous and next buttons, if you're at index 0, then disable previous and if your at getContentPanelsCount()-1 then you're at the end.

Sliding panels widget button

Similar Messages

Maybe you are looking for