Results 1 to 2 of 2

Thread: jQuery Pop up Box

  1. #1
    Join Date
    Jan 2011
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default jQuery Pop up Box

    I need pop up box to be displayed on hover or click like the image attached.

    Any suggestion of DD scripts?

    Click image for larger version. 

Name:	dynamic.jpg 
Views:	442 
Size:	25.9 KB 
ID:	4946

    One possibility is customizing Anylink CSS menu at http://www.dynamicdrive.com/dynamici...anylinkcss.htm
    Last edited by Paramasivan; 02-23-2013 at 06:55 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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[*/
    
    .pop {
      position:absolute;z-Index:101;top:300px;left:0px;width:100px;height:100px;background-Color:#FFCC66;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Clip PopUp. (24-Febuary-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    function zxcClipPopUp(cls){
     var reg=new RegExp('\\W'+cls+'\\W'),els=document.body.getElementsByTagName('*'),ul,o,s,i,z0=0,z0a;
     for (;z0<els.length;z0++){
      if(reg.test(' '+els[z0].className+' ')){
       o={};
       s=els[z0].className.split(' ');
       for (z0a=0;z0a<s.length;z0a++){
        i=s[z0a].indexOf(':');
        if (i>2){
         o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
        }
       }
       new zxcClipPU(o,els[z0]);
      }
     }
    }
    
    function zxcClipPU(o,obj){
     var pop=document.getElementById(o.popupid);
     if (pop){
      var m=o.mode,m=isFinite(m*1)&&m>0&&m<7?m*1:0,t=o.eventtype,t=t=='click'?'click':t=='toggle'?'toggle':'mouseover',ms=isFinite(o.speed*1)?o.speed*1:1000,w=pop.offsetWidth,h=pop.offsetHeight,ow=obj.offsetWidth,oh=obj.offsetHeight,osx=isFinite(o.offsetx*1)?o.offsetx*1:0,osy=isFinite(o.offsety*1)?o.offsety*1:oh;
      document.body.appendChild(pop);
      pop.style.display='block';
      pop.style.position='absolute';
      pop.style.visibility='hidden';
      o=this;
      o.obj=obj;
      o.pop=pop;
      o.m=m;
      o.ary=[
       ['clip',[0,w,h,0],[0,w,0,0]],                                                       // 0 = down,
       ['clip',[0,w,h,0],[h,w,h,0]],                                                       // 1 = up,
       ['clip',[0,w,h,0],[0,0,h,0]],                                                       // 2 = right,
       ['clip',[0,w,h,0],[0,w,h,w]],                                                       // 3 = left,
       ['clip',[0,w,h,0],[Math.ceil(h/2),Math.floor(w/2),Math.floor(h/2),Math.ceil(w/2)]], // 4 = center,
       ['clip',[0,w,h,0],[0,Math.floor(w/2),h,Math.ceil(w/2)]],                            // 5 = horizontal,
        ['clip',[0,w,h,0],[Math.ceil(h/2),w,Math.floor(h/2),0]]                            // 6 = vertical,
     ];
      o.g=[null,[200],[0],[0]];
      o.osx=osx;
      o.osy=osy;
      o.ms=ms;
      o.close=t=='mouseover'?1000:200;
      o.ud=false;
      if (t=='toggle'){
       o.addevt(o.obj,'click','toggle',false);
      }
      else {
       o.addevt(o.obj,t,'Pop',true);
       o.addevt(pop,t,'Pop',true);
      }
      if (t=='mouseover'){
       o.addevt(o.obj,'mouseout','Pop',false);
       o.addevt(pop,'mouseout','Pop',false);
      }
      o.addevt(document,'click','click');
     }
    }
    
    zxcClipPU.prototype={
    
     Pop:function(ud,e){
      var o=this
      var o=this,p=o.pos(o.obj),f=o.g[3],t=o.g[ud?1:2],ms=o.ms*Math.abs((t[0]-f[0])/o.g[1])||20;
      clearTimeout(o.to);
      o.to=setTimeout(function(){ o.animate(o.pop,o.ary[o.m],o.ary[o.m][3]||o.ary[o.m][2],o.ary[o.m][ud?1:2],new Date(),ms);
        o.animate(false,o.g,f,t,new Date(),ms);
        o.pop.style.visibility='visible';
        o.ud=ud;
       },ud?200:o.close);
      o.pop.style.left=p[0]+o.osx+'px';
      o.pop.style.top=p[1]+o.osy+'px';
     },
    
     toggle:function(){
      this.Pop(!this.ud);
     },
    
     animate:function(obj,ary,f,t,srt,mS){
      clearTimeout(ary[4]);
      var o=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
      for (;z0<4;z0++){
       nu=(t[z0]-f[z0])/mS*ms+f[z0];
       if (isFinite(nu)){
        n[z0]=Math.round(nu);
       }
      }
      ary[3]=n;
      obj?obj.style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)':null;
      if (ms<mS){
       ary[4]=setTimeout(function(){ o.animate(obj,ary,f,t,srt,mS); },10);
      }
      else {
       ary[3]=t;
       obj?obj.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)':null;
       !ary[0]&&t==0?o.pop.style.visibility='hidden':null;
      }
     },
    
     click:function(p,e){
      if (e){
       var o=this,obj=e.target?e.target:e.srcElement;
       if (obj){
        while (obj.parentNode){
         if (obj==o.pop||obj==o.obj){
          return;
         }
         obj=obj.parentNode;
        }
       }
       o.Pop(false);
      }
     },
    
     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){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      }
     }
    
    }
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    // parameter 0 = the common class name of the elements to attach a PopUP.
    zxcClipPopUp('master');
    
    // <img id="img1" class="popup PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="Egypt5.jpg" alt="img" width="100" height="75"  />
    
    // Class Name Options
    // PopUpID   =  the unique ID name of the Pop Up element.
    // Mode      =  the mode of execution, 0 = down,  1 = up, 2 = right, 3 = left, 4 = center, 5 = horizontal, 6 = vertical.
    // EventType =  the evvent type to open/close the PopUp.
    // Speed     =  the animattion duration in milli seconds.
    // OffsetX   =  the horizontal offset from the PopUp master element.
    // OffsetY   =  the vertical offset from the PopUp master element.
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <img id="img1" class="master PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75"  />
    <img id="img2" class="master PopUpID:pop2 Mode:0 EventType:mouseover Speed:500 offsetX:100  offsety:0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75"  />
    <br />
    <img id="img3" class="master PopUpID:pop3 Mode:2 EventType:click Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75"  />
    <img id="img4" class="master PopUpID:pop4 Mode:2 EventType:toggle Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75"  />
    <div id="pop1" class="pop" >PopUp 1</div>
    <div id="pop2" class="pop" style="height:75px;background-Color:#FFFFCC;">PopUp 2</div>
    <div id="pop3" class="pop" >PopUp 3</div>
    <div id="pop4" class="pop" >PopUp 4</div>
    </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/

Similar Threads

  1. Replies: 4
    Last Post: 08-26-2012, 02:21 PM
  2. JQuery Carousel and JQuery Slider Issue
    By jcdesigns in forum JavaScript
    Replies: 2
    Last Post: 10-06-2011, 01:02 PM
  3. jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x
    By Rikko in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-28-2010, 09:57 PM
  4. Replies: 0
    Last Post: 10-18-2010, 12:05 PM
  5. jQuery Multi Level CSS Menu #2 and jQuery 1.4
    By Lee.K in forum Bug reports
    Replies: 1
    Last Post: 04-13-2010, 03:40 AM

Tags for this Thread

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
  •