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 to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How can i get this? any idea or helps?

    Could you help me with which slide they are using? Could you help with html,css+js ?

    See live: http://goo.gl/kqg6Rt

    See snapshot: http://my.jetscreenshot.com/21497/20131110-pwhc-9kb

    I need this slider, please help me

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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[*/
    
    #slide {
      position:absolute;left:200px;top:200px;width:500px;height:30px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    .slider {
      position:absolute;left:362px;top:-10px;width:500px;height:40px;font-Size:20px;
    }
    
    .slider IMG{
      position:relative;left:0px;top:8px;margin-right:5px;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcTextSlider.GoTo('slide',0);"/>
     <input type="button" name="" value="GoTo 1" onmouseup="zxcTextSlider.GoTo('slide',1);"/>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcTextSlider.GoTo('slide',2);"/>
     <input type="button" name="" value="Next" onmouseup="zxcTextSlider.Next('slide',1);"/>
     <input type="button" name="" value="Back" onmouseup="zxcTextSlider.Next('slide',-1);"/>
    
     <div id="slide" onmouseover="zxcTextSlider.Pause('slide');" onmouseout="zxcTextSlider.Auto('slide');" >
      <div class="slider" >
       <img src="http://royaltemplates.com/themes/projects/ElegantHostingHTMLHostingTemplate/images/latestnewsarrow.jpg" alt="img" />
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Text Slider. (10-November-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcTextSlider={
    
     GoTo:function(id,n){
      var oop=this,o=oop['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.SliderID,ary=o.MessageArray,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null;
      if (s){
       p.style.overflow='hidden';
       s.style.width='1000px';
       o.id=id;
       o.ary=ary;
       o.txt=document.createElement('A');
       s.appendChild(o.txt);
       o.txt.innerHTML=ary[0];
       o.mk=document.createElement('IMG');
       o.mk.style.visibility='hidden';
       s.appendChild(o.mk);
       o.sz=p.offsetWidth;
       o.s=[s,'left',s.offsetLeft,o.sz-o.mk.offsetLeft-5];
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.h=typeof(h)=='number'&&h>0?h:o,ms*4;
       o.lgth=ary.length-1;
       o.ud=1;
       o.n=0;
       this['zxc'+id]=o;
       s.style.left=o.s[3]+'px';
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      o.n=o.auto?o.n+o.ud:a;
      o.n=o.n>o.lgth?0:o.n<0?o.lgth:o.n;
      this.animate(o,o.s,o.s[3],o.s[2],new Date(),o.ms*Math.abs((o.s[2]-o.s[3])/o.s[2]),true);
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=n;
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       if (t==o.s[2]){
        o.txt.innerHTML=o.ary[o.n];
        t=o.sz-o.mk.offsetLeft-5;
        this.animate(o,o.s,a[3],t,new Date(),o.ms*Math.abs((o.s[2]-t)/o.s[2]),false);
       }
       else if (o.auto){
        oop.Auto(o.id,o.h);
       }
      }
    
     }
    
    
    }
    
    zxcTextSlider.init({
     SliderID:'slide', // the unique ID name of the parent DIV.                   (string)
     MessageArray:[    // an array of messages.                                   (array)
      'Message 1 Message 1 Message 1',
      'Message 2',
      'Message 3 Message 3'
     ],
     Animate:1000,     //(optional) the slide duration in milli seconds.          (number, default = 1000)
     AutoHold:2000,    //(optional) the auto rotate hold delay in milli seconds.  (number, default = Animate*4)
     AutoStart:2000    //(optional) the auto rotate start delay in milli seconds. (number, default = no auto start)
    });
    /*]]>*/
    </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/

  • #3
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    I had a go at a bouncy drop down menu in js
    Code:
    <!DOCTYPE HTML>
    <html>
     <body>
      <canvas id="myCanvas" width="600" height="600"></canvas>
       <script>
       var i=1,drop=1;
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');
    
       ctx.fillStyle = 'darkblue';
       ctx.fillRect(0,0,600,600);
       ctx.fillStyle = 'lightblue';
       ctx.fillRect(100,70,100,30);
    	
       function expand(){
         if (drop==1){return;}
    	  
         if (i>=180 && i<195){
          ctx.fillStyle = 'darkblue';
          ctx.fillRect(100,279+180-i,100,i-180);
          i++; 
          }
         if (i<180){     
          ctx.fillStyle = 'pink';
          ctx.fillRect(100,100,100,i);
          i+=3; 
          }	  
         }
    	
       function doMove(ev){
         if (ev.pageX>100 && ev.pageX<200 && ev.pageY>70 && ev.pageY<100){
          drop=0;
         }
         else {
          drop=1;
          ctx.fillStyle = 'darkblue';
          ctx.fillRect(100,100,100,200);
          i=1;
         }
       }
    	
       setInterval(expand,3);
       canvas.addEventListener("mousemove", doMove, false); 
     </script>
     </body>
    </html>
    Last edited by donna1; 11-10-2013 at 04:35 PM.


  •  

    Posting Permissions

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