www.webdeveloper.com
Results 1 to 2 of 2

Thread: "Splitopen page"

  1. #1
    Join Date
    Jun 2012
    Posts
    1

    "Splitopen page"

    Hello,
    currently im trying to get the same effect happen in my side as OK-Studios got in their "Projekte" section (http://www.ok-studios.de).
    The user klicks on an image and webside seems to open itself for more content (in this case the customers content with a bit text).
    How can i do this?

    Tanks in advance for your proposals.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .BODY {
      height:30000px;
    }
    
    .parent {
      position:relative;left:100px;top:100px;width:510px;height:400px;border:solid blue 1px;
    }
    
    .content {
      position:relative;left:0px;top:0px;width:510px;border:solid red 1px;
    }
    
    .div {
      width:100px;height:100px;border:solid red 1px;float:left;background-Color:#FFFFCC
    }
    
    #divM {
      overflow:hidden;width:510px;height:0px;float:left;background-Color:#FFFFCC
    }
    
    .mask {
       z-Index:100;width:100%;height:100%;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif);
    }
    
    .pop {
      position:absolute;overflow:hidden;display:none;z-Index:201;width:610px;height:400px;background-Color:#FFCC66;
    }
    /*]]>*/
    </style></head>
    
    <body>
     <div class="parent" >
      <div class="content" >
       <div id="div0" class="div" >click me</div>
       <div class="div" >1</div>
       <div class="div" >2</div>
       <div class="div" >3</div>
       <div class="div" >4</div>
       <div class="div" >5</div>
       <div class="div" >6</div>
       <div class="div" >7</div>
       <div class="div" >8</div>
       <div class="div" >9</div>
       <div id="divM" >GG</div>
       <div class="div" >10</div>
       <div class="div" >11</div>
       <div class="div" >12</div>
       <div class="div" >13</div>
       <div class="div" >14</div>
       <div class="div" >15</div>
       <div class="div" >16</div>
       <div class="div" >17</div>
       <div id="div18" class="div" >click me</div>
       <div class="div" >19</div>
      </div>
     </div>
    
     <div id="div0pop" class="pop"  >Pop Up 0</div>
     <div id="div18pop" class="pop" >Pop Up 18</div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Open Content (9-June-2012) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcOpenContent={
    
     init:function(o){
      var c=document.getElementById(o.ID),p=c.parentNode,max=o.OpenSize,ms=o.AnimateDuration,msk=document.createElement('DIV'),obj,reg=new RegExp('\\W'+o.CommonClass+'\\W'),clds=p.childNodes,i=0,z0=0;
      msk.style.position='fixed';
      msk.className=o.MaskClass;
      msk.style.width='100%';
      msk.style.heigth='100%';
      msk.style.left='0px';
      msk.style.top='0px';
      document.body.appendChild(msk);
      msk.style.display='none';
      obj={
       c:c,
       p:p,
       max:max,
       msk:msk,
       ms:ms
      };
      for (;z0<clds.length;z0++){
       if(reg.test(' '+clds[z0].className+' ')&&clds[z0].id&&document.getElementById(clds[z0].id+'pop')){
        this.addevt(clds[z0],'mouseup','open',obj,document.getElementById(clds[z0].id+'pop'),true);
       }
      }
      this.addevt(msk,'mouseup','open',obj,false);
     },
    
     open:function(o,pop){
      o.msk.style.display='block';
      if (o.pop){
       o.pop.style.display='none';
      }
      this.animate(o,'top',o.p,pop?0:-o.max/2,pop?-o.max/2:0,new Date(),o.ms,'dly1');
      this.animate(o,'height',o.c,pop?0:o.max,pop?o.max:0,new Date(),o.ms,'dly2');
      this.animate(o,'o',o.msk,pop?0:100,pop?100:0,new Date(),o.ms,'dly0',pop);
     },
    
    
     animate:function(o,mde,obj,f,t,srt,mS,to,pop){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
      if (isFinite(now)){
       if (mde!='o'){
        obj.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
       }
       else {
        obj.style.filter='alpha(opacity='+now+')';
        obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
       }
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,mde,obj,f,t,srt,mS,to,pop); },10);
      }
      else {
       if (mde!='o'){
        obj.style[mde]=t+'px';
       }
       else {
        if (t==0){
         o.msk.style.display='none';
        }
        else if (pop){
         p=this.pos(o.c);
         pop.style.display='block';
         pop.style.left=p[0]-(pop.offsetWidth-o.c.offsetWidth)/2+'px';
         pop.style.top=p[1]-(pop.offsetHeight-o.c.offsetHeight)/2+'px';
         o.pop=pop;
        }
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
     }
    
    
    }
    
    zxcOpenContent.init({
     ID:'divM',
     OpenSize:200,
     CommonClass:'div',
     MaskClass:'mask',
     AnimateDuration:1000
    });
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles