Sliding Panels Unwanted "Bouncing" Effect

Hey there,
When a sliding panel is moving, it bounces downwards and slowly makes it's way back up.
Here's the page where it's happening: http://www.newerthleague.com/test.php
You can move forward through the panels by clicking on the play button (fourth button from the left).
The cause is that I have the SlidingPanels class padded 10 pixels on the top and left. As soon as I remove the padding there's no bounce. But the problem is I need to keep it there in order for the images to look right inside the border.
Can anyone please suggest something to fix this? I have tried using margins and padding almost everywhere and absolutely nothing takes this bounce effect away.
Thanks in advance, Chris

You're great thank you!
I added 10px of padding to the left and top of the images and then simply increased the width and height of the SlidingPanels class by 10px to show the change and it's working great!
Thank you very much Beth

Similar Messages

  • Need help with Bounce effect

    Hi, I'm using Flash CS3 but I'm working in Actionscript 2.0.
    What I'm trying to do is a simple bounce effect for an png image in
    a banner that I'm working on. Right now I have the 90 px image
    right above the 728x90 stage. I want it to bounce down into place
    onto the stage. I selected the image, converted it to a movie clip
    and named the instance of the clip girl_mc. Then I created an
    Actions layer, selected the first frame of that layer, and opened
    my Action panel. Here's the code I used to get the bounce effect
    but it's not working...
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    new Tween(girl_mc,"_y",Bounce.easeOut,girl_mc._y,45,3,true);
    The 45 is the position I want it to end up at (which is right
    in the middle of the 90 pixel stage).
    Can anyone let me know what I'm doing wrong? Big thanks in
    advance!

    Actually, you're right, when I worked up the file from
    scratch the bounce effect worked fine. Question, I have two objects
    I want to bounce (girl_mc and weight_mc). I want the weight one to
    start bouncing into place about a half second or second after the
    girl one. How would I do that? I tried dragging the weight_mc movie
    clip to the 10th frame on the timeline and the whole thing didn't
    work. I also tried creating a keyframe on the actions layer at the
    10th frame and putting the weight_mc actionscript there and again
    the whole thing didn't work. Any suggestions?

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

  • Spry Sliding PAnels

    HI,
    I am trying to incoperate the "Spry Sliding" feature in my
    website.But problem is coming that I have to define the height of
    the container of each sliding panel(So,its not giving the
    flexibilty) If I am removing the height than the all panels are
    showing (So,the effect of sliding panel is lost).
    So help me how to define the same feature without the
    "HEIGHT".I am using the examples/demos given on the spry offical
    website.
    Thanks,

    Yes that sounds about right. As usual I am trying to figure
    out ways to have a nice navigation and be able to have a good
    amount of copy live on the page and keep the web pages footer
    within the viewers browser window. The search continues.

  • 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 prev/next buttons

    Using graphic buttons for previous and next navigation with Spry Sliding Panels, how can the 'previous' button be dimmed or hidden when you're on the first slide, and conversly, have the 'next' button dimmed or hidden when you're at the end of the slides? Ideally there would be a CSS class added to one button or the other to change states. Or can the Spry Fade Effect be used here to fade the buttons on and off?

    The default Spry Widget has no functionality to indicate the current panel. I have created a small hack for that before. You might want to check out this post here:  http://forums.adobe.com/message/2175472#2175472
    Hopes this helps.

  • Sliding Panels using HTMLPanel

    //////// FIXED /////////////
    sorry for the previous post , I fixed my code it was an error
    on my onclick function the 2 widgets work simply perfect.
    if someone interested i can put online some example
    ciao P
    //////// FIXED /////////////
    I'm trying to integarte Sliding Panels and HTMLPanel Widget
    I used the syntax as showed in APi docs
    I call every panel with an onclick function like
    onclick="SP1.showFirstPanel(0)
    ;sp1.loadContent('panels/sp1.html'); return false;"
    and this is the instance of the widget
    var SP1 = new Spry.Widget.SlidingPanels("panelwidget"); //
    sliding widget
    var sp1= new Spry.Widget.HTMLPanel("sp1"); // htmlpannel
    containing my splinding panel number 1
    sp1.loadContent('panels/sp1.html');
    do you think this two widgets can operate togheter ?
    thanks in advance
    Paolo

    bandg111 wrote:
    Hello,
    Title says it all really, I'm using SlidingPanels and am trying to add one of the default easing effects (such as 'sinusoidalTransition' ) to it...
    I don't know what the syntax is!
    I've got
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget" , {duration:600, fps:160, defaultPanel:0, enableAnimation:true, enableKeyboardAnimation:false});
    and want to add easing to it... do I just need to plonk sinusoidalTransition in there somewhere? I can't find examples of the syntax anywhere!
    Add advice appreciated!
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget" , {duration:600, fps:160, defaultPanel:0, enableAnimation:true, enableKeyboardAnimation:false, transition: Spry.sinusoidalTransition});
    Try that.

  • Spry Sliding Panel Flicker

    I am new to Spry and familiar with but not fluent in
    JavaScript.
    I have created sliding panels to hold text and they work
    beautifully with the exception of a flicker or flash when the page
    is loaded. The extra text flashes on the right side (these are
    horizontal panels) as the page is loading. It does not do it on
    every page or every time; it seems more frequent on the longer
    pages and on slower connections.
    A couple of the pages that pose problems frequently are:
    http://www.tersiiska.com/creativity/main/introduction.html
    http://www.tersiiska.com/creativity/resources/inspiration.html
    I am working in Dreamweaver CS3 and used the code from Spry
    1.5
    My CSS (below) is basically the SprySlidingPanels.css file
    with a couple of changes to get the horizontal effect and the
    correct panel size.
    .SlidingPanels {
    position: relative;
    width: 100%;
    float: left;
    height: 340px;
    padding: 0px;
    border: none;
    .SlidingPanelsContentGroup {
    position: relative;
    float: left;
    width: 10000px;
    margin: 0px;
    padding: 0px;
    border: none;
    .SlidingPanelsContent {
    width: 570px;
    height: 340px;
    float: left;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: none;
    .SlidingPanelsAnimating * {
    overflow: hidden !important;
    .SlidingPanelsCurrentPanel {
    .SlidingPanelsFocused {
    Any help would be greatly appreciated.
    Thank you,
    Donna

    Hi Donna,
    This is easily fixed by adding an overflow:hidden to the
    .SlidingPanels rule:
    .SlidingPanels {
    position: relative;
    width: 100%;
    float: left;
    height: 340px;
    padding: 0px;
    border: none;
    overflow: hidden;
    The widget actually programatically sets the overflow:hidden
    on the top-level element of the widget when the constructor is
    called, but as you say, this can be too late on a very slow
    connection... we do it that way so that if JavaScript is turned
    off, the user can still see *all* the content.
    --== Kin ==--

  • Sliding panel / Dockable window

    I am looking for sample code for implementing a sliding panel or dockable window. IntelliJ IDE has label on left "Project" which when clicked slides-in a panel (or something) which has project elements in a tree. I am looking for a similar effect for a swing based application.
    I tried using scrollpane and try setting its "setDividerLocation" property incrementally but it does not give the same effect. It "jumps" the last position, no matter how much I try repainting/updateUI etc.
    If you have any sample / hint for code please let me know.
    Thanks
    Prakash

    Perhaps using a jsplitpane with continuouslayout as true might solve your problem when you are incrementing the divider location. With continuousLayout you shouldn't get the jumping effect.
    JSplitPane sp = new JSplitPane();
    sp.setContinuousLayout(true);

  • 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 with tabs

    Hello again,
    Is there some way to change the orientation of tabs to bottom
    in this example: Sliding panels with tabs?
    that's all folks,
    morpheto

    You need to look at the code in the load handler of this JS
    file:
    http://labs.adobe.com/technologies/spry/home_assets/spry_home.js
    If you add a tab, you need to add it to the list of items to
    select in this statement:
    Spry.$$("#nutshell, #widgets, #data,
    #effects").addEventListener("click", function(){
    switchTab(this.id); return false; }, false);
    --== Kin ==--

  • Sliding Panel - default panel

    Hello,
    I have looked in the documents section for the sliding panels
    but I can't find a solution how NOT to show the content until a
    user clicks on a link. If there is a solution documented, please
    point me in the right direction. If not, can you advise how to best
    go about it - or is it an effect?
    Cheers,
    tintin

    add style visibility hidden to the div,
    than use the SpryDOMUtirls.js onloadlistener to show it
    (using document.getElementById and style.visibility

  • AS 2 sliding panel  - AS 3 sliding panel help

    hey all,
    i was using a script to animate some site content with a
    sliding panel easing effect in AS 2, but when i try to run the
    script in AS 3 it doesn't work. is there a way to convert this to
    AS 3 quickly?
    baseRate = 3.5;
    difference = _parent.targetx - _parent.panel._x;
    rate = difference / baseRate
    _parent.panel._x += rate;
    if this doesn't convert to AS 3, does anyone know of a good
    easing formula in flash 9?
    thanks for the help!

    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

  • Is it possible to get one sliding panel to automatically display a web site?

    I have a slinding panel widget with 6 content panes.  One of the tabs is named "Online Help'.  I would like the content pane for that tab to automattically display a form that is on a website.
    The 'onclick' that is associated with the "Online Help" tab is calling the sliding panel number.  If I repace it with an http address, the other panels continue to display but, that panel displays blank.
    I have tried a CSS style tag for the panel that includes the http url in a background attribute.  That is not working either.
    I made a stab at spry:detailregion, but I don't know if a url can be a prameter in that element.
    Does anyone have ideas on what I can try?
    Thanks,
    meileendougherty

    Well, a url can be the contents of a data cell, but it will only give you a link, not the other website.
    Although iframes are often considered tricky, I have not had bad luck with them. Put an iframe in your content cell, and use your other website as the source. You will have to give the iframe dimensions, or it will default to 'pretty small'.
    Beth

  • 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

Maybe you are looking for