Javascript Sample

<

<!doctype html> <html> <title>Javascript examples </title> <head> <style> body{ background:url('style/bgpic1.jpg'); } </style> </head> <body> <style> body{ background:url('style/bgpic1.jpg'); } #hlc { margin-left:0px; background: url('style /horizontalc.png') no-repeat; height: 150px; left:140; } .sliderH { position:relative; left:0px; top:0px; width:800px; height:150px; } .sliderH IMG{ position:relative; width:100px; left:0px; float:left; margin-left:0px; } .slideH { left:0px; top:0px; height:150px; } </style> <script type="text/javascript"> <!--> function collapse(s) { var td = s; var d = td.getElementsByTagName("div") .item(0); td.className = "menuNormal"; d.className = "menuNormal"; } </script> <script type="text/javascript"> function zxcExpandCarousel(o){ var oop=this,mde=o.Mode,mde=typeof (mde)=='string'&&mde.charAt(0). toUpperCase()=='V'?['left','offsetWidth' ,'width','height','top','offsetHeight']: ['top','offsetHeight','height','width',' left','offsetWidth'],obj=document. getElementById(o.ID) ,max=o.MaxWidth,nu=o.Display,ms=o. SlideDuration,ud=o.Direction,auto=o. AutoStart,slide=obj.getElementsByTagName ('DIV')[0],imgs=slide.getElementsBy TagName('IMG'),lgth=imgs.length,nu=typeof (nu)=='number'&&nu>0?Math.ceil(nu):lgth, min=o.MinWidth,min=typeof(min)=='number' ?min:100,max=typeof(max)=='number' &&max<min?max:min*2,z0=0,z1=0; obj.style.overflow='hidden'; slide.style.position='absolute'; slide.style[mde[3]]='3000px'; for (;z0<nu*2;z0++){ slide.appendChild(imgs[z0%nu].cloneNode (false)); } lgth=imgs.length; if (o.GoTo!=false){ for (;z1<imgs.length;z1++){ imgs[z1].style.position='absolute'; oop.addevt(imgs[z1],'mouseup','goto',z1); } } oop.obj=obj; oop.slide=slide; oop.imgs=imgs; oop.mde=mde; lgth=lgth-nu; oop.c=(100*nu)/2 oop.smax=-100*lgth; oop.ex=max-min; oop.min=min; oop.wh=slide[mde[1]]; oop.ms=typeof(ms)=='number'?ms:3000; oop.sms=oop.ms*lgth; oop.now=-oop.c-50; oop.os=oop.c-50; oop.ud=!(typeof(ud)=='string'&&ud.charAt (0).toUpperCase()=='C'); slide.style[mde[4]]=(obj[mde[5]] -oop.size(oop.now))/2+'px'; if (o.MouseOverMouseOut!=false){ oop.addevt(slide,'mouseover','Pause'); oop.addevt(slide,'mouseout','Auto'); } if (typeof(auto)=='number'&&auto>=0){ oop.Auto(auto); } } zxcExpandCarousel.prototype={ Auto:function(ms){ var oop=this; oop.Pause(); oop.dly=setTimeout(function() { oop.auto(); },ms||500); }, Pause:function(){ clearTimeout(this.dly); }, goto:function(nu){ var oop=this,c=oop.c,imgs=oop.imgs, to=-nu*100+oop.os,ms=Math.abs(oop. ms*(to-oop.now)/100); clearTimeout(this.dly); oop.ud=oop.now==to?oop.ud:oop.now>to; oop.animate(oop.now,Math.max(Math.min (to,0),oop.smax),new Date(),ms,false); }, auto:function(){ var oop=this,ms=Math.abs(oop.sms* (oop.smax-oop.now)/oop.smax); oop.Pause(); oop.animate(oop.now,oop.ud?oop .smax:0,new Date(),ms,true); }, animate:function(f,t,srt,mS,run){ var oop=this,ms=new Date().getTime() -srt,now=(t-f)/mS*ms+f,ud=oop.ud; if (isFinite(now)){ oop.size(now); oop.now=now; } if (ms<mS){ oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,run); },10); } else if (run){ oop.animate(ud?0:oop.smax,ud? oop.smax:0,new Date(),oop.sms,true); } }, size:function(now){ var oop=this,c=oop.c,imgs=oop.imgs, z0=0,z0a,img,lft,w,ssz=0,mde=oop.mde; for (;z0<imgs.length;z0++){ lft=now+100*z0; w=(lft+100)/(c+100/2); w=Math.max((lft+100/2<c?w:-(w-1)+1),0); w=w*oop.min+w*oop.ex; imgs[z0].style.width=w+'px'; imgs[z0].style[mde[0]]=(oop.wh-imgs [z0][mde[2]])/2+'px'; imgs[z0].style[mde[4]]=ssz+'px'; ssz+=imgs[z0][mde[3]]; } return ssz; }, addevt:function(o,t,f,p){ var oop=this; if (o.addEventListener) o.addEventListener (t,function(e){ return oop[f](p,e);}, false); else if (o.attachEvent) o.attachEvent ('on'+t,function(e){ return oop[f](p,e); }); } } /*]]>*/ </script> <script type="text/javascript"> /*<![CDATA[*/ function Init(){ new zxcExpandCarousel({ ID:'example1', // the unique ID name of the parent DIV.(string) Mode:'horizontal', //(optional) the mode of execution, 'horizontal' or 'vertical'. (string, default = 'horizontal') Display:5, //(optional) the number of images to display. (number, default = the number of images in the slide DIV) MinWidth:100, //(optional) for guidence only - the minimum width of the images. (number, default = 100) MaxWidth:150, //(optional) the maximum width of the images. (number, default = MinWidth*2) SlideDuration:2000, //(optional) the slide duration for one image in milli seconds. (number, default = 1000) Direction:'anticlockwise', //(optional) the slide direction, 'clockwise' or 'anticlockwise'. (number, default = 'anticlockwise') AutoStart:2000, //(optional) auto start delay in milli seconds. (number, default = no auto start) MouseOverMouseOut:true, //(optional) false = mouseover and mouseout events are not added. (boolean, default = true or inline event calls) GoTo:true //(optional) false = 'goto' events are not added to the images. (boolean, default = true) }); new zxcExpandCarousel({ ID:'example2', Mode:'vertical', AutoStart:0 }); } if (window.addEventListener){ window.addEventListener('load',Init, false); } else if (window.attachEvent){ window.attachEvent('onload',Init); } /*]]>*/ </script> <SCRIPT LANGUAGE="JavaScript"> var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs) Onecurrent = 0; var OneLinks = new Array(3); OneLinks[0] = "http://www.freewarejava.com"; OneLinks[1] = "http://www.javascriptkit.com"; OneLinks[2] = "http://www.dynamicdrive.com"; function Onenext() { if (document.Oneslideform.Oneslide [Onecurrent+1]) { document.images.Oneshow.src = document. Oneslideform.Oneslide[Onecurrent+1].value; document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent; } else Onefirst(); } function Oneprevious() { if (Onecurrent-1 >= 0) { document.images.Oneshow.src = document. Oneslideform.Oneslide[Onecurrent-1].value; document.Oneslideform.Oneslide.selectedIndex = --Onecurrent; } else Onelast(); } function Onefirst() { Onecurrent = 0; document.images.Oneshow.src = document.Ones lideform.Oneslide[0].value; document.Oneslideform.Oneslide.selectedIndex = 0; } function Onelast() { Onecurrent = document.Oneslideform.Oneslide. length-1; document.images.Oneshow.src = document. Oneslideform.Oneslide[Onecurrent].value; document.Oneslideform.Oneslide.selectedIndex = Onecurrent; } function Oneap(text) { document.Oneslideform.Oneslidebutton.value = (text == "Stop") ? "Start" : "Stop"; Onerotate(); } function Onechange() { Onecurrent = document.Oneslideform.Oneslide .selectedIndex; document.images.Oneshow.src = document.Ones lideform.Oneslide[Onecurrent].value; } function Onerotate() { if (document.Oneslideform.Oneslidebutton. value == "Stop") { Onecurrent = (Onecurrent == document.Ones lideform.Oneslide.length-1) ? 0 : Onecurrent+1; document.images.Oneshow.src = document. Oneslideform.Oneslide[Onecurrent].value; document.Oneslideform.Oneslide.selected Index = Onecurrent; window.setTimeout("Onerotate()", Onerotate_delay); } } function Onetransport(){ window.location=OneLinks[Onecurrent] } // End --> </SCRIPT <div align="center" id="wrapper"> <table border="3" width="910" height="240" background="style/brick.jpg"> <tr><td valign="top"> <p><font color="grey"> These are examples of Javascripts</font></p> <div id="wrapper" align= "center"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TR> <TD> <form name="Oneslideform" > <DIV align="center"> <TABLE width="240" height="340" border="1" cellspacing="0" cellpadding="4" bordercolor= "#330099"> <TR> <TD bgcolor="#330099"> <DIV align="center"> <B><FONT color="#FFFFFF"> Image Slideshow</FONT></B></DIV> </TD> </TR> <TR> <TD bgcolor="#FFFFFF"> <DIV align="center"><A href="javascript:Onetransport()"> <IMG src="style/logo2.png" width="200" height="200" name="Oneshow" border="0"></A></DIV> </TD> </TR> <TR> <TD bgcolor="#330099"> <DIV align="center"> <SELECT name="Oneslide" onChange= "Onechange();"> <OPTION value="style/logo2.png" selected>DM Logo</OPTION> <OPTION value="style/dh.jpg"> D. Head II</OPTION> <OPTION value="style/ariel.jpg"> Ariel</OPTION> <OPTION value="style/cyn.jpg"> Cyn</OPTION> </SELECT> </DIV> </TD> </TR> <TR> <TD bgcolor="#330099"> <DIV align="center"> <INPUT type=button onClick="Oneprevious() ;" value="<<" title="Previous"> <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start" title="AutoPlay"> <INPUT type=button onClick="Onenext(); " value=">>" title="Next"> </DIV> </TD> </TR> </TABLE> </DIV> </form> </TD> </TR> </TABLE> <br/> <script> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Sunday","Monday", "Tuesday","Wednesday","Thursday","Friday", "Saturday") var montharray=new Array("January","February" ,"March","April","May","June","July","August" ,"September","October","November","December") document.write("<small><font color='white' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" </b></font></small>") </script> <br/> <br/> <div id="hlc"> <div id="example1" class="sliderH" > <div class="slideH" /> <img src="style/opensoon.jpg"/> <img src="style/logo2.png"/> <img src="style/cyn.jpg"/> <img src="style/hhc.jpg"/> <img src="style/dh.jpg"/> <img src="style/ariel.jpg"/> <img src="style/ala.jpg"/> <img src="style/bla.jpg"/> <img src="style/pic1.jpg"/> <img src="style/pic3.jpg"/> <img src="style/spm.jpg"/> <img src="style/dm.jpg"/> </div> </div> </div> <p><font color="tan">Go back</font><a href="java.html">&nbsp;&nbsp;Here</a></p> </td></tr></table> </div> </body> </html>

Jason is a custom website developer and graphic designer with extensive experience in computer software scripting, computer animation, and customer service. His current focus on creating websites and creating e-commerce stores is preceded by 10 + years in software development, and eight years in the U.S. Navy.

Sample Codes

HTML

Css

Javascript

jQuery

Ajax

PHP

Contact Details
News Letters