Sliding Panels in a Div

I can load the Sliding panels and it works fine except if you
use "onload" with the Spry.Utils.updateContent.
Tried many things so far and it will not work when loaded
into a Div.
Hmmm
Can't figure out why.
Anybody have a answer why it will not run in a Div.?

Well it appears the problem is because the outer div had no
ID.
The panel works without the ID, but if you add 2 panels it
only runs the constructor for 1 of the 2 panels. The collapsible
panels content overflow was hidden for both in CSS.
Thank you Donald for prompting me to look at the code again
as it was not so apparent to see the problem.

Similar Messages

Sliding Panel div Moving when acitvated in Safari

Hey,
If you go to my website, in safari, and click on "Resume" on the left side, and then begin to use the sliding panels it becomes very apparent that something is wrong. Feel free to look at my source code.
http://web.ics.purdue.edu/~jrathke
I have a hunch that it may be the iframe, that being said... does anyone know of any jquery solutions to replace iframes? Because that would solve quite a few problems in itself, thanks.
-Josh

I forgot to mention that I put some test pages which
demonstrate the panels outside the table structure.
just the sliding panels:
http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials2.html
and with a table on top for the header section, divs in the
middle for the panels, and table on the bottom for the footer
section. This works but the alignment is all off in IE6,7 but not
in Safari and a little off in FF. :
http://www.rightonstudio.com/client/staging/jenko/chelsea/html/testimonials3.html
-L

Sliding Panels DIV Shifting

Hello,
I have a page that is loading the Sliding Panels in a wierd way. It seems that the text and the image are racing to get displayed and then once they stop, the page rearranges itself to end up looking the way I intended. Has anyone seen this before and if so, did you find a way to fix this behavior?
Please see the enclosed link:
http://www.nga.gov/exhibitions/2009/tullio/test.shtm

Well it appears the problem is because the outer div had no
ID.
The panel works without the ID, but if you add 2 panels it
only runs the constructor for 1 of the 2 panels. The collapsible
panels content overflow was hidden for both in CSS.
Thank you Donald for prompting me to look at the code again
as it was not so apparent to see the problem.

Background image instead of color for each sliding panel

I'm working with sliding panels and trying to add some style to the page. I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser. Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
any help would be great!

Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
I see that you have
<p>
</p><div class="slidingpanelandtab">
    <blockquote>
      <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
    </blockquote>
Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
Beth

Safari 4 problems - HTMLDataSet/Sliding Panels

Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!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>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
    <a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>

<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="index.html">Home</a></li>
      <li><a href="animals.php">Animals</a></li>
      <li><a href="barns.php">Barns</a></li>
      <li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
        <ul>
          <li><a href="washingtondc.php">Washington DC</a></li>
          <li><a href="nyc.php">New York City</a></li>
        </ul>
      </li>
      <li><a href="fireworks.php">Fireworks</a></li>
      <li><a href="flowers.php" class="selected">Flowers</a></li>
      <li><a href="lighthouses.php">Lighthouses</a></li>
      <li><a href="misc.php">Miscellaneous</a></li>
      <li><a href="national_parks.php">National Parks</a></li>
      <li><a href="plants.php">Plants</a></li>
      <li><a href="waterfalls.php">Waterfalls</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="sidebar2">
     <div id="detailArea1" spry:detailregion="ds1">
          <div class="detailText">
         <h1>{PictureTitle}</h1>
         <p>{PictureResolution1}</p>
         <p>{Price1}</p>
        <p>{Button1}</p>
        <p>{PictureResolution2}</p>
         <p>{Price2}</p>
        <p>{Button2}</p>
         <br class="clearfloat"/>
         </div>
     </div>
</div>
<div id="mainContent">
    <div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
     <div id="galleryContentGroup" class="SlidingPanelsContentGroup">
         <div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
        <div class="galleryItem">
        <p class="thumbnail">{Thumbnail}</p>
        <p class="pictureTitle">{PictureTitle}</p>
        </div>
        </div>
     </div>
</div>
<p id="panelNav" class="fltlft">
     <a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
     <a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
     <a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
     <a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
</p>
<div id="detailArea2" spry:detailregion="ds1">
     <div class="detailImg">
    <img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
    </div>
</div>
<div id="gallery">
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Daisy</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397389"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5111872"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">3454_wm.jpg</p>
</div>
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Sun Orchid</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397419"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397432"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">6586_wm.jpg</p>
</div>
</div>
    <br class="clearfloat"/>
     </div>
     <br class="clearfloat" />
   <div id="footer">
    <p>© 2009</p>
</div>
     </div>
