Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do do this without Flash?

    Hey, all I have a client who wants a similar navigation set like this site: Foothills Church but without using Flash.

    Does anyone know the best way of doing this? I have been poking around with Canvas and the Rafael library, but I am pretty new at both of those possible options. If anyone can help out or give some helpful tips and/or suggestions, it would be GREATLY appreciated. Thanks!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    you could do it with a simple image map using mouseovers, etc for the hotspots. You can get the transitions working without jQuery but probably really if you're not sure what you're doing jQuery will do most of the heavy lifting for you.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    if your client wants it to work on a mobile device mouseover will not work

    this has a default of click and an option of mouseover
    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[*/
    #tst {
      position:absolute;z-Index:101;left:100px;top:-3000px;width:200px;height:300px;background-Color:#FFFFCC;
    }
    
    #tst DIV {
      position:relative;overflow:hidden;left:0px;top:0px;width:200px;height:50px;background-Color:#FFCC66;
    }
    
    #a1 {
      position:absolute;left:500px;top:300px;width:65px;height:25px;background-Color:red;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div id="tst" >
     <div>Header</div>
    </div>
    <div id="a1" >Anchor</div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // PopUp (15-March-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcPoUp={
    
     Open:function(id){
      var o=this['zxc'+id],p;
      if (o){
       clearTimeout(o.to);
       p=this.pos(o.lk);
       o.a[3][0].style.left=p[0]+(o.lk.offsetWidth-o.a[0])/2+'px';
       o.a[3][0].style.top=p[1]+(o.lk.offsetHeight-o.a[2])/2+'px';
       o.a[3][0].style.height=o.a[2]+'px';
       this.animate(o,o.a[3],[0,o.a[0]/2,o.a[2],o.a[0]/2],[0,o.a[0],o.a[2],0],new Date(),o.ms,'open');
      }
     },
    
     Close:function(id,e){
      var oop=this,o=oop['zxc'+id];
      if (o&&o.p.offsetTop>-500){
       if (e&&e.type=='click'){
        e=e.target?e.target:e.srcElement;
        while (e.parentNode){
         if (e==o.p||e==o.lk){
          return false;
         }
         e=e.parentNode;
        }
       }
       o.to=setTimeout(function(){ oop.close(o); },200);
      }
     },
    
     over:function(o){
      clearTimeout(o.to);
     },
    
     init:function(o){
      var id=o.PoUpID,a=document.getElementById(o.AnchorID),t=o.EventType,ms=o.Animate,p=document.getElementById(id),h=p?p.getElementsByTagName('DIV')[0]:null;
      if (h&&a){
       o.lk=a;
       o.p=p;
       o.ms=typeof(ms)=='number'&&ms>100?ms/2:500;
       o.a=[p.offsetWidth,p.offsetHeight,h.offsetHeight,[p,'clip'],[p,'height'],[p,'top']];
       var p=this.pos(o.lk);
       this.addevt(o.lk,t=='mouseover'?'mouseover':'click','Open',id);
       if (t=='mouseover'){
        this.addevt(o.p,'mouseout','Close',id);
        this.addevt(o.p,'mouseover','over',o);
       }
       this.addevt(document,'click','Close',id);
       this['zxc'+id]=o;
      }
     },
    
     close:function(o){
      this.animate(o,o.a[4],o.a[4][2].concat(),[o.a[2]],new Date(),o.ms);
      this.animate(o,o.a[5],o.a[5][2].concat(),[this.pos(o.lk)[1]+(o.lk.offsetHeight-o.a[2])/2],new Date(),o.ms,'close');
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=[];
      for (var z0=0;z0<f.length;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?n[z0]:t[z0];
      }
      a[2]=n;
      a[0].style[a[1]]=a[1]=='clip'?'rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)':n[0]+'px';
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[2]=t;
       if (nxt=='open'){
        a[0].style[a[1]]='rect(0px,'+t[1]+'px,'+o.a[1]+'px,0px)';
        this.animate(o,o.a[4],[t[2]],[o.a[1]],new Date(),o.ms);
        this.animate(o,o.a[5],[o.a[5][0].offsetTop],[this.pos(o.lk)[1]+(o.lk.offsetHeight-o.a[1])/2],new Date(),o.ms);
       }
       if (nxt=='close'){
        this.animate(o,o.a[3],o.a[3][2].concat(),[0,o.a[0]/2,o.a[2],o.a[0]/2],new Date(),o.ms,'hide');
       }
       if (nxt=='hide'){
        o.p.style.top='-3000px';
       }
      }
     },
    
     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){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,e); }):null;
     }
    
    
    }
    
    zxcPoUp.init({
     PoUpID:'tst',      // the unique ID name of the Popup DIV.                                    (string)
     AnchorID:'a1',     // the unique ID name of the anchor element.                               (string)
     EventType:'click', //(optional) the event type to activate the popup, 'click' or 'mouseover'. (string, default = 'click')
     Animate:1000       //(optional) the animation duration in millisec.                           (number, default = 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/


  •  

    Posting Permissions

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