"Splitopen page"

**Suprime** · 06-09-2012 06:39 AM

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.

**vwphillips** · 06-09-2012 11:46 AM

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>

Thread: "Splitopen page"

Thread Tools

Display

"Splitopen page"

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions