dhtmlgoodies - Slide Pane with multimple panes


Close


To accomplish this, do this:

  • Click on key A
  • Open the bla bla window
  • Enter your name in the first text box
  • Save your changes

Close


This is a nice red pane


Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here

Close
And now a little bit about myself
Show panel 1  | Show panel 2  | Show panel 3

How to adapt script

  1. Create class for each panel (define colors etc)
  2. Create new panel with UNIQUE id
  3. Add links to open/close each panel indicating the id of the panel to move:
    
    <a href="#" onclick="initSlideLeftPanel('dhtmlgoodies_leftPanel3');return false">
    Show panel 3</a>
    
  4. Look for the "initSlideLeftPanel()" function and replace the first few lines:
    function initSlideLeftPanel(expandOnly)
    {
      if(slideInProgress)return;
      if(!slideLeftPanelObj){
        if(document.getElementById('dhtmlgoodies_leftPanel')){	
          // Object exists in HTML code?
          slideLeftPanelObj = document.getElementById('dhtmlgoodies_leftPanel');
          if(panelPosition == 1)slideLeftPanelObj.style.width = "100%";
        }else{	
          // Object doesn't exist -> Create <div> dynamically
          slideLeftPanelObj = document.createElement("DIV");
          slideLeftPanelObj.id = "dhtmlgoodies_leftPanel";
          slideLeftPanelObj.style.display="none";
          document.body.appendChild(slideLeftPanelObj);
        }
        //etc.
    
    with the following code which now uses the specific id of the panel to be closed:
    var z_index=10;
    function initSlideLeftPanel(the_panel,expandOnly)
    {
      
      // reset "slideLeftPanelObj" if different from last one for closing panes
      if(the_panel!=slideLeftPanelObj.id)slideLeftPanelObj="";
        
        if(slideInProgress)return;
          if(!slideLeftPanelObj){
            z_index++;
            if(document.getElementById(the_panel)){	
              // Object exists in HTML code?
              slideLeftPanelObj = document.getElementById(the_panel);
              slideLeftPanelObj.style.zIndex = z_index;
              if(panelPosition == 1)slideLeftPanelObj.style.width = "100%";
            }else{	
              // Object doesn't exist -> Create <div> dynamically
              slideLeftPanelObj = document.createElement("DIV");
              slideLeftPanelObj.id = the_panel;
              slideLeftPanelObj.style.display="none";
              //slideLeftPanelObj.style.z-index="none";
              document.body.appendChild(slideLeftPanelObj);
            }
            //etc.
    
    Note that I have also added an increaseing z-index for each panel to ensure that it slides out above the previous panel.
  5. To have a specific panel slide out on load like in this example, modify the <body> tag with this:
    <body onload="initSlideLeftPanel("NAME OF PANEL TO SLIDE OUT");return false;">

 Are My Sites Up?  ServWise - Low cost, reliable and fast hosting with 24/7 support