Sliding panels slide to top on update

Hello,
I have a div of sliding panels made up of dataset content,
whenever I reload the dataset, the sliding panels slide to the
first panel. How can I prevent this?
Thanks

U could add a observ that listens to the data load. and if
its loaded u fire sp1.showPanel(<old panel location number>);
http://labs.adobe.com/technologies/spry/samples/data_region/RegionObserverSample.html

Similar Messages

Sliding Panels - Slide Order / Direction

Hello,
The Sliding Panels script is awesome! Here's what I can't figure out how to do:
I have 3 images I'm sliding between and I want the order to slide from...
Slide 1 slides DOWN to slide 2.
Slide 2 slides DOWN to slide 3.
Slide 3 slides UP to slide 2.
Slide 2 slides UP to slide 1.
Then start over with 1 down to 2, etc...
Thanks in advance for your help!

Here's another possibility, if you can wrap your mind around calling Panel 3 "Panel 1" and then opening Panel "1" (the technical third panel) by default. Then panel 2 would come DOWN, and panel 1 (which you name 3!!!) would also come DOWN. You might want to call them by page rather than by "next" or "previous". Hijinks.
Here's a link that will help you change the default panelt:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html
Beth

Sliding Panel slide direction

Hi there,
I'm using the slide panel effect for multiple sets of panels
within the same page. I've copied the code and changed all the
appropriate css and js refs. Problem is that the original is
sliding horizontal from right to left as it should, but for some
reason the copied one is sliding vertically from bottom to top (?)
Does anyone know why this might be happening?
Here is my test page (scroll down and use the "select"
navigation tool below description text:
Test page
Thanks for any help! --Lisa

Here's another possibility, if you can wrap your mind around calling Panel 3 "Panel 1" and then opening Panel "1" (the technical third panel) by default. Then panel 2 would come DOWN, and panel 1 (which you name 3!!!) would also come DOWN. You might want to call them by page rather than by "next" or "previous". Hijinks.
Here's a link that will help you change the default panelt:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html
Beth

Control layout of "Sliding Panels"?

Is there a way to control the layout of the sliding panels slide show theme? I have quite a few photos I'd like to display in a rather short length of time. It is also challenging because the photos are stills I captured from some prior iMovie/iDVDs so the resolution just isn't there. Therefore I'm trying to keep the layouts with the smaller pictures: 3, 4, 5 panels at a time (which look much better) and remove the layout for the single picture, double picture which exposes the poor resolution and doesn't let me get as many pictures fit into the time I need.

Thanks Terence, but I didn't ask about the timing of slides. I wanted to know if there is some way to adjust the layout so it only uses the smaller, multi-photo display in the Sliding Panels style. I'm not seeing anything in iPhoto itself, but I'm currently looking at a copy I made of the SlidingPanels.mrbStyle in the root Library > Application Support > iLifeSlideshow > Styles. In the bundle there is a StyleDescription.plist. And I notice there are 15 effect presets. The preset IDs are labeled pretty clearly. I'm thinking maybe if I delete some of the effect presets and rename the style maybe I'll get just the layout elements I need. I guess it is worth a shot unless anyone here knows of some way within iPhoto to select which layouts are used?

Blank slides in sliding panels

I used to be able to insert blank slides into the sliding panels theme. I did this all the time to manipulate the slideshow to display the way I wanted, and to create chapter breaks. I have a few published slideshows that prove it. Now, however, the function is greyed out unless I'm in Classic or Ken Burns themes. When I open my working files of those published slideshows all the places where the blank slides were (originally black to match the background) are white boxes. Anyone have any idea what happened?
-Matt

heres a screenshot

When transfering tracks across to ipod a sliding panel appears on the right hand side of itunes. after acknowleadging the transfer the panel does not slide back out of the way to alow another transfer.

When transfering tracks to an ipod a sliding panel appears on the right hand side of itunes. This allows the selected track to be transfered. After registering this action the panel does not slide back out of the way to allow scrolling and more song selection. Any solutions..Help?

I have an even simpler method. I use MyPublisher to print my books. I select their page layout for a two-page spread, drag and drop the image. DONE! I understand that most people have their favorite places to have work done. I have been extremely pleased with MyPublisher.com, so I haven't even tried the book module in Lightroom.

Sliding Panels and Detail Regions

I'm trying to get a detailregion div to update whenever the
panel in a sliding panels widget changes. Basically, whatever panel
it's on, the detailregion div will change depending on what that
panel is. Is this possible? I've tried using setrow but I'm not
sure if I'm doing it right.

Hi, thanks for your reply.
At the moment the player does stops when you go to another page (not slide) and doesnt keep playing. Its all working very well on the pages. See test page
http://homepage.mac.com/nigelgrimshawjones/Candy_Lane/index.html
Its just that on the shows events page there are sliding panels where we go through each show. For each new show (panle) she wants a different song to automatically play.
I have set it up with a seperate player for each slide but unlike going from page to page, from slide to slide the music doesnt stop by itself. The test site has the old version with just one player at the top.
There probably is something I could do in Flash but I dont know what. Its a complicated thing (for me)
I was wondering if I could just use html music for those slides. I only need one song to play for each slide. But I need the song to stop when it goes to the next slide, (and the next song to start obviously)
Any ideas are much appreciated. This job is supposed to be finished and its the last request from the client.
Nige

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

Spry Sliding Panels Question..

Hello,
I'm building a website and want to have a small image gallery page, with Spry Sliding Panels as the framework. Everything was working fine until I realized that in the browser, when I clicked the link to go the next panel, the actual web page itself automatically snaps back up to the top before the panel actually slides. I was wondering how to fix this because the gallery is about halfway down the page, and it looks stupid when the page jumps back up to the top each time. Thanks for your help...

Yes, your panel button code (with my change) should look like this:
         <div class="panelbtn"><a href="javascript:;" onclick="sp1.showFirstPanel(); return false;">1</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p2); return false;">2</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p3); return false;">3</a></div>
         <div class="panelbtn"><A href="javascript:;" onclick="sp1.showPanel(p4); return false;">4</a></div>