<script type="text/javascript">

</script>
</body>
</html>

It doesn't work correctly in Firefox either,
If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
So i would suggest to recheck your rowSelectors and validate your page for HTML errors.
Related documentation:
http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html

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

Spry Sliding Panels not working in IE

I've been working for about 12 hours straight on getting this
working correctly - my Sliding Panels just aren't working at all in
IE. The panels load properly - for example, you can see only the
first loaded panel, not all of them - but when I click a link to
switch to the next, nothing happens. Firebug is reporting no
errors, and neither is IE. Here is the relevant code:
<head><script type="text/javascript"
src="SpryAssets/SprySlidingPanels.js"></script>
<link type="text/css" rel="stylesheet"
href="SpryAssets/SprySlidingPanels.css"></head>
<div id="mainContent">
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="main">Main
Content<br /><a href="images/news.png" rel="lytebox"
title="Omgtest!"><img src="images/news.png"
/></a><br /> <a href="javascript:void(0);"
onclick="sp1.showPanel('series');">TEST</a></div>
<div class="SlidingPanelsContent" id="series">Series
and Models</div>
<div class="SlidingPanelsContent" id="about">About and
Bio</div>
</div>
</div>
<script type="text/javascript">var sp1 = new
Spry.Widget.SlidingPanels("panelwidget");</script>
</div>
The following might be somewhat related: I am using the
Lytebox javascript library, which is a Lightbox clone (that doesn't
use prototype), as well as a preloader for my mouseover nav bar,
with this code:
<script type="text/javascript">
function init() {
MM_preloadImages('images/menu/main_click-trans.png','images/menu/main_hover-trans.png','i mages/menu/series_click-trans.png',
'images/menu/series_hover-trans.png','images/menu/about_click-trans.png','images/menu/abo ut_hover-trans.png');}
</script>
My nav bar links to the panels like this:
onclick="MM_nbGroup('down','group1','Main','images/menu/main_click-trans.png',1);
sp1.showPanel('main'); return false"
However, a plaintext link inside of the first panel - "<a
href="javascript:void(0);"
onclick="sp1.showPanel('series');">TEST</a>" - does not
work either.
Just for fun I thought I would try adding min-height:0; zoom:
1; to the CSS classes for slidingpanels.... no dice there as well.
URL is
www.goldensealdrums.com/wip
Any ideas? I am at a complete loss. Thanks.

Thanks for your help :] I ended up realizing that a huge
bloated js navbar wasn't all that great of an idea anyway, so I
scrapped it and used a CSS-based one instead...much cleaner and
works better (no preloading! woohoo.) It looks like the problem was
probably an amalgamation of many things, but it's resolved now.
quote:
IE doesn't seem to like the PNG images you are using
understatement of the decade.

Sliding Panel Content Not Hidden

