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();
}

Similar Messages

  • Safari 4 problems - HTMLDataSet/Sliding Panels

    Hi,
    I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4.  For some reason the detailRegions are not loading properly in Safari 4.  I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either.  IE and FF seem to be working fine still.  Any help would be greatly appreciated.  I'm very new to this so please bear with me if I have any glaring mistakes.  THANKS!!!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Flowers</title>
    <link href="mainStyles.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    #sidebar1 { padding-top: 30px; }
    #mainContent { zoom: 1; padding-top: 15px; }
    div.mainContent  { overflow:hidden; word-wrap: break-word;}
    /* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
    </head>
    <body class="thrColHybHdr">
    <div id="container">
      <div id="header">
        <a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>
    <!-- end #header -->
      <div id="sidebar1">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="index.html">Home</a></li>
          <li><a href="animals.php">Animals</a></li>
          <li><a href="barns.php">Barns</a></li>
          <li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
            <ul>
              <li><a href="washingtondc.php">Washington DC</a></li>
              <li><a href="nyc.php">New York City</a></li>
            </ul>
          </li>
          <li><a href="fireworks.php">Fireworks</a></li>
          <li><a href="flowers.php" class="selected">Flowers</a></li>
          <li><a href="lighthouses.php">Lighthouses</a></li>
          <li><a href="misc.php">Miscellaneous</a></li>
          <li><a href="national_parks.php">National Parks</a></li>
          <li><a href="plants.php">Plants</a></li>
          <li><a href="waterfalls.php">Waterfalls</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2">
         <div id="detailArea1" spry:detailregion="ds1">
              <div class="detailText">
             <h1>{PictureTitle}</h1>
             <p>{PictureResolution1}</p>
             <p>{Price1}</p>
            <p>{Button1}</p>
            <p>{PictureResolution2}</p>
             <p>{Price2}</p>
            <p>{Button2}</p>
             <br class="clearfloat"/>
             </div>
         </div>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
           <div id="galleryContentGroup" class="SlidingPanelsContentGroup">
             <div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
            <div class="galleryItem">
            <p class="thumbnail">{Thumbnail}</p>
            <p class="pictureTitle">{PictureTitle}</p>
            </div>
            </div>
         </div>
      </div>
      <p id="panelNav" class="fltlft">
           <a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
           <a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
           <a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
           <a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
      </p>
    <div id="detailArea2" spry:detailregion="ds1">
         <div class="detailImg">
        <img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
        </div>
    </div>
    <div id="gallery">
    <div class="galleryItem">
    <p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
    <p class="pictureTitle">Daisy</p>
    <p class="pictureResolution">Resolution: 900x600</p>
    <p class="picturePrice">Price: $1.00</p>
    <p class="button">
    <span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397389"/>
    <input type="hidden" name="item_name" value="Daisy"/>
    <input type="hidden" name="custom" value="3454_900.jpg"/>
    <input type="hidden" name="amount" value="1.00"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureResolution">Resolution: 2048x1365</p>
    <p class="picturePrice">Price: $5.00</p>
    <p class="button">
    <span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5111872"/>
    <input type="hidden" name="item_name" value="Daisy"/>
    <input type="hidden" name="custom" value="3454_2048.jpg"/>
    <input type="hidden" name="amount" value="5.00"/>
    <input type="hidden" name="option_name_1" value="flowers"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureHires">3454_wm.jpg</p>
    </div>
    <div class="galleryItem">
    <p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
    <p class="pictureTitle">Sun Orchid</p>
    <p class="pictureResolution">Resolution: 900x600</p>
    <p class="picturePrice">Price: $1.00</p>
    <p class="button">
    <span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397419"/>
    <input type="hidden" name="item_name" value="Sun Orchid"/>
    <input type="hidden" name="custom" value="6586_900.jpg"/>
    <input type="hidden" name="amount" value="1.00"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureResolution">Resolution: 2048x1365</p>
    <p class="picturePrice">Price: $5.00</p>
    <p class="button">
    <span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick"/>
    <input type="hidden" name="hosted_button_id" value="5397432"/>
    <input type="hidden" name="item_name" value="Sun Orchid"/>
    <input type="hidden" name="custom" value="6586_2048.jpg"/>
    <input type="hidden" name="amount" value="5.00"/>
    <input type="hidden" name="option_name_1" value="flowers"/>
    <input type="hidden" name="return" value=""/>
    <input type="hidden" name="lc" value="MY"/>
    <input type="hidden" name="rm" value="2"/>
    <input type="hidden" name="bn" value="PP-BuyNowBF"/>
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
    </form></span>
    </p>
    <p class="pictureHires">6586_wm.jpg</p>
    </div>
    </div>
        <br class="clearfloat"/>
         <!-- end #mainContent --></div>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
       <div id="footer">
        <p><!-- <span class="fltrt">ADD SOMETHING ELSE HERE</span>-->&copy; 2009</p>
      <!-- end #footer --></div>
         <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var sp = new Spry.Widget.SlidingPanels("slidingGallery");
    Spry.$$(".thumbnail a").removeAttribute("href");
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

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

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

  • Sliding panel inside tabbed panel - onclick both

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

    Try this and adapt to your needs:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
    <script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style>
    .SlidingPanels {
       position: relative;
       width: 200px;
       height: 200px;
       padding: 0px;
    .SlidingPanelsContentGroup {
       position: relative;
       height:600px;
       margin: 0px;
       padding: 0px;
    .SlidingPanelsContent {
       width: 100%;
       height: 400px;
       overflow: hidden;
       margin: 0px;
       padding: 0px;
    </style>
    </head>
    <body>
    <a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Contenu 1
          <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
          <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
          <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
             <div id="slidingPanel_1" class="SlidingPanels">
                  <div class="SlidingPanelsContentGroup">
                     <div id="content1" class="SlidingPanelsContent">The Content 1</div>
                <div id="content2" class="SlidingPanelsContent">The Content 2</div>
                <div id="content3" class="SlidingPanelsContent">The Content 3</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Contenu 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    Spry.Utils.addLoadListener(function() {
            Spry.$$("#trigger1").addEventListener('click', function() {
                TabbedPanels1.showPanel(0);
                sp1.showPanel(2);
            }, false);
            Spry.$$("#trigger2").addEventListener('click', function() {
                //TabbedPanels1.showPanel(0);
                sp1.showPanel(0);
            }, false);           
    </script>
    </body>
    </html>
    You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
    Xav

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

  • 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

  • Problem with Accordion Widget INSIDE Sliding Panel Widget

    Hello,
    perhaps I should not do this, but I nested an Accordion
    Widget inside a Sliding Panels Widget:
    - There are eight Panels.
    - Each one contains a complete Accordion.
    The sliding works fine, and so does the Accordion animation,
    but the text inside the Accordion Panel Tabs won't move along, when
    a tab is activated. I need to hover the mouse over the accordion to
    make the panel texts appear again.
    Of course, when I un-nest the widgets and move the Accordion
    widget out of the Sliding Panel widget, everything is fine.
    My question is:
    - am I demanding "too much" by nesting the widgets?
    - or should this basically work, and the problem arises from
    rivalling scripts?
    Here is a link:
    Nested
    widgets Test
    The horizontal top menu will activate the sliding panels, but
    as of now only the leftmost menu item contains an Accordion (I know
    the CSS does not look nice yet).
    Is there anything I can optimise to get this to work?
    Thank you so much,
    Greetings, Jensen
    Edit: The problem does NOT occur in Firefox, but in
    Safari.

    Hi John,
    That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
    Regards,
    Aish

  • Spry Sliding Panel - Timer

    I've been working on extending Spry's Sliding Panels to allow
    me to set a timer to auto advance to the next panel. Whilst I had
    success with a script that targeted a particular element (eg sp1)
    it really isn't terribly useful to have to recode per panel. So
    trying to extend instead. Problem is that I keep getting an error
    that says the advanceToNextPanel function doesn't exist. Hoping
    someone might be able to point me in the right direction. Code
    below:
    // Sliding Panel Timer
    // Based upon
    http://labs.adobe.com/technologies/spry/demos/gallery/gallery.js
    and feedback within the Adobe Spry forum
    // Extend SlidingPanels to include additional data
    Spry.Widget.SlidingPanels.prototype.gPanelShowInterval =
    1000; // msecs between panels
    Spry.Widget.SlidingPanels.prototype.gPanelShowOn = false;
    Spry.Widget.SlidingPanels.prototype.gPanelShowTimer = null;
    Spry.Widget.SlidingPanels.prototype.gAutoStartPanelShow =
    true;
    Spry.Widget.SlidingPanels.prototype.addPanelShowTimer =
    function()
    if (this.gPanelShowInterval == undefined)
    this.gPanelShowInterval = 10000; // msecs between panels
    if (this.gAutoStartPanelShow)
    this.startPanelShow();
    // Kill any previous timer event
    Spry.Widget.SlidingPanels.prototype.killPanelShowTimer =
    function() {
    if (this.gPanelShowTimer)
    clearTimeout(this.gPanelShowTimer);
    this.gPanelShowTimer = null;
    // Display next sliding panel on rotational loop
    Spry.Widget.SlidingPanels.prototype.advanceToNextPanel =
    function() {
    var tPanels = this.getContentPanels().length - 1; // Total
    Panels
    var cPanel = this.getContentPanelIndex(this.currentPanel);
    // Index of currently displayed panel
    if (tPanels == cPanel)
    this.showFirstPanel(); // Return to the first panel
    else
    this.showNextPanel(); // Show the next sliding panel
    this.setPanelShowTimer();
    // Setup timer event to change to next panel
    Spry.Widget.SlidingPanels.prototype.setPanelShowTimer =
    function() {
    this.killPanelShowTimer(); // Kill any previous timer event
    this.gPanelShowTimer = setTimeout( function() {
    this.gPanelShowTimer = null; this.advanceToNextPanel(); },
    this.gPanelShowInterval);
    // Start the timed sliding panel
    Spry.Widget.SlidingPanels.prototype.startPanelShow =
    function() {
    this.gPanelShowOn = true;
    this.setPanelShowTimer();
    };

    My previously posted I'd fixed this but it is in fact not
    working.
    Hi hope you can help.
    My Spry Sliding panel is appearing over my floats in IE, fine
    in Firefox.
    Test
    page here
    Sliding
    Panels CSS Here
    Any ideas?
    Is this a spry problem or my CSS?
    Thanks.
    Rich

  • Vertical Sliding Panel Code

    I want to create some vertical sliding panels but can't seem
    to find the JS and the spry code files anywhere on the Spry site. I
    have CS3 but they do not include this as a built in widget. Is
    there a place where I can get the code so I can implement this?
    Seems easy enough.
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html

    jergerb wrote:
    > I want to create some vertical sliding panels but can't
    seem to find the JS and
    > the spry code files anywhere on the Spry site. I have
    CS3 but they do not
    > include this as a built in widget. Is there a place
    where I can get the code so
    > I can implement this? Seems easy enough.
    >
    >
    >
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    FWIW: the sliding panel widget isn't built into DWCS4 either.
    The page you linked to has all the code you need, simply view
    source and look for the vertical section in the code. If it's
    easier, you can also check out the samples within the Spry
    Download:
    http://labs.adobe.com/technologies/spry/home.html
    and look within the "samples" folder and open up the files for the
    various sliding panel examples to see how the code is constructed.
    Also, you can visit Spry API page:
    http://labs.adobe.com/technologies/spry/articles/data_api/index.html
    click on Sliding Panels on the left, then Overview, and you'll see
    the code you can insert into your page as well as a list of the
    required JS and CSS files for the panel.
    HTH
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Sliding Panels in iPhoto

    I love creating slideshows with iPhoto 09. I prefer using the Sliding Panels theme, but have run into problems when I adjust the photos to fit the sliding panel configuration. Sometimes iPhoto cuts off an important part of the photo. When I adjust the photo so that it is framed how I want it, iPhoto occasionally undoes my adjustment. Sometimes, I catch it and readjust it, and it stays. Sometimes, it appears to change it after I think I am done and end up with embarrassing glitches. Does anyone know how I can ensure that the changes I make are permanent (at least until I change them)?
    Thank you.

    Did you ever come up with a resolution to this? I like the style myself for a simple intro but need to make adjustments in final cut for timing and such. The only thing I can think of is to draw the frame and then slide the pictures in and out behind. I'd love an easier way.

  • Sliding Panels - Problems Scrolling Horizontal in Safari

    I have adjusted the CSS in order to make the Sliding Panels widget scroll horizontal using the float: left;
    It is working fine in Firefox but no matter what I do it does not scroll horizontal in Safari, it continues to scroll verticle.  It seems as if it is just not responding to the float in the style.
    What am I doing wrong?
    Here is the URL to the page I'm working on.
    www.wyndetryst.com/testportfolio/portfolio.html

    It works fine in my safari. Do the examples work in safari?  (Example 2: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html )
    Did you also change the rest of the setting or just the float:left. As it needs width changes as well as seen in the example.

  • Multiple sets of Spry Tabbed Sliding Panels?

    I have my code set up for one sliding panel set with three tabs but I want to copy that set and create another set of the same 3 sliding tabs right below it with different content. However, when I copy it to the next set, clicking the second set of tabs still causes the first sets sliding Panel to slide. Furthermore, a few elements of the css are no longer being read for the second set, including the script in the .SlidingPanels that hides any of the text box outside of the specified dimensions.
    Attached are a txt file for my html and css if that helps.
    Any help on this would be greatly appreciated.
    Thanks!
    [Moved to Spry forum by moderator]

    The constructor appears at the bottom of your sliding panel code, in exactly the format that Arnout has shown. You do not need to go into the javascript file for it.
    But the first thing I think you need to do is to make sure that you match the classes (and format) you are using with the classes per your sliding panels style sheet.
    Here is the essential markup (your content is not here; this is based on a plain example widget):
    <div style="margin: 0 auto; width: 350px; border: solid 1px red;">
    <a href="#" onclick="sp.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> | <a href="#" onclick="sp1.showPanel('p4');">Panel 4</a><!--example to show specific panel-->
    <div id="panelwidget" class="SlidingPanels" style="margin: 0 auto;">
    <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>
    Note that the ID of the <div id="panelwidget" class="SlidingPanels"> matches the "panelwidget" in the constructor
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    For your second panelgroup, make <div id="panelwidget_01" class="SlidingPanels"> and change the constructor to
    var sp2 = new Spry.Widget.SlidingPanels("panelwidget_01");
    And of course the onclicks in the nav area should change for the second sliding panels set to use sp2 instead of sp1.
    I hope that Arnout will correct me if I have got it wrong!
    Best,
    Beth

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

  • 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

  • HTML Panel with Tabs like Sliding Panel tabs

    Hi, what do I need to add/change to have HTML panels
    switching with tabs that switches background image like the tabs in
    sliding panels example?
    Or can I modify the
    sp_withTabs.js to have graphic tabs work with HTML
    Panels?

    Nevermind, I got it. I used the SpryTabbedPanels.js and
    modified the SpryTabbedPanels.css with my graphics, size, position
    and what not.
    I do have one more question. I'm using HTML Panels with Fade
    in and out and when loading my page I have to have default content
    in the main html doc for something to display when the page loads.
    Then when I click on the first button, it then loads the real
    external HTML panels. Is there any way I can load my first external
    HTML page right when my site loads?

Maybe you are looking for

  • OAS  System Administrator (Full-time job) - Santa Monica, CA

    Greetings, I am a hiring manager at a successful e-commerce company based in Santa Monica, CA who is looking for talented system adminstrators with Oracle Application Server experience. Our company has created a complete business-to-business e-commer

  • Using iPod in Japan

    My son is going to Japan. I'm wondering if he'll need some kind of adapter in order to safely use the charger for his iPod Mini. Anyone have experience here? iPod Mini   Mac OS X (10.2.x)  

  • URGENT LocalDirector 417 question

    Can you have two stickys (one for generic and one for ssl) for the same virtual for 80 and 443 like this: virtual 192.168.45.1:80:0:tcp is virtual 192.168.45.1:443:0:tcp is real 192.168.45.10:80:0:tcp is real 192.168.45.10:443:0:tcp is real 192.168.4

  • Org.springframework.beans.factory.BeanCreationException

    In the perisistence.xml we are configured the subscription jndi, calling using this applicationContext.xml. But our problem is that subscription jndi should be configured in jboss locally. Where we have to configured that jndi in local server. I have

  • Has anyone else noticed: PAN - is a resource hog

    I was just wondering if anyone else had run across this? When I start PAN it seems fine.  Once I start downloading headers, it will eat up a LOT of my RAM along with swap.  I've used Knode, and it handles just fine.  I have a gig in this laptop and I