Sliding panels hidden content on page load, SprySlidingPanels.js

There was a
previous
post about the issue of hidden content flashing on page load.
That issue was solved with a "hideGroup" class and an additional
line in the JS file under the addEventListener lines. My sliding
panels JS file isn't as simple and I would like to accomplish the
same thing. I'm using SprySlidingPanels.js. Can anyone help?

All you really need to do is add this to your CSS:
.SlidingPanels {
overflow: hidden;
No additional JS or CSS class required.
--== Kin ==--

Similar Messages

Sliding Panels hidden content shows on page load

Greetings,
I am working on a site for a child abuse prevention
non-profit and need some help asap!
I am using the unobtrusive sliding panels at:
Adobe
Unobtrusive Sliding Panels Example
I have two panels side by side. When the page loads, all of
the hidden content is briefly shown to the right of the panels. It
does this on the adobe sample as well.
Is there ANY way to hide this hidden content during the page
load? If so, could I get exact instructions? I am more of a
front-end person and not the best with scripting.
BTW, all of the content is static so the "Adobe Hiding Data
References During Page Load" does not work in this instance.
Thanks in advance!!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

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

Linking to a specific SLIDING panel remotely

I'm trying to link to a specific SLIDING panel (not a tabbed
panel) from a remote link. I'm sure this can be done using
SpryURLUtils.js as I've successfully achieved the result with
tabbed panels. There's not as much online information on doing this
with sliding panels, though, and I've had no luck experimenting on
my own.
Can anyone help?
Here are two example pages of the pages in question:
http://www.studiohyperset.com/sandbox/aafd/impressionist.php
http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm
The user launches the second page from the first and should
be able to get back to the second sliding panel on the first page
by clicking "RETURN." Right now, when the user clicks "RETURN,"
s/he returns to the first slide in the sequence.
Thanks in advance for any help.

http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
Comment 29: David Powers

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Sliding Panels Bug?

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

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

Large number of Hide/Show regions on a page, can't hide on page load

I have a large number of Hide/Show regions on a page, 14 right now to be exact. I want all of these regions to start hidden when the page loads. In order to do this I have the following code in the onload page html body attribute:
onLoad="document.getElementById('region3').style.display = 'none';
document.getElementById('shIMG3').src = '/i/htmldb/builder/rollup_plus_dgray.gif'
document.getElementById('region19').style.display = 'none';
document.getElementById('shIMG19').src ='/i/htmldb/builder/rollup_plus_dgray.gif'"
This works fine when I have 13 or fewer hide/show regions on the page. When I add the 14th region to the page, all the regions on the page start off as not hidden.
Anyone have any idea why this could be happening? (I'm using Apex version 2.0)
Thanks
- Brian

no ideas?

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 in ajax content

How to i get the sliding panel to work with ajx content..
Scenario..
user clicks a link, loads ajax content. they click another
link that starts of the sliding of images.. the thing is, is that
it always starts at 0 because ofcourse i need to initiate sp3 and
can not do so on page load because it doesnt exist yet..
i thought id try a workaround but have a textfield hold the
current position then ever instance of the spry object it defauts
to that pane.. but it doesnt work..
heres some code..
function showImage(rnd,obj) {
current = el('browseWardrobesImageSlide_'+rnd).value;
el('browseWardrobesImageSlide_'+rnd).value = obj;
var sp3 = new
Spry.Widget.SlidingPanels("SlidingPanels2",{defaultPanel:current});
sp3.showPanel(obj);
any help would be greatly appreciated..

Hi,
I dont think that is what im after..
Basically my ajax page has this in it..
<script>
var sp4 = new Spry.Widget.SlidingPanels("SlidingPanels2");
</script>
because slidingPanels2 does not exist on initial page load i
can't run this script.
i have this code to load the ajax content
Spry.Utils.setInnerHTML(div,content,false);
this executes the javascript within that ajax page
successfully, but when i try to sp4.showPanel() it says it cant
find sp4..???
hope that makes sense.

Make default sliding panel load first

Hi,
I am using SpryURLUtils to link directly to certain sliding panels on a page, so for example:
mysite.com/thepage.html?panel=3
sets the 3rd panel (working from 0 of course) on that page to be displayed by default.
The only problem here is that panels 0,1 and 2 still get loaded before 3 by the browser because they come first in the page structure, and as a result panel 0 is being displayed until panel 3 has been loaded, after which it 'jumps' to panel 3, which doesn't look too smooth and I think could confuse the user. Each panel on my page has a background image specified in CSS rules in the header of the page.
What I want is for panel 3 (in this example) to be displayed straight away. I assume the problem may lie partly with the fact the widget constructor code (shown above) where the default panel is specified is located beneath all the page content, but I can't think of a way around this.
Does anybody have any ideas?
Thanks

I solved this way:
<body onLoad="myPanelsSlides('slide2');"/>
Thanks

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

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

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

All my content appears on page load - is this Spry related?

I remember having this issue when using Spry in the past. I changed the padding settings I think, and all the Accordions were open on page load - for only a second - and then closed.
I'm working with a new site, and the template seemed fine but when I populate, all tabbed-content and a scroller content appear on page load. Then snap shut. Is it related? or a similar issue... I'm pretty desperate to be posting here but I it looks like the same sort of problem I had with Spry... maybe the template has been built with some of the same technology (?)
http://bit.ly/ptaBVN
Please help!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

Why is my tabbed panel defaulting to the third tab, instead of the first one, when my page loads?

I have a tabbed panel widget on the home page of our website and it is essential that the audience views the content on the first tab when the page loads.
Thereafter they can click on the other tabs to view content. I have tried using "Arrange" "Bring to Front" by clicking on the object in the layout and also physically dragging the elements in the layers panel [i.e. re-arranging the order of the layers], however the panel view just keeps reverting back to the third panel which is the first in my layers list. When I try to drag this down to the bottom of my layers for this composition the first panel moves physically in the layout to the third panel.
The idea is to have the one currently showing at the bottom, "Data Centre..", ALWAYS showing on the top and the one currently showing on the top, "Engineering &.." , ALWAYS showing on the bottom. As I said before, physically re-arranging the order of the layers is not working either.

Me too. Anyone else got this problem?
I have 3 panels and no matter how i order the layers it always loads the right-most one first

Getting a sliding panel loaded into an html panel to work.

Hi. This is my first post on the forum.
I've been using Spry a little here and there. Today I ran
into a situation where I want to load an external page, that has a
sliding panel in it, into an html panel. So far I have not had luck
and I suppose it has to do with loading the js file. At the moment
I have a right column that already has a sliding panel (working).
But it would appear that the loaded external html file (in the left
"main" column) is not picking that up. Any suggestions for a noob
as to what to do next? Viewing the external page by itself allows
the sliding panel to work (that is when I add the js file import to
the head of the external html file... but that head section does no
good when loaded into an html panel)
Anyway, any help at all is greatly appreciated.
Thanks,
Eric

Thank you very much! I found the topic
here.
It will require a bit of a small learning curve for me as html
panel and sliding panels are my first interaction with js... even
my rollovers are css driven. Thanks!

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 hidden content on page load, SprySlidingPanels.js

Similar Messages

Maybe you are looking for