Hi All. This is my first post so apologies if I do something wrong.
I'm setting up sliding panels to work on my site (I've used them before) and this time I can't get the panels that aren't displayed to hide. The panels slide, but all panels are visable at all times. Here is the code -
CSS
.SlidingPanels {
    position: relative;
    width: 221px;
    height: 260px;
    padding: 0px;
    border: none;
.SlidingPanelsContentGroup {
    position: relative;
    width: 10000px;
    margin: 0px;
    padding: 0px;
    border: none;
.SlidingPanelsContent {
    width: 221px;
    height: 260px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: none;
.SlidingPanelsAnimating * {
    overflow: hidden !important;
.SlidingPanelsCurrentPanel {
.SlidingPanelsFocused {
TEST.PHP
<!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 src="http://www.guaranteedprofit.co.uk/Scripts/SprySlidingPanels.js" type="text/javascript"></script>
<link href="http://www.guaranteedprofit.co.uk/sandbox.css" rel="stylesheet" type="text/css" />
</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>
Has anyone got any suggestions please as I know it's something simple, I just can't work it out. I've tested it in FF and IE6
Thanks in advance, Adam

Solved it. I've been at this since 5am and put a rouge <! -- in the css file which screwed it up

Sliding panel inside tabbed panel - onclick both

I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
OK I have another scenario as well....
You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

Try this and adapt to your needs:
<!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 type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
   position: relative;
   width: 200px;
   height: 200px;
   padding: 0px;
.SlidingPanelsContentGroup {
   position: relative;
   height:600px;
   margin: 0px;
   padding: 0px;
.SlidingPanelsContent {
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Contenu 1
      <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>
    </div>
    <div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
        Spry.$$("#trigger1").addEventListener('click', function() {
            TabbedPanels1.showPanel(0);
            sp1.showPanel(2);
        }, false);
        Spry.$$("#trigger2").addEventListener('click', function() {
            //TabbedPanels1.showPanel(0);
            sp1.showPanel(0);
        }, false);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav

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

Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<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>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

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 Panel needs feedback

Here is my class for a sliding panel. The class is released as open source. Please feel free to feed this into your IDE and provide feedback for improvement.
Known issues include: double clicking the component2 to be shown, some flickering in graphics.
import javax.swing.*;
import java.awt.*;
public class JSlidingPanel extends JPanel{
     private JComponent component1, component2;
     private Dimension dim1, dim2;
     private int rate = 30, delay=35;      //deals with showing speed. How smooth should animation occur. default 7. delay = 5;     //also deals with showing speed. How fast to show component2.          default 10
     private boolean shown, showing, hiding, newComponent;
     private GridBagLayout grid;
     private GridBagConstraints c;
     static JPanel p2;
     public static void main(String[] a){
          final JSlidingPanel s = new JSlidingPanel();
          JLabel label = new JLabel("Put Mouse HERE");
               label.addMouseListener(new java.awt.event.MouseAdapter(){
                    public void mouseEntered(java.awt.event.MouseEvent e){
                         s.showComponent2();
                         if(s.getComponent2() == null){
                              s.setComponent2(p2);
                              s.getComponent2().setSize(new Dimension(100, 100));
                    }public void mouseExited(java.awt.event.MouseEvent e){
                         s.hideComponent2();
          JPanel p1 = new JPanel();
               p1.add(label);
               p1.setOpaque(true);
               p1.setBackground(Color.red);
          p2 = new JPanel();
               p2.setOpaque(true);
               p2.setBackground(Color.green);
               p2.setLayout(new BoxLayout(p2, BoxLayout.Y_AXIS));
               JPanel p2_1 = new JPanel();
                    p2_1.add(new JLabel("HELLO Olvin"));
                    p2_1.setOpaque(true);
                    p2_1.setBackground(Color.white);
               JPanel p2_2 = new JPanel();
                    p2_2.add(new JLabel("HELLO Olvin"));
                    p2_2.setOpaque(true);
                    p2_2.setBackground(Color.gray);
               JPanel p2_3 = new JPanel();
                    p2_3.add(new JLabel("HELLO Olvin"));
                    p2_3.setOpaque(true);
                    p2_3.setBackground(Color.black);
               p2.add(p2_1);
               p2.add(p2_2);
               p2.add(p2_3);
               p2.setMinimumSize(new Dimension(100, 200));
               p2.setMaximumSize(new Dimension(100, 200));
               p2.setPreferredSize(new Dimension(100, 200));
               p2.setSize(new Dimension(100, 200));
                    s.setComponent1(p1);
                    s.setComponent2(null);
                    //s.getComponent2().setSize(new Dimension(100, 100));
               JPanel panel = new JPanel();
                    panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
                    panel.add(new JLabel("Hola"));
                    panel.add(s);
                    panel.add(new JLabel("<html><div style='height: 40px; background:#0000FF;'> </div></html>"));
               JFrame f=new JFrame("");
                    f.setContentPane(panel);
                    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    f.setSize(650,500);
                  f.setVisible(true);
     public JSlidingPanel(){
          super();
          newComponent=false;
          grid = new GridBagLayout();
          c = new GridBagConstraints();
               c.fill=GridBagConstraints.HORIZONTAL;
               c.anchor=GridBagConstraints.NORTH;
               c.weightx=1;
               c.weighty=0;
          setLayout(grid);
     public void paintComponent(Graphics g){
          super.paintComponent(g);
          if(newComponent && component2 != null){
               try{
                    dim1 = new Dimension(component1.getSize().width, component1.getSize().height);
                    dim2 = new Dimension(component2.getSize().width, component2.getSize().height);
                    realizeDimensions();
               }catch(Exception ex){JOptionPane.showMessageDialog(null, "Component1 not set");}
               newComponent=false;
     public synchronized boolean isComponentShown(){
          return shown;
     public synchronized void setComponent1(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setOpaque(false);
          component1 = panel;
          c.gridx=0;
          c.gridy=0;
          c.gridwidth=1;
          c.gridheight=1;
          c.fill=GridBagConstraints.HORIZONTAL;
          grid.setConstraints(component1, c);
          add(component1, 0);
     public synchronized JComponent getComponent2() {
          return component2;
     public synchronized void setComponent2(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setName("null");
               panel.setOpaque(false);
          if(component1 == null){
               setComponent1(null);
          }if(component2 != null){
               this.remove(component2);
          newComponent=true;
          component2 = panel;
               c.gridx=0;
               c.gridy=1;
               c.gridwidth=1;
               c.gridheight=1;
               c.fill=GridBagConstraints.HORIZONTAL;
               grid.setConstraints(component2, c);
               add(component2, 1);
               updateUI();//repaint components. Needed
     public synchronized void hideComponent2(){
          if(showing || hiding || component2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    hiding=true;
                    int counter = dim2.height-rate;
                    while(component2.getSize().height > 0){
                         if( counter < 0 ){
                              int extra = counter;
                              int exact_amount = (counter - extra) ;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter -= rate;
                    hiding=false;
                    shown=false;
          };t1.start();
     public synchronized void showComponent2(){
          if(showing || hiding || component2==null || dim2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    showing=true;
                    int counter = rate;
                    while(component2.getSize().height < dim2.height){
                         if( counter > dim2.height ){
                              int extra = (counter-dim2.height);
                              int exact_amount = counter-extra;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+counter));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+counter));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+counter));
                         setSize(new Dimension(dim1.width, dim1.height+counter));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter += rate;
                    showing=false;
                    shown = true;
          };t1.start();
     private void realizeDimensions(){
          component2.setPreferredSize(new Dimension(dim2.width,0));
          component2.setMinimumSize(new Dimension(dim2.width,0));
          component2.setMaximumSize(new Dimension(dim2.width,0));
          component2.setSize(new Dimension(dim2.width,0));
          setPreferredSize(dim1);
          setMinimumSize(dim1);
          setMaximumSize(dim1);
          setSize(dim1);
          updateUI();
}

Im sorry guys for not replying it was probably because I didnt add this topic to my Watchlist. Now it is. Anyhow, I wrote a slightly different main() so you can test the custom JPanel again. This time it displays a red label. Once you place the mouse over it, it should make another JLabel (green colored) )visible. Known issues still include unwanted flickering, use of threads(instead of timers), and too many lines of code(7.5KB). This code is public domain so the community can make any changes. Please post your code modifications in this forum.
It runs fine under Java(TM) SE Runtime Environment (build 1.6.0_10-b33)
import javax.swing.*;
import java.awt.*;
public class JSlidingPanel extends JPanel{
     private static final long serialVersionUID = 1L;
     private JComponent component1, component2;
     private Dimension dim1, dim2;
     private int rate = 20;
     private int delay = 10;
     private boolean shown;
     private boolean showing;
     private boolean hiding;
     private GridBagLayout grid;
     private GridBagConstraints c;
     private boolean newComponent;
     public static void main(String[] a){
          final JSlidingPanel s = new JSlidingPanel();
          JLabel label = new JLabel("Put Mouse HERE");
               label.addMouseListener(new java.awt.event.MouseAdapter(){
                    public void mouseEntered(java.awt.event.MouseEvent e){
                         s.showComponent2();
                    }public void mouseExited(java.awt.event.MouseEvent e){
                         s.hideComponent2();
          JPanel p1 = new JPanel();
               p1.add(label);
               p1.setOpaque(true);
               p1.setBackground(Color.red);
          JPanel p2 = new JPanel();
               p2.setOpaque(true);
               p2.setBackground(Color.green);
               p2.setLayout(new BoxLayout(p2, BoxLayout.Y_AXIS));
               p2.add(new JLabel("<html><h1>My HTML Label</h1><p>This component is a JLabel inside a JPanel.</p>"));
                    s.setComponent1(p1);
                    s.setComponent2(p2);
                    s.getComponent2().setSize(new Dimension(100, 300));
               JFrame f=new JFrame("");
                    f.setContentPane(s);
                    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    f.setSize(650,500);
                  f.setVisible(true);
     public JSlidingPanel(){
          super();
          newComponent=false;
          grid = new GridBagLayout();
          c = new GridBagConstraints();
               c.fill=GridBagConstraints.HORIZONTAL;
               c.anchor=GridBagConstraints.NORTH;
               c.weightx=1;
               c.weighty=0;
          setLayout(grid);
     public void paintComponent(Graphics g){
          super.paintComponent(g);
          if(newComponent && component2 != null){
               try{
                    dim1 = new Dimension(component1.getSize().width, component1.getSize().height);
                    dim2 = new Dimension(component2.getSize().width, component2.getSize().height);
                    realizeDimensions();
               }catch(Exception ex){JOptionPane.showMessageDialog(null, "Component1 not set");}
               newComponent=false;
     public int getDelay() {
          return delay;
     public void setDelay(int delay) {
          this.delay = delay;
     public int getRate() {
          return rate;
     public void setRate(int rate) {
          this.rate = rate;
     public synchronized boolean isComponentShown(){
          return shown;
     public synchronized boolean isComponentHidden(){
          return !shown;
     public synchronized boolean isComponentShowing() {
          return showing;
     public synchronized boolean isComponentHiding() {
          return hiding;
     public synchronized JComponent getComponent1() {
          return component1;
     public synchronized void setComponent1(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setOpaque(false);
          component1 = panel;
          c.gridx=0;
          c.gridy=0;
          c.gridwidth=1;
          c.gridheight=1;
          c.fill=GridBagConstraints.HORIZONTAL;
          grid.setConstraints(component1, c);
          add(component1, 0);
     public synchronized JComponent getComponent2() {
          return component2;
     public synchronized void setComponent2(JComponent panel) {
          if(panel==null){
               panel=new JPanel();
               panel.setName("null");
               panel.setOpaque(false);
          if(component1 == null){
               setComponent1(null);
          }if(component2 != null){
               this.remove(component2);
          newComponent=true;
          component2 = panel;
               c.gridx=0;
               c.gridy=1;
               c.gridwidth=1;
               c.gridheight=1;
               c.fill=GridBagConstraints.HORIZONTAL;
               grid.setConstraints(component2, c);
               add(component2, 1);
               updateUI();
     public synchronized void hideComponent2(){
          if(isComponentShowing() || isComponentHiding() || getComponent2()==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    hiding=true;
                    int counter = dim2.height-rate;
                    while(component2.getSize().height > 0){
                         if( counter < 0 ){
                              int extra = counter;
                              int exact_amount = (counter - extra) ;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         setSize(new Dimension(dim1.width, dim1.height+component2.getSize().height));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter -= rate;
                    hiding=false;
                    shown=false;
          };t1.start();
     public synchronized void showComponent2(){
          if(isComponentShowing() || isComponentHiding() || getComponent2()==null || dim2==null)return;
          Thread t1 = new Thread(){
               public void run(){
                    showing=true;
                    int counter = rate;
                    while(component2.getSize().height < dim2.height){
                         if( counter > dim2.height ){
                              int extra = (counter-dim2.height);
                              int exact_amount = counter-extra;
                              counter = exact_amount;
                         component2.setPreferredSize(new Dimension(dim2.width, counter));
                         component2.setMinimumSize(new Dimension(dim2.width, counter));
                         component2.setMaximumSize(new Dimension(dim2.width, counter));
                         component2.setSize(new Dimension(dim2.width, counter));
                         setPreferredSize(new Dimension(dim1.width, dim1.height+counter));
                         setMinimumSize(new Dimension(dim1.width, dim1.height+counter));
                         setMaximumSize(new Dimension(dim1.width, dim1.height+counter));
                         setSize(new Dimension(dim1.width, dim1.height+counter));
                         component2.updateUI();
                         try{
                              Thread.sleep(delay);
                         }catch(Exception ex){}
                         counter += rate;
                    showing=false;
                    shown = true;
          };t1.start();
     private void realizeDimensions(){
          component2.setPreferredSize(new Dimension(dim2.width,0));
          component2.setMinimumSize(new Dimension(dim2.width,0));
          component2.setMaximumSize(new Dimension(dim2.width,0));
          component2.setSize(new Dimension(dim2.width,0));
          setPreferredSize(dim1);
          setMinimumSize(dim1);
          setMaximumSize(dim1);
          setSize(dim1);
          updateUI();
}

Sliding Panels No Javascript Enabled,

I'm not crazy about how the Sliding Panels widget degrades if
JavaScript is disabled (it exposes all the panels side by side
horizontally). Go to the sliding panels widget example from Adobe
and disable your JavaScript:
Adobe
Sliding Panels example page.
As an alternative for users who have JavaScript disabled, I
would only like to show only the first panel (preserving the
original width of the sliding panel as if JavaScript were enabled)
or I'm looking for a way to create an error message (not on a
separate page, but in the section where the sliding panels would
be) that reads something like "please enable javascript etc. and
will hide the sliding panels content). Netflix does this with their
sliding panels if you have JavaScript disabled- located on the new
releases page after you login (would give the link but you have to
login). Or if someone has a better solution I am all ears. Thank
you.

elen,
I had to make the sliding panel the same height as my container div.
For example, my main container div is 500px tall, my sliding panel also has to be 500px tall. I figured this out by changing the sizes several times and got it to slide, but skip a panel every time. I soon figured out the size issue.

Sliding Panels in a Div

Similar Messages

Maybe you are looking for