www.webdeveloper.com
Results 1 to 3 of 3

Thread: slide to reveal JS

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    slide to reveal JS

    Can someone please tell me what kind of JS code is used to create this "slide to reveal" section of this Jaguar site? It's towards the bottom of this site, labeled "LIGHTWEIGHT ALUMINUM CONSTRUCTION"


    It seems to be called "js flexbox flexboxlegacy canvas."

  2. #2
    Join Date
    Mar 2014
    Posts
    2

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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[*/
    
    #parent {
      position:absolute;overflow:hidden;left:100px;top:100px;width:940px;height:450px;border:solid #6A6A6A 1px;background-Image:url(http://www.jaguarusa.com/Images/FT_014_012_B_GBL_SLIDER_SKELETON-device_desktop-940x450_tcm97-33679_desktop_940x450.jpg?v=4);
    }
    
    
    .slide {
      position:absolute;left:-470px;top:0px;width:940px;height:450px;border-Right:solid #6A6A6A 1px;background-Image:url(http://www.jaguarusa.com/Images/FT_014_012_A_JNA_SLIDER_CAR-device_desktop-940x450_tcm97-47158_desktop_940x450.jpg?v=1);
    }
    
    .handle {
      position:absolute;width:60px;height:60px;right:-30px;top:200px;background-Image:url(http://www.jaguarusa.com/resources/images/static/topdown-slider-handle.png);cursor:move;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="parent" >
      <div class="slide" >
       <div class="handle" src="http://www.jaguarusa.com/resources/images/static/topdown-slider-handle.png" ></div>
      </div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Reveal. (01-April-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    var zxcSlideReveal={
    
     init:function(o){
      var id=o.ParentID,f=o.FadeOut,p=document.getElementById(id),s=p?p.getElementsByTagName('*')[0]:null,h=s?s.getElementsByTagName('*')[0]:s;
      if (s){
       o={
        x:this.css(s,'left'),
        m:-this.css(s,'width'),
        s:s
       }
       this.addevt(h,'mousedown','down',o);
       this.addevt(document,'mousemove','move',o);
       this.addevt(document,'mouseup','up',o);
       if (typeof(f)=='number'&&f>0&&h!=s){
        o.f=f;
        this.opc(null,h,f);
        this.addevt(p,'mouseover','opc',h,100);
        this.addevt(p,'mouseout','opc',h,f);
       }
      }
     },
    
     down:function(e,o){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      o.mx=e.clientX;
      o.x=this.css(o.s,'left');
      return this.rtn(e);
     },
    
     move:function(e,o){
      if (o.mx){
       var mx=e.clientX;
       o.x=Math.max(Math.min(o.x-o.mx+mx,0),o.m);
       o.s.style.left=o.x+'px';
       o.mx=mx;
      }
      return this.rtn(e);
    
     },
    
     up:function(e,o){
      o.mx=false;
      return this.rtn(e);
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     opc:function(e,o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    }
    zxcSlideReveal.init({
     ParentID:'parent',
     FadeOut:50
    });
    /*]]>*/
    </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