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>

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

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

How do i style an inactive navigation for sliding panel?

How can i style my navigation when they are not active(for example i would like to style my "previous" navigation arrow in a specific manner when there is no previous content to show)

With great difficulty. We must first determine the current panel and then, if the current panel is 0 then the previous button has to be changed and if the current panel matches the total number of panels, the next button has to be changed.
The following is a complete document that will work. Make sure you have all of the support (read JS) files in the allocated directory.
<!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>Sliding Panels Example.</title>
<script src="SpryAssets/SprySlidingPanels.js" language="javascript" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanelsContentGroup {min-height:0;}
.disabled {color:#F00;}
</style>
<script>
function slideNextPanel() {
     sp1.showNextPanel();
     var currentPanel = getCurrentPanel();
     var panelCount = sp1.getContentPanelsCount()-1;
     if (currentPanel==panelCount) {
          Spry.$$("a#nextPanel").addClassName("disabled");
     } else {
          Spry.$$("a#previousPanel").removeClassName("disabled");
function slidePreviousPanel() {
     sp1.showPreviousPanel();
     var currentPanel = getCurrentPanel();
     if (currentPanel==0) {
          Spry.$$("a#previousPanel").addClassName("disabled");
     } else {
          Spry.$$("a#nextPanel").removeClassName("disabled");
function getCurrentPanel() {
     var className = 'SlidingPanelsContent'; //change the className that is on all your content panels..
     var panelCount = sp1.getContentPanelsCount();//get panel length
     var current = sp1.getCurrentPanel(); //get current panel
     var group = sp1.getContentGroup(); //get our group
     var panelNumber = 0;
     if(group.hasChildNodes()){
          var j = 0;
          for(var i = 0, l = group.childNodes.length; i < l; i ++){
               if(group.childNodes[i].className && group.childNodes[i].className.search(new RegExp("\\b" + className + "\\b")) != -1){ // if it has SlidingPanelsContent class we found the correct node.
                    if(group.childNodes[i] == current){ // if it matches our current panel, we have a number
                         panelNumber = j;
                         return panelNumber;
                    j++; //increase our panelcounter
</script>
</head>
<body>
<a href="#" id="previousPanel" onclick="slidePreviousPanel();">Previous Panel</a> |
<a href="#" id="nextPanel" onclick="slideNextPanel()">Next 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>
Gramps

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>

What are the UserChrome classes/ids for the panel widget?

I am customizing my Firefox and it looks great, but I can't figure out how to customize the panel widget, like the one used in the downloads panel. I want to edit the widget browser-wide so that it can be compatible with addons that use that. I can't find an addon for this or the classes/ids that would work in the UserChrome.css file. I tried the DOM Inspector, but I couldn't figure out how to make that work.
I'm using Aurora 27.0a2 on Windows XP.

HI iansan5653
I am not sure if you are trying to make a widget/extension? for the browser or just customize the appearance of the user. I believe you have to create an appearance and then allow the user to download the appearance to change the styles.
I think you may want this webkit -moz-appearance[[https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance]]
I did some research on this and the MozillaZine is a great reference for all of the Preferences to add stuff to the panels.
Some more information
* [[http://kb.mozillazine.org/Category:Preferences|MozillaZine Category:Preferences]]
* This Menu editor may help [[https://addons.mozilla.org/en-US/firefox/addon/menu-editor/?src=search]]
* UserChrome.css info [[http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes]]
* Visual Customizations [[http://kb.mozillazine.org/Category:Visual_customizations_%28Firefox%29]]
*topics [[http://forums.mozillazine.org/viewtopic.php?t=1006795]]
I have also seen extensions made by adding style to these items in the about:config. You could live update the items and see if the css makes changes live in the browser and see how the file renders. [[http://kb.mozillazine.org/About:config_entries#UI.]]
But for better help on this I would recommend asking the mdn
[[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions]]
If you can define your set up, the Mozilla Developer Network may be the place for you. Hope this helps.

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

Using anchors for Sliding panel

I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
www.mysite.com/Portfolio.html#Panel1
www.mysite.com/Portfolio.html#Panel2
Is it possible to do so? kindly guide me

You can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Gramps

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>

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

Jump Menu for Sliding Panels Widget

Similar Messages

Maybe you are looking for