This is what I meant when I said to replace the # with the word javascript:;
Beth

Horizontal Sliding Panels flicker IE

Hello
I'm using the horizontal Sliding Panel to slide some Images
and text. It works fine with Safari on Mac, but with IE and Firefox
on Windows the animation isn't very smooth (the problem concerns
only the image, the text-sliding works fine). With the vertical
Sliding Panels I don't have this problem...
Can anyone help me? Thanks

solaris23 wrote:
> Hello Danilo
>
> Horizontal:
http://www.miomedia.ch/test/SprySlidingPanels.html
> Vertical:
http://www.miomedia.ch/test/SprySlidingPanels2.html
>
> Look on the image in the horizontal slide, the animation
flickers on the left
> and right image-borders.
> In the vertical slide the animation is much smoother.
This probably has to do with the rendering of the moved
elements on the page and IE redrawing portions of the images at a
time during the slide. I'd suspect that the issue actually exists
in the vertical slide as well, but is minimized due to the angled
top and bottom of the images, but that's just a suspicion, not a
known fact. It seems that if I look closely enough at the animation
in Firefox it seems to be doing something similar, but it is indeed
a good bit smoother than IE.
> I'm using transparent png images, I've also tried with
jpg, with different
> duration time, different fps... but still the same
problem....
That would have been my suggestion too. A quick local copy of
your page and it seems that making the duration 1000 milliseconds
seems to help with moving left to right, but moving right to left
still has a little bit of flicker.
I tried making the images smaller and it seemed to be
lessened, so perhaps it's IE and the larger images rendering. You
might also try making the vertical lines of the screenshot to be a
bit less vertical, or perhaps add a shadow or glow to the image to
soften the hard vertical edge.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Sliding Panels Navigation Question

