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

Similar Messages

Sliding Panel - Content

Hi,
can someone help me to put content like THIS into my sliding panel DIV?
The way I want it:
http://www.localhero.de/divs.php
The way it already is:
http://www.localhero.de/slide4.php
Thanks a lot,
Denis

;-) Sorry I cleaned my server.
http://www.localhero.de/_Teaser/slide.php
Here is the thing I try to create with the SPRY SLIDE.
I wamt 5 Images, small Text and Links out of my database.
They have to move on their own, and also be klickable by the arrows. The showen image should be highlighted.
And the small Text should be presented on the transparent white.
Thats what I need :-)
Cheers
Denis

Tabbed Panel - Make First Panel content not a tab?

I apologise for this but I am repeating a post that I have put in the Dreamweaver Dynamic Forum. I didn't think about this board then but realise a couple of other Spry questions don't attract much attention there. In future I'll come here but for now I hope the duplicate post doesn't upset anyone.
I am having a go witha tabbed panel which is what the screenshot is showing. This is experimenting so I haven't had the courage to upload it yet.
I would like the default panel to not contain anything except perhaps, the instruction to click and a colour background logo image. When the user clicks a panel I want the logo image to be pale and greyscale and the course deatails to present.
My question is how do I start the tabbed panel with a pane that isn't one of the tabs? I can see a way around it by making the first tab "Instructions" but I don't think it will look so good.
Thanks
Martin

Gosh, you made that look easy!
I'm not at my desk to implement it but your post has the air of confidence that I envy! I was expecting to have to put on some latex gloves, a mask and gown and tinker with the code...
Many thanks.
Martin

Tabbed Panel: First Panel Content Not From a Tab?

I am having a go witha tabbed panel which is what the screenshot is showing. This is experimenting so I haven't had the courage to upload it yet.
I would like the default panel to not contain anything except perhaps, the instruction to click and a colour background logo image. When the user clicks a panel I want the logo image to be pale and greyscale and the course deatails to present.
My question is how do I start the tabbed panel with a pane that isn't one of the tabs? I can see a way around it by making the first tab "Instructions" but I don't think it will look so good.
Thanks
Martin

OK so I got an answer to this on the Spry forum.
I'm going to try putting style="display: none;" on the first <li> element.
Easy as that and thanks/credt to .V1 who answered the post.
Martin

Panel content not loaded in non-english Photoshop

