SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Menu Slide down

  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Slide down

    Hey guys, I have a div i need to be able to click and then another div slide down and stay there until I click a close button. Does anyone know of a tutorial or some code I can look at?

    Thanks in advance
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  2. #2
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an example. Have fun.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>The Rambo Tribble Simple Slide Script 03-10-05</title>
    <!-- Description: A script for producing a sliding in or out of view effect on block elements
    
         Advantages:  Easy to modify characteristics of direction and speed
                      CSS directional widget is lightweight but visually effective
                      Accepts a variety of measurements - pixels, points, ems
                      Allows multiple, simultaneous sliding elements 
                      
         Features:    Unit conversion routines for broad compatibility
                      Object property assignment for reliable persistence between iterations
                      Simple, efficient, string manipulations overcome setInterval's 
                         lack of parameter passing
                      Targeted conditionals minimize operational overhead
                        
         Use:         This demo shows a variety of implementation approaches.
         
         Benefits:    No images were exploited in producing the widgets. The images that might
                      have been used in this demo are being humanely pastured at a small server farm outside 
                      of Lodi. The electron volts used in developing these displays were raised, cruelty-free,
                      in the Northwestern United States. Due to the compact nature of CSS rules versus 
                      images, far fewer electrons, microwaves and photons need be displaced from their natural 
                      homes and routines to bring you this. Quanta everywhere are sure to endorse this 
                      economical and earth-friendly approach.   
         
         Mod notes:   The script can easily be modified to not use the widget, if desired. It is only necessary 
                      that the class be used to toggle the target object's slide direction.
                      
                      The minimum height to which the element collapses is set by the parameter passed to minht_val, 
                      when the sliDiv() function is called. It need not be the same as the element's starting height. 
                      If so desired, the script could easily be modified to simply use the height it reads from the 
                      element as the minimum height value, instead of using a passed paramenter. 
                      
                      
                      
                       
     -->
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html,body{height:100&#37;;}
    body{margin:0;padding:0;overflow:hidden;}/*'overflow:hidden' required by Opera for bottom div to appear flush */
    div{position:absolute;margin:0;padding:0;}
    #main{height:100%;width:100%;}
    #topDiv{height:100%;width:100%;background:#BCF;}
    #botDiv{bottom:0;width:100%;height:10px;background:#ada;overflow:hidden;text-align:center;}
    div.widgUD{position:relative;height:0;width:0;margin:2px auto;padding:0;overflow:hidden;
      border-left:12px solid #dfd;border-right:12px solid #dfd;cursor:pointer;}
    div.widgUp{border-top:0;border-bottom:6px solid #F00;}
    div.widgDn{border-bottom:0;border-top:6px solid #F00;}
    .topDn{}
    </style>
    <script type="text/javascript">
    // Global variables are needed because setInterval() does not pass parameters reliably.
    var targs_str=""; //string to hold target div ids
    var sli_incr=2;   //movement increment control; larger number=faster effect
    
    function sliDiv(){
      var targs=targs_str.split(",")
      for(var i=0;i<targs.length;i++){
        var targDiv=document.getElementById(targs[i]);
        var tgDvWg=document.getElementById(targDiv.wgId);
        var ht_val=targDiv.offsetHeight;
        if(ht_val<targDiv.minHt)targDiv.minHt=ht_val; //make sure slide will start
        if(tgDvWg.upDn==0){
          var nw_val=ht_val+sli_incr;
        }else if(tgDvWg.upDn==1){
          var nw_val=ht_val-sli_incr;
        }
        targDiv.style.height=String(nw_val)+"px";
        if(nw_val>=targDiv.maxHt||nw_val<=targDiv.minHt){
          var cl_nam=tgDvWg.className;
          cl_nam.indexOf('widgUp')!=-1? cl_nam=cl_nam.replace(/widgUp/,'widgDn') : cl_nam=cl_nam.replace(/widgDn/,'widgUp');
          tgDvWg.className=cl_nam;
          targs.splice(i,1);
          targs_str=targs.toString();
          if(targs_str==""){
            clearInterval(timId);
            return;
          }
        }
      }
    }
    
    function run_sliDiv(targDiv,wg_id,maxht_val,minht_val){
    //create invisible div to use in unit conversion
      if(!document.getElementById('UnitConvert001')){ //create div if needed
        tstDiv=document.createElement("div");
        tstDiv.id="UnitConvert001";
        tstDiv.style.visibility="hidden";
        tstDiv.style.position="absolute";
        tstDiv.style.bottom="0";
        tstDiv.style.margin="0";
        tstDiv.style.padding="0";
        tstDiv.style.overflow="hidden";
        tstDiv.style.width="1px";
        document.body.appendChild(tstDiv);
      }
    
      if(targs_str.indexOf(targDiv.id)==-1){  //if the target div isn't already being processed, proceed
        if(!targDiv.wgId){                    //if the target div hasn't been assigned slide attributes
          tstDiv.style.height=maxht_val;      //use invisible div to convert units to pixel counts
          targDiv.maxHt=tstDiv.offsetHeight;  //and attach as properties of target object
          tstDiv.style.height=minht_val;
          targDiv.minHt=tstDiv.offsetHeight;
          targDiv.wgId=wg_id;                 //attach target div's widget div id 
        }
        var tgDvWg=document.getElementById(wg_id);    //get widget to test status and execute accordingly
        if(tgDvWg.className.indexOf('widgUp')!=-1||tgDvWg.className.indexOf('widgDn')!=-1)tgDvWg.className.indexOf('widgUp')!=-1? tgDvWg.upDn=0 : tgDvWg.upDn=1;
        if(tgDvWg.className.indexOf('topDn')!=-1)tgDvWg.className.indexOf('widgUp')!=-1? tgDvWg.upDn=1 : tgDvWg.upDn=0;
        targs_str==""? targs_str=targDiv.id : targs_str+=","+targDiv.id;
        if(typeof timId!='undefined')clearInterval(timId);
        timId=setInterval("sliDiv()",30); //fine velocity (delay) control; smaller number = faster
      }
    }
    </script> 
    </head>
    <body>
    <div id="main">
    
      <div id="topDiv">
        <div id="sidCont" style="float:left;top:10%;left:10%;height:40%;width:12%;background:#feb;">
    
          <div id="sidDiv2" onclick="run_sliDiv(this,'wg3','4.2em','.8em');"
           style="position:absolute;height:10px;width:100%;background:#dfd;overflow:hidden;">
            <div id="wg3" class="widgUD widgDn topDn">
            </div>
            <div style="position:relative;height:100%;background:#dda;"> 
              <div style="position:relative;background:#ecc">content
              </div>
              <div style="position:relative;background:#cec">more content
              </div>
            </div>
          </div>
    
          <div id="sidDiv1" onclick="run_sliDiv(this,'wg2','65px','10px');"
           style="position:absolute;bottom:0;height:10px;width:100%;background:#dfd;overflow:hidden;">
            <div id="wg2" class="widgUD widgUp">
            </div>
            <div style="position:relative;height:100%;background:#dda;"> 
              <div style="position:relative;background:#ecc">still content
              </div>
              <div style="position:relative;background:#cec"><a href="#" onclick="this.innerHTML+=', wow';">linked content</a> 
              </div>
            </div>
          </div>
    
        </div>
      </div>
    
      <div id="botDiv">
        <div id="wg1" class="widgUD widgUp" 
          style="border-left:12px solid #ada;border-right:12px solid #ada;"
          onclick="run_sliDiv(this.parentNode,'wg1','140px','10px');">
        </div>
        <div style="position:absolute;width:100%;height:10px;top:0;cursor:pointer;" 
          onclick="run_sliDiv(this.parentNode,'wg1','140px','10px');">
        </div>
        <div style="position:relative;width:100%;height:100%;background:#ded;padding:2em;">
        There could be a whole buncha stuff down here. 
        </div>
      </div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •