...

View Full Version : 2 Javascript questions



daswebdesign
07-25-2011, 05:36 AM
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!!:)

vwphillips
07-25-2011, 11:28 AM
<!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.crea teElement('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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum