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.
Similar Messages
-
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,
morphetoYou 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 ==-- -
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 -
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.
ThanksAlso 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= -
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 -
I've been working on extending Spry's Sliding Panels to allow
me to set a timer to auto advance to the next panel. Whilst I had
success with a script that targeted a particular element (eg sp1)
it really isn't terribly useful to have to recode per panel. So
trying to extend instead. Problem is that I keep getting an error
that says the advanceToNextPanel function doesn't exist. Hoping
someone might be able to point me in the right direction. Code
below:
// Sliding Panel Timer
// Based upon
http://labs.adobe.com/technologies/spry/demos/gallery/gallery.js
and feedback within the Adobe Spry forum
// Extend SlidingPanels to include additional data
Spry.Widget.SlidingPanels.prototype.gPanelShowInterval =
1000; // msecs between panels
Spry.Widget.SlidingPanels.prototype.gPanelShowOn = false;
Spry.Widget.SlidingPanels.prototype.gPanelShowTimer = null;
Spry.Widget.SlidingPanels.prototype.gAutoStartPanelShow =
true;
Spry.Widget.SlidingPanels.prototype.addPanelShowTimer =
function()
if (this.gPanelShowInterval == undefined)
this.gPanelShowInterval = 10000; // msecs between panels
if (this.gAutoStartPanelShow)
this.startPanelShow();
// Kill any previous timer event
Spry.Widget.SlidingPanels.prototype.killPanelShowTimer =
function() {
if (this.gPanelShowTimer)
clearTimeout(this.gPanelShowTimer);
this.gPanelShowTimer = null;
// Display next sliding panel on rotational loop
Spry.Widget.SlidingPanels.prototype.advanceToNextPanel =
function() {
var tPanels = this.getContentPanels().length - 1; // Total
Panels
var cPanel = this.getContentPanelIndex(this.currentPanel);
// Index of currently displayed panel
if (tPanels == cPanel)
this.showFirstPanel(); // Return to the first panel
else
this.showNextPanel(); // Show the next sliding panel
this.setPanelShowTimer();
// Setup timer event to change to next panel
Spry.Widget.SlidingPanels.prototype.setPanelShowTimer =
function() {
this.killPanelShowTimer(); // Kill any previous timer event
this.gPanelShowTimer = setTimeout( function() {
this.gPanelShowTimer = null; this.advanceToNextPanel(); },
this.gPanelShowInterval);
// Start the timed sliding panel
Spry.Widget.SlidingPanels.prototype.startPanelShow =
function() {
this.gPanelShowOn = true;
this.setPanelShowTimer();
};My previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich -
Spry Sliding Panels Question..
Hello,
I'm building a website and want to have a small image gallery page, with Spry Sliding Panels as the framework. Everything was working fine until I realized that in the browser, when I clicked the link to go the next panel, the actual web page itself automatically snaps back up to the top before the panel actually slides. I was wondering how to fix this because the gallery is about halfway down the page, and it looks stupid when the page jumps back up to the top each time. Thanks for your help...Yes, your panel button code (with my change) should look like this:
<div class="panelbtn"><a href="javascript:;" onclick="sp1.showFirstPanel(); return false;">1</a></div>
<div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p2); return false;">2</a></div>
<div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p3); return false;">3</a></div>
<div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p4); return false;">4</a></div>
This is what I meant when I said to replace the # with the word javascript:;
Beth -
Spry Sliding Panels & iFrames Issue
NOTE: This was also posted in the Dreamweaver section
http://www.ripplecommunications.com/75th/index.htm
I'm having an issue with iFrames and their visibility within
a Spry sliding panel. When the panel slides, the iFrame stays
visible outside of the sliding panel container.
Any ideas? You can see an example above, click on a date in
the timeline. This seem to occur in Firefox. IE 7 is OK.
2.0.0.11 on a PC. Below is a screenshot to the issue that I
see.
http://www.ripplecommunications.com/75th/screen.pngjim,
I am working with sliding oanels in GoLive and trying to
incorpoate iFrames as well. It seems to work (all manual coding of
course) and i do not have problems with the visible issues. have
you checked the
"slidingpanelsconent"..."overflow"
value in the css file, should be hidden. -
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 advanceHad 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 Panel automatic changes
Hi, is there any way to do sliding panel to change
automatically (without clicking on any link) with some duration,
about 10sec.? I will be appreciate for any helpMy previously posted I'd fixed this but it is in fact not
working.
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Rich -
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
RichApologies, I have fixed that with clear: both;
But IE6 my panel doesn't appear at all!
Rich -
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 -
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 -
SIFR 3 and Spry Sliding Panels
I am having trouble combining spry sliding panels and sIFR 3
r419 in firefox. Implementation works perfectly in IE6 & 7 but
in FF3 the headings flicker as one panel slides out and as another
slides in.
I have tried adding sIFR.replace to onclick to combat this,
as described in another post but to no avail.
Does anyone have any suggestions?
Many thanks
MarcelAdd a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.
-
Spry Sliding Panel Problem - Repost
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
I previously posted but it is in fact not working.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Richquote:
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>
Maybe you are looking for
-
I can not burn a CD with my itunes anymore. It tells me to re download itunes. I have done that and still have the same problem. When I do try, Missing disc recorder keeps coming up. Please help!!!!
-
Setting JMS Priorities in the Presence of a JMS Control
I posted the following question to the JMS interest newsgroup and received a response on how to accomplish my objective using the QueueSender class. However, nobody in that newgroup could tell me how to construct a QueueSender from the JMSControl ser
-
I have a problem with the error "LANG_LIST has some locales which does not match with the locale of serial number" recurring. I am trying to install Acrobat XI Std silently by SCCM. I've used the Adobe Customisation Wizard to create a mst which inclu
-
Does anyone know a good source for configuring cluster telemetry, specifically with zone clusters? I can't find much in the cluster documentation or by searching oracle's website. The sctelemetry man page wasn't very useful. The sun cluster essential
-
Using ChronoSync with iTunes - what files/folders to exclude?
I want my laptop and HTPC to have the exact same iTunes library. I started with copying the *iPhoto Library* package file to the HTPC, so right now, they have the exact same library. I'll do most of my iTunes work (e.g. adding new music) on the lapto