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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Javascript questions

    Hey everyone. I am very new at JavaScript and I need some help. I want to have a section on my home page where a person can choose a bike by clicking on a couple of arrows on the right and left ends of the bike. I want something similar to this type of program.

    http://qlpros.com/

    I don't want a border around the bike. I have been looking for a couple hours now and I haven't found anything. Any help would be much appreciated!!

    My other question is how to transfer javascript to an external style sheet in dreamweaver.

    Thanks!!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 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[*/
    
    .example {
     position:relative;left:20px;top:0px;width:400px;height:130px;border:solid red 1px;
    }
    
    
    .step {
      position:absolute;left:0px;top:0px;width:400px;height:130px;background-Color:#FFCC66;border:solid red 1px;
    }
    
    .stepinner {
      position:absolute;left:0px;top:0px;background-Color:#FFCC66;
    }
    
    .stepinner IMG{
      width:185px;height:130px;float:left;margin-Left:5px;  /* do not use margin-Right */
    }
    
    .button {
      position:absolute;left:-10px;top:60px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Multi Mode Scroller (17-July-2011)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    /*
      A scroller  with options for 'Continuous', 'End Control' and 'Step' scroll applications
      and with both 'Horizontal' and 'Vertical' modes of execution.
      The scroll may be controlled by inline event calls.
    
      The functional code size is:
       2.00K with only 'Continuous'.
       3.29K with only 'End Control'.
       3.41K with only 'Step'.
       5.22K with 'Continious', 'End Control' and 'Step'.
    
      ****** Application Notes.
    
    
       see http://www.vicsjavascripts.org.uk/MultiModeScroller/MultiModeScroller.htm
    
    */
    
    
    // ****** Functional Code - NO NEED to Change.
    
    
    function zxcMMScroller(o){
     var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height',1]:['left','offsetLeft','offsetWidth','width',0],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('*')[0],fst=slide.getElementsByTagName('*')[0],psz=obj[mde[2]],esz=o.EndSize,esz=typeof(esz)=='number'&&esz>0?esz:false,clds=slide.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,ms=o.StepDuration,ctr=o.StepCenter,slider=document.createElement('DIV'),z0=0,spd=o.Direction,ssz=o.ParentSize,ss=o.StartScroll;
     obj.style.overflow='hidden';
     slide.style.position='absolute';
     slide.style[mde[3]]='10000px';
     var sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+(ctr!=true?1:2);
     slider.style.position='absolute';
     slider.style[mde[0]]=-sz+'px';
     obj.appendChild(slider);
     for (;z0<nu;z0++){
      slide=z0>0?slide.cloneNode(true):slide;
      slide.style[mde[0]]=sz*z0-(ctr!=true?0:sz)+'px';
      slider.appendChild(slide);
     }
     this.obj=obj;
     this.mde=mde;
     this.sz=sz;
     this.slider=slider;
     this.spd=typeof(spd)=='number'?spd:-1;
     this.dly=null;
     this.ary=false;
     this.nowrap=typeof(o.Wrap)!='boolean'||o.Wrap?false:[-sz,-fst[mde[1]]-fst[mde[2]]];
     this.mm=false;
     this.end=false;
     if (typeof(ms)!='number'||!this.stepinit||esz){
      if (esz&&this.endinit){
       this.endinit(o,obj,esz,ss);
      }
      this.Scroll(typeof(ss)!='boolean'||ss==true?null:0);
     }
     else {
      this.stepinit(o,mde,clds,sz,ctr,ms,ss);
     }
    }
    
    zxcMMScroller.prototype={
    
    // Required for 'Contiuous' and 'End Control' Applications.
     Scroll:function(spd,mse){
      if (!this.ary){
       clearTimeout(this.dly);
       var oop=this,spd=this.end?this.espd:typeof(spd)=='number'?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],nw=this.nowrap,pos=parseInt(slider.style[mde])+spd;
       slider.style[mde]=(!nw?(spd<0&&pos<-sz)||(spd>0&&pos>0)?pos+sz*(spd<0?1:-1):pos:(spd<0&&pos<nw[0])||(spd>0&&pos>nw[1])?nw[spd<0?0:1]:pos)+'px';
       this.spd=spd!=0?Math.abs(this.spd)*(spd>0?1:-1):this.spd;
       this.dly=setTimeout(function(){ oop.Scroll(spd); },20);
      }
     },
    
    // Optional 'End Control' Code (requires function 'Scroll)
     endinit:function(o,obj,esz,ss){
      var oop=this,emax=o.EndSpeed;
      this.end=true;
      this.mm=[esz,obj[this.mde[2]]-esz];
      this.espd=ss?this.spd:0;
      this.emax=typeof(emax)=='number'?emax:this.spd;
      obj.onmousemove=function(event){ oop.endscroll(event); }
      obj.onmouseover=function(event){ oop.endscroll(event); }
     },
    
     endscroll:function(e){
      if (this.mm){
       var e=e||window.event,obj=this.obj,mde=this.mde[4],mse=this.mse(e),pos=this.pos(obj),xy=mse[mde]-pos[mde],mm=this.mm;
       if (mse[0]>pos[0]&&mse[0]<pos[0]+obj.offsetWidth&&mse[1]>pos[1]&&mse[1]<pos[1]+obj.offsetHeight){
        this.end=true;
        this.espd=this.emax*(xy<mm[0]?-(1-xy/mm[0]):xy>mm[1]?(xy-mm[1])/mm[0]:0);
       }
      }
     },
    
     End:function(spd){
      if (this.mm){
       this.end=false;
       this.Scroll(typeof(spd)=='number'?spd:this.spd)
      }
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
    
    // Optional 'Step' Code
     stepinit:function(o,mde,clds,sz,ctr,ms,ss){
      var hold=o.StepDuration,lst,ary=[],z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        lst=-clds[z0][mde[1]]+(ctr!=true?0:(this.obj[mde[2]]-clds[z0][mde[2]])/2);
        ary.push(lst);
       }
      }
      ary.push(lst-(sz+lst)+ary[0]);
      this.ary=ary;
      this.cnt=0;
      this.fr=0;
      this.to=0;
      this.mS=ms;
      this.hold=typeof(hold)=='number'?hold:ms*2;
      this.slider.style[mde[0]]=ary[0]+'px';
      if (typeof(ss)!='boolean'||ss==true){
       this.Step(true,this.hold);
      }
     },
    
     Step:function(step,ms){
      if (!step){
       clearTimeout(this.dly);
       this.run=false;
      }
      else if (this.fr==this.to){
       var oop=this;
       this.dly=setTimeout(function(){ oop.StepTo(null,true); },ms||500);
      }
     },
    
     StepTo:function(nxt,run){
      if (this.ary){
       this.spd=typeof(run)=='number'?run:this.spd;
       run=typeof(nxt)=='boolean'&&nxt?true:run;
       var ud=this.spd>0?1:-1,cnt=this.cnt,ary=this.ary,lgth=ary.length-1,nw=this.nowrap;
       if (typeof(nxt)!='number'){
        if (!nw&&((ud<0&&cnt==lgth)||(ud>0&&cnt==0))){
         cnt=ud<0?0:lgth;
        }
        nxt=cnt-ud;
        nxt=!nw?nxt:Math.max(Math.min(nxt,lgth-1),0)
       }
       if (this.fr==this.to&&typeof(ary[nxt])=='number'&&nxt!=cnt){
        clearTimeout(this.dly);
        this.fr=ary[cnt];
        this.to=ary[nxt];
        this.cnt=nxt;
        this.run=run==true;
        this.srttime=new Date().getTime();
        this.animate();
       }
      }
     },
    
     StepNext:function(ud){
      this.spd=typeof(ud)=='number'?ud>0?1:-1:this.spd;
      this.StepTo();
     },
    
     animate:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.slider.style[this.mde[0]]=(this.to-this.fr)/this.mS*ms+this.fr+'px';
      if (ms<this.mS){
       setTimeout(function(){oop.animate(); },10);
      }
      else {
       this.fr=this.to;
       this.slider.style[this.mde[0]]=this.to+'px';
       if (this.run){
        this.dly=setTimeout(function(){ oop.StepTo(null,true); },this.hold);
       }
      }
     }
    
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    // Step Scroller Examples
    E9=new zxcMMScroller({
     ID:'example9',      // the unique ID name of the parent DIV.                                         (string)
     StartScroll:false,  //(optional) true = start the scroll on initialisation.                          (number, default = true)
     StepDuration:1000,  // the scroll step duration in milli seconds.                                    (number)
     StepCenter:true     //(optional) true = center the current content element in the parent DIV.         (boolean, default = false)
    });
    
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <div class="example" >
      <div id="example9" class="step" >
       <div class="stepinner" >
        <img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
        <img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
        <img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
        <img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
       </div>
      </div>
      <img class="button" src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="left" onmouseup="E9.StepNext(-1);" />
      <img class="button" src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="left" onmouseup="E9.StepNext(1);" style="left:395px;"/>
     </div>
    </body>
    
    </html>
    to produse the external file

    copy the code to notepad (without the <script> and </script> tags) and save with your file name and extension if .js

    insert in your page

    <script language="JavaScript" src="myfilename.js" type="text/javascript">

    where myfile name is your file name and path if in a different directory to your page
    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
    •