Hello. I have created this Panel ( http://circografico.com.ar/shop/downloads/ad-artbox-lite/ ) that works perfect in Photoshop CS6 - english version - both in Windows and Mac,
but when someone try to use it in a spanish Photoshop version, it loads a white canvas instead of my panel interface, I mean, no HTML is loaded. So I'm deducting there's some
kind of trouble with the localization of the files. Maybe my installation file (.MXI) needs some adjustment or tweak...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<macromedia-extension name="AD Artbox lite" requires-restart="true" version="1.0">
<author name="Alex Dukal"/>
<description><![CDATA[AD Artbox lite is a reduced version of AD Artbox. It contains more than 40 'artistic' and useful tools for graphic artists,
but a dozen less than the full version. It contains high-quality tools to produce different kind of artworks.
Please read the User Manual to clearify doubts and understand how to modify or adapt the panel to your needs.]]></description>
<license-agreement><![CDATA[©2013 Alex Dukal, all rights reserved.]]></license-agreement>
<products>
    <product familyname="Photoshop" maxversion="" primary="true" version="12.0"/>
</products>
<files>
    <file destination="" file-type="CSXS" products="" source="AD_Artbox_lite.zxp"/>
    <file destination="$tools" products="Photoshop,Photoshop32,Photoshop64" source="AD_Artbox_lite.tpl"/>
    <file destination="$patterns" products="Photoshop,Photoshop32,Photoshop64" source="AD_Artbox_lite.pat"/>
    <file destination="$actions" products="Photoshop,Photoshop32,Photoshop64" source="AD_Artbox_lite.atn"/>
<file destination="$photoshopappfolder" products="Photoshop,Photoshop32,Photoshop64" source="AD-Artbox_lite_User-Manual.pdf"/>
<file destination="$scripts" products="Photoshop,Photoshop32,Photoshop64" source="AD_Artbox_lite_Install.jsx"/>
</files>
</macromedia-extension>
Any help will be welcome! Thx in advance.

What I found today looking for a solution?
1. With my installation file (.mxi) the panel folder is installed in a C:\Program Files (x86)\Common Files\Adobe\CS6ServiceManager\extensions\my.panel.name
2. Some people use installers specifying where each file will be placed, for example:
<macromedia-extension name="Extension name" version="1.0.0" type="object" locked="false">
          <author name="Your name" />
          <products>
                    <product name="" version="12.0" familyname="Photoshop" primary="true" />
          </products>
          <update />
          <description>
          <![CDATA["Your extension description"]]>
          </description>
          <ui-access>
          <![CDATA[Installation details]]>
          </ui-access>
          <license-agreement><![CDATA[Copyright info here]]></license-agreement>
          <files>
                    <file source="content/CSXS/manifest.xml" destination="$panels/Panel name/content/CSXS" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name/image01.jpg" destination="$panels/Panel name/content/Panel.name.assets" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name/image02.jpg" destination="$panels/Panel name/content/Panel.name.assets" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name/bundles/PHSP-12/PHSP12Bundle.swf_" destination="$panels/Panel name/content/Panel.name.assets/bundles/PHSP-12" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name.assets/Locales/en_US/dictionary.xml" destination="$panels/Panel name/content/Panel.name.assets/Locales/en_US" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name.assets/Panel_name_liteDarkNormal.png" destination="$panels/Panel name/content/Panel.name.assets" file-type="ordinary" folder="content" />
                    <file source="content/Panel.name.assets/Panel_name_liteNormal.png" destination="$panels/Panel name/content/Panel.name.assets" file-type="ordinary" folder="content" />
                    <file source="content/Panel_name.jsx" destination="$panels/Panel name/content" file-type="ordinary" folder="content" />
                    <file source="content/Panel_name.swf" destination="$panels/Panel name/content" file-type="ordinary" folder="content" />
                    <file source="content/Panel_name.xml" destination="$panels/Panel name/content" file-type="ordinary" folder="content" />
          </files>
          <configuration-changes>
          </configuration-changes>
          <signatures />
</macromedia-extension>
That kind of installer works well with Photoshop in any language 'cause install the Panel inside the Plugins/Panels folder, but...
my panel have around 70 images ... do I need to list each file inside the .mxi file?

Setting accordion content panel height with hidden content

Following previous instructions, I set

at the bottom of the content page. However, some of the
accordion panel content is hidden until the user selects a radio
button. The panel height is not dynamically adjusted to the
content. FYI, the content is hidden using
style.visibility = 'hidden
In SpryAccordion.css, I commented out the height attribute.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
/* height: 200px; */
It appears to me that the panel height is still fixed, but by
what I am not sure. Any clues would be appreciated. Here's the demo
page:
http://www.phelpstek.com/cr/wildflower_wedding_favors/index.html
Thanks for any input/ideas.
Brian Phelps
www.phelpstek.com

graylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz

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

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 all visible. Help!

OK- I just can't figure this one out. I am a first timer with the spry widgets not built into Dreamweaver. I've added a sliding panel widget, I want to break a story into two parts without adding a second page. When I open in a browser, both panels are visible. I don't know what I'm missing. Help.

Still have not come up with workable solution for what I am trying to do. It looks like my problem is I am trying to make the box size on the sliding panels container elastic, so it looks like my text on other pages. But, when I set it up so it gets bigger to include all the text, it includes the text on all the panels, not just one. When I set it with the width "auto" and a px height, sometimes it includes the right amount of text and sometimes it doesn't. probelm is the varying screen sizes.
So, it is true, then, that the size of the sliding panel container MUST match the size of the sliding panel content, and be fixed?
If so, it will never do what I am trying to get it to do. I guess I'd be better off playing with an accordian panel, to see if I can get close to the look I want there.
Thanks!

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

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

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

How do i place content in a sliding panel one beside the other?

my site: www.islamobec.com
how can i populate my sliding panel by placing content beside each other??

The following is an example of a two content slide http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample2.html
Gramps

Sliding Panel Content Not Hidden

Similar Messages

Maybe you are looking for