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,709
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16250 seconds
  • Memory Usage 2,870KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates