Scriptaculous JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Scriptaculous
  4. Prototype js Position clone functional test


          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  
    prototype.js Position.clone functional test
    
    
    
    
      .margins   { margin:20px; }
      .nomargins { margin:0; }
    
  
  
  
    
    
       abs
    

    
       rel
    

    
       static
    

  
  
  
    abs-body child
  
  
    unpositioned p 
  


    
    
    function d(el, marker) {
      $('debug').innerHTML = 
        'orig:  ' + Object.inspect(Position.page($(el))) + ', ' +
        'clone: ' + Object.inspect(Position.page($(marker)));
    }
    function testA(el) {
      Position.clone(el, 'marker');
      d(el, 'marker');
    }
    function testB(el) {
      Element.hide('marker2');
      Position.clone(el, 'marker2');
      Element.show('marker2');
      d(el, 'marker2');
    }
    function testC(el) {
      Position.clone(el, 'marker3');
      d(el, 'marker3');
    }
    function testD(el) {
      Position.clone(el, 'marker4');
      d(el, 'marker4');
    }
    
    
    
      Toggle page scrolling |
      Page margings: on |
      off
      
      Absolute marker in position:relative container DIV:
      Mark abs |
      Mark rel |
      Mark static |
      Mark abs-body child |
      Mark p
      
      Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:
      Mark abs |
      Mark rel |
      Mark static |
      Mark abs-body child |
      Mark p
      
      Absolute marker, child of BODY:
      Mark abs |
      Mark rel |
      Mark static |
      Mark abs-body child |
      Mark p
      
      Fixed marker, child of BODY:
      Mark abs |
      Mark rel |
      Mark static |
      Mark abs-body child |
      Mark p |
      
   
   
     
     !
     
     !
  
  
  
  !
  
  !