I'm using the sliding panels widget to display some image
thumbnails. The problem is, I'm displaying about 5 or so at a time,
and the showNextPanel function only moves the whole thing over by
one thumbnail, making it necessary to click it five times to show
the next set of thumbnails.
Mangled test file can be found
here.

Hello Luke,
I see there are 3 problems here you want/have to solve:
1. On page load you try to animate an element in page that
doesn't exists: thimbContainer. Every time you load the page in the
browser 3 alerts that the element is not found are generated by the
Spry Effects because the element isn't there. Please remove the
following code from the onload attribute attached to the body tag:
MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
2. The move next arrow doesn't work on the first click. The
problem appears because the SlidingPanel widget is instantiated
before the data to be putted in place in your page by the ds1 XML
DataSet. The regions are populated on page finish with the data but
the SlidingPanel widget will still try to animate the old,
incorrect element on the first click. To avoid this problem you'll
have to remove from page the SlidingPanel instantiation and
register a listener on the 'ticker' region update. Remove this
code:
<script type="text/javascript">
var sp = new Spry.Widget.SlidingPanels("ticker");
</script>
and just after the ds1 DataSet instantiation add the
following line:
Spry.Data.Region.addObserver('ticker',
{onPostUpdate:function(){sp = new
Spry.Widget.SlidingPanels("ticker");}});
3. To move the slider with the next 5 or prev 5 elements
you'll have to create your own functions that should add or
subtract from the current display index 5. The functions you look
for are:
function moveNextFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
var maxPanels = sp.getContentPanels().length;
if (idx > maxPanels)
idx = maxPanels;
sp.showPanel(idx);
function movePrevFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
var minPanels = 0
if (idx < minPanels)
idx = minPanels;
sp.showPanel(idx);
Please change the onclick for the previous and next arrows in
your Sliding Panels with calls to these 2 functions.
Regards,
Cristian

Sliding Panels PanelKeyCodes

Ola,
Is it possible to set PanelKeyCode prev/next to mouse wheel
event? Possible to step with the mouse wheel? If so please tell me
the the value of previousPanelKeyCode and nextPanelKeyCode.
Thnak you in advance!
Cheers
Kavichs: Data

Hi, thanks for your reply.
At the moment the player does stops when you go to another page (not slide) and doesnt keep playing. Its all working very well on the pages. See test page
http://homepage.mac.com/nigelgrimshawjones/Candy_Lane/index.html
Its just that on the shows events page there are sliding panels where we go through each show. For each new show (panle) she wants a different song to automatically play.
I have set it up with a seperate player for each slide but unlike going from page to page, from slide to slide the music doesnt stop by itself. The test site has the old version with just one player at the top.
There probably is something I could do in Flash but I dont know what. Its a complicated thing (for me)
I was wondering if I could just use html music for those slides. I only need one song to play for each slide. But I need the song to stop when it goes to the next slide, (and the next song to start obviously)
Any ideas are much appreciated. This job is supposed to be finished and its the last request from the client.
Nige

Sliding Panels Auto Advance w/ Timer

Hi everyone. I'm looking to make my sliding panels advance
with a simple timer. I know this can be done (right?) but can't
find any way to do this. I have text content in my panels (no
images) so the posted example of a gallery doesn't help me much.
I have no problem setting up the panels as I want, I just
want to make them advance every few seconds.
Anyone please help!!
Thanks so much,
Varen Swaab

Instead of creating a custom script, I decided to extend the widget it self. So everything can be controlled from the widget constructor.
Before we get started a small side note:
I would advice to put the changes in a seperate script, and not to modify the current SlidingPanels.js. This way, if you happen to update to Spry 1.7 it will not overwrite the change you made. But if you do not wish to update just paste it in the SprySlidingPanels.js (This saves a HTTP request, resulting in a slightly faster page load, maintainablity vs performance)
The changes allow you specify the following new options in the constructor:
- automatic: true / false [boolean]
turns automatic sliding panels on or off, off by default
- direction: 0 / 1 [number or Spry.forward , Spry.backward if you have SpryEffects included]
direction that panels should automaticly slide to, 1 is forward, 2 is backward
- each: 1000 [number]
time in miliseconds, note I had to name this "each" instead of duration, because duration handles the sliding panel animation duration.
Example constructor:
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { automatic: false, direction: 0, each: 5000 });
It also adds 3 new methods to the sliding panel:
- .start [ sp1.start(); ]
This allows you to start the automatic sliding of the panels, this will also work, if you did not specify automatic in your constructor
- .stop [ sp1.stop(); ]
Stops automatic sliding of the panels
- .setDirection [ sp1.setDirection(1); ]
Sets a new direction for the sliding panels, requires the same values as you can specify in the sliding panels constructor
The new code:
// line 121 of SprySlidingPanels.js
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
     var ele = this.element;
     if (!ele)
          return;
     if (this.enableKeyboardNavigation)
          var focusEle = null;
          var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
          if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
               focusEle = ele;
          if (focusEle)
               var self = this;
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
     if (this.currentPanel)
          // Temporarily turn off animation when showing the
          // initial panel.
          var ea = this.enableAnimation;
          this.enableAnimation = false;
          this.showPanel(this.currentPanel);
          this.enableAnimation = ea;
     if (this.automatic){
          this.start();
// These are all new methods
Spry.Widget.SlidingPanels.prototype.start = function(){
     var self = this; // reference to this, so we can use it inside our function
     this.automaticStarted = setInterval(function(){
               var panels = self.getContentPanels(),
                    panelcount = panels.length,
                    current = self.getCurrentPanel(),
                    newpanel;
               // locate the current panel index, and check if we need to increase or decrease the panel
               for(var i = 0; i < panelcount; i++){
                    if(panels[i] == current){
                         self.direction == 1 ? (i++) : (i--);
                         self.showPanel( self.direction == 1 ? (i >= panels.length ? 0 : i) : (i < 0 ? panels.length -1 : i));
                         break; // stop looping, we already found and are displaying our new panel
     }, this.each || 3000);
Spry.Widget.SlidingPanels.prototype.stop = function(){
     if(this.automaticStarted && typeof this.automaticStarted == 'number'){
          clearInterval(this.automaticStarted);
          this.automaticStarted = null;
Spry.Widget.SlidingPanels.prototype.setDirection = function(direction){
     this.direction = direction;
Hopes this helps

Sliding Panels Sample

I'm trying to pull a data set from xml into the Unobtrusive
Sliding Panels Sample from
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_unobtrusive.ht ml
but I'm not sure where to set it up to repeat and how to tag it so
that it actually pulls the data in...you can see what I have so far
(and the source code) at:
http://www.brianwpiper.com/demos/slider.htm
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>Unobtrusive Sliding Panels Sample</title>
<script type="text/javascript"
src="widgets/slidingpanels/SprySlidingPanels.js"></script>
<script type="text/javascript"
src="includes/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="sp_unobtrusive.js"></script>
<script type="text/javascript">

<link href="widgets/slidingpanels/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="samples.css" rel="stylesheet" type="text/css"
/>
<link href="slider.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h3>Project Gallery</h3>
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup"
spry:region="dsTest" spry:repeatchildren="dsTest">
<div id="detail{ds_RowID}" class="SlidingPanelsContent"
spry:repeat="dsProducts">
<div spry:detailregion="dsProducts" class="content">
<img src="{boximage}" alt="project screenshot"
width="{width}" height="{height}"/>
</div>
<div spry:detailregion="dsProducts">{desc}</div>
<div><a href="{link}"
target="blank">{linkText}</a></div>
</div>
</div>
</div>
<p class="navLinks">
<a href="#" id="link5">1</a> |
<a href="#" id="link6">2</a> |
<a href="#" id="link7">3</a>
</p>
</div>
</body>
</html>

Sweet!! Getting much closer. I had to remove a few extra
detailregion tags I had in there. Now the only issue is that the
numbers at the bottom don't actually jump to page 2 & 3, and in
the static htm sample, it also had a Next or Prev tags that would
have to be conditionally added...not sure how that would work...
Hmm...and it doesn't seem to work in IE at all??
Thanks for your help!! Any ideas on the other two issues and
the browser problem would be MUCH appreciated...

Sliding Panel Animation

I'm trying to adjust the easing of the sliding panel
animation. I'm hoping it will start up a little slower before
zipping off screen.
I'm trying to replicate the motion of this slider:
http://www.ndoherty.com/demos/coda-slider/1.1/
I think the needed changes are in this part of
SprySlidingPanels.js, but I can't figure it out. Can anybody help?
Thanks!!
Spry.Widget.SlidingPanels.PanelAnimator
= function(ele, curX, curY, dstX, dstY, opts)
this.element = ele;
this.curX = curX;
this.curY = curY;
this.dstX = dstX;
this.dstY = dstY;
this.fps = 60;
this.duration = 500;
this.transition =
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
this.startTime = 0;
this.timerID = 0;
this.finish = null;
var self = this;
this.intervalFunc = function() { self.step(); };
Spry.Widget.SlidingPanels.setOptions(this, opts, true);
this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition =
function(time, begin, finish, duration) { time /= duration; return
begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start =
function()
this.stop();
this.startTime = (new Date()).getTime();
this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop =
function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step =
function()
var elapsedTime = (new Date()).getTime() - this.startTime;
var done = elapsedTime >= this.duration;
var x, y;
if (done)
x = this.curX = this.dstX;
y = this.curY = this.dstY;
else
x = this.transition(elapsedTime, this.curX, this.dstX -
this.curX, this.duration);
y = this.transition(elapsedTime, this.curY, this.dstY -
this.curY, this.duration);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
if (!done)
this.timerID = setTimeout(this.intervalFunc, this.interval);
else if (this.finish)
this.finish();

Another change I made based on nice features of the Coda
Slider I referenced above:
Able to Link/Bookmark particular panels
We want to add an anchor hashes (#1, #2, #3 etc) to the url
for each panel, and then in the js file, extract the hash and make
it the default.
IN THE HTML:

<a href="#1" onclick="sp2.showPanel(0); return
true;">1</a> |
<a href="#2" onclick="sp2.showPanel(1); return
true;">2</a> |
<a href="#3" onclick="sp2.showPanel(2); return
true;">3</a> |
<a href="#4" onclick="sp2.showPanel(3); return
true;">4</a> |
<a href="#5" onclick="sp2.showPanel(4); return
true;">5</a>

<div id="example2" class="SlidingPanels" tabindex="0">
<div class="SlidingPanelsContentGroup">
<div id="ex2_p1" class="SlidingPanelsContent
p1"><img src="image1.jpg" ></div>
<div id="ex2_p2" class="SlidingPanelsContent
p2"><img src="image2.jpg"></div>
<div id="ex2_p3" class="SlidingPanelsContent
p3"><img src="images3.jpg"></div>
<div id="ex2_p4" class="SlidingPanelsContent
p4"><img src="images4.jpg"></div>
<div id="ex2_p5" class="SlidingPanelsContent
p5"><img src="image5.jpg"></div>
</div>
</div>
IN THE Spry.SlidingPanels.js FILE:
// Add this right before the part about default
// NEW STUFF HERE
// Grabs the number after the hash and makes it the default
// Note: had to add the hashes to the <a href> and set
return to true
this.defaultPanel = parseInt(location.hash.slice(1));
this.defaultPanel = this.defaultPanel-1;
// my hash numbers start at 1 but the array starts at 0, so
subtracted 1 from mine
// Back to regularly scheduled programming
// END NEW STUFF
Hope this helps someone.

Sliding panels slide to top on update

Similar Messages

Maybe you are looking for