http://www.w3exchange.com W3Exchange en http://backend.userland.com/rss http://www.w3exchange.com/view_topic.php?pid=7866#7866 7866@http://www.w3exchange.com Topic: The very simply way to make a image slider by Javascript Message: Hi all!I found that is difficult to search a simple javascript code about scrolling image slide. You can find them on Internet but they often are long and complex or hidden from us to prevent edit. I just found a simple way to resolve this. I hope it will help your editting easier to make it yours!We need 2 div tag to make a slide. ChildDiv  to store image array and ParentDiv to contain Child Div.Note:Image Array's Structure: [&lt;Image's Link&gt;, &lt;Image's Width&gt;, &lt;URL to Go&gt;]Functions:     DoSlide(), Make Slide to run.     setmouse(param), set Slide play and pause when pointer over or out on images;     Dr_ImgArr(); Print image array to HTML;     getE(), getElementById();     DivWidth: Width of ParentDiv;     MoreImage: Num Of Image on a begin of Image Array, insert into the last of ChildDiv to continue the Slide;....If you have anymore comment, please reply here so that I can make it more perfect,thank for all.Demo: http://boy.us.com/Code/slide.phpStyle Code::<style> #ParentDiv { margin: auto; width: 600px; overflow: hidden; } #ChildDiv { width: 6000px; position:relative; cursor:pointer; } #ParentDiv img { float: left; padding: 3px; margin: 0px; } </style> Javascript Code::<script> //Array Of Image, [URL, width of Image, LinkTo] var t; var StepTime=10; var StepPixel=1; var ImgPadding=3; var ParentDivLen=600; var Img= [ ["./images/slide/3_116.jpg", 104, "../gal/?gal=3&Type=image&ID=116"], ["./images/slide/4_250.jpg", 103, "../gal/?gal=4&Type=image&ID=250"], ["./images/slide/1_157.jpg", 107, "../gal/?gal=1&Type=image&ID=157"], ["./images/slide/2_120.jpg", 124, "../gal/?gal=2&Type=image&ID=120"], ["./images/slide/4_229.jpg", 116, "../gal/?gal=4&Type=image&ID=229"], ["./images/slide/3_173.jpg", 113, "../gal/?gal=3&Type=image&ID=173"], ["./images/slide/2_192.jpg", 110, "../gal/?gal=2&Type=image&ID=192"], ["./images/slide/4_111.jpg", 104, "../gal/?gal=4&Type=image&ID=111"], ["./images/slide/5_244.jpg", 106, "../gal/?gal=5&Type=image&ID=244"], ["./images/slide/5_279.jpg", 109, "../gal/?gal=5&Type=image&ID=279"], ["./images/slide/5_233.jpg", 102, "../gal/?gal=5&Type=image&ID=233"], ["./images/slide/5_256.jpg", 106, "../gal/?gal=5&Type=image&ID=256"], ["./images/slide/5_248.jpg", 111, "../gal/?gal=5&Type=image&ID=248"], ["./images/slide/3_143.jpg", 99, "../gal/?gal=3&Type=image&ID=143"], ["./images/slide/1_225.jpg", 103, "../gal/?gal=1&Type=image&ID=225"], ["./images/slide/4_103.jpg", 109, "../gal/?gal=4&Type=image&ID=103"], ["./images/slide/4_145.jpg", 118, "../gal/?gal=4&Type=image&ID=145"], ["./images/slide/5_263.jpg", 100, "../gal/?gal=5&Type=image&ID=263"], ["./images/slide/2_115.jpg", 102, "../gal/?gal=2&Type=image&ID=115"], ["./images/slide/4_140.jpg", 122, "../gal/?gal=4&Type=image&ID=140"], ["./images/slide/1_214.jpg", 112, "../gal/?gal=1&Type=image&ID=214"], ["./images/slide/3_142.jpg", 102, "../gal/?gal=3&Type=image&ID=142"], ["./images/slide/5_297.jpg", 99, "../gal/?gal=5&Type=image&ID=297"], ["./images/slide/4_168.jpg", 101, "../gal/?gal=4&Type=image&ID=168"], ["./images/slide/5_277.jpg", 111, "../gal/?gal=5&Type=image&ID=277"], ["./images/slide/5_296.jpg", 103, "../gal/?gal=5&Type=image&ID=296"], ["./images/slide/4_169.jpg", 109, "../gal/?gal=4&Type=image&ID=169"], ["./images/slide/4_244.jpg", 110, "../gal/?gal=4&Type=image&ID=244"], ["./images/slide/5_285.jpg", 112, "../gal/?gal=5&Type=image&ID=285"], ["./images/slide/3_100.jpg", 111, "../gal/?gal=3&Type=image&ID=100"], ["./images/slide/1_103.jpg", 111, "../gal/?gal=1&Type=image&ID=103"], ["./images/slide/1_119.jpg", 104, "../gal/?gal=1&Type=image&ID=119"], ["./images/slide/5_253.jpg", 107, "../gal/?gal=5&Type=image&ID=253"], ["./images/slide/4_183.jpg", 105, "../gal/?gal=4&Type=image&ID=183"], ["./images/slide/4_171.jpg", 111, "../gal/?gal=4&Type=image&ID=171"], ["./images/slide/2_147.jpg", 126, "../gal/?gal=2&Type=image&ID=147"], ["./images/slide/3_115.jpg", 116, "../gal/?gal=3&Type=image&ID=115"], ["./images/slide/5_310.jpg", 113, "../gal/?gal=5&Type=image&ID=310"], ["./images/slide/4_185.jpg", 109, "../gal/?gal=4&Type=image&ID=185"], ["./images/slide/3_159.jpg", 108, "../gal/?gal=3&Type=image&ID=159"], ["./images/slide/2_154.jpg", 125, "../gal/?gal=2&Type=image&ID=154"], ["./images/slide/5_314.jpg", 107, "../gal/?gal=5&Type=image&ID=314"], ["./images/slide/2_106.jpg", 100, "../gal/?gal=2&Type=image&ID=106"], ["./images/slide/4_123.jpg", 103, "../gal/?gal=4&Type=image&ID=123"], ]; var Pos=0; var Len=Img.length; var DivWidth=0; var MoreImage=0; function goURL(URLS) { document.location.href=URLS; } for(i=0;i<Len;i++) { DivWidth+=Img[i][1] + ImgPadding*2; if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i; } function getE(id) { return document.getElementById(id); } function Dr_Img(IMG) { return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">'; } function Dr_ImgArr() { var str=''; for(i=0;i<Len;i++) str += Dr_Img(Img[i]); for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]); document.write(str); } function DoSlide() { if(Pos==0)Pos=-1; divtg=getE('ChildDiv'); Pos-=StepPixel; if(Pos<-DivWidth)Pos=0; divtg.style.left=Pos +'px'; t=setTimeout('DoSlide()',StepTime); } function SlideStop() { clearTimeout(t); } function setmouse(id) { if(id==1) { DoSlide(); } else { SlideStop(); } } </script> HTML Body Code::<div id="ParentDiv"> <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);"> <script> Dr_ImgArr(); </script> </div> </div> Fri, 16 May 2008 14:18:38 -0700 http://www.w3exchange.com/view_topic.php?pid=3011#3011 3011@http://www.w3exchange.com Topic: .NET Class Library (DLL) in JavaScript ?? Message: Dear all,Pls help in JavaScript coding since i'm a beginner in JavaScript ...i have a .NET class library (DLL) : ACR120DLL.ACR120DLL...Does anybody know how to use this DLL event (AddList, TriggerReadData) and event's procedure in JavaScript ?In VB .NET it's obvious to use AddHandler.In windows application (VB .NET 2003) , the source code is like this : .........    Private _AddListHandler As ACR120DLL.ACR120DLL.AddListHandler    Private WithEvents _ACR As ACR120DLL.ACR120DLL        _ACR = New ACR120DLL.ACR120DLL        _ACR.TotalBlocks = 44 'TOTAL BLOCK-1        AddHandler _ACR.AddList, AddressOf AddList        AddHandler _ACR.SelectList, AddressOf SelectList        _ACR.Connect()        Timer1 = New System.Timers.Timer        AddHandler Timer1.Elapsed, AddressOf TriggerReadData        Timer1.Interval = 1000        Timer1.AutoReset = True        Timer1.Start()...........    Private Sub AddList(ByVal Msg As String)        If Msg.EndsWith("-3030") Then            MessageBox.Show("Ada kesalahan ! Mohon diulangi proses pembacaan kartu !")            Return        End If        List1.Items.Add(Msg)    End Sub    Private Sub SelectList()        List1.SelectedIndex = List1.Items.Count - 1    End Sub    Private Sub TriggerReadData(ByVal o As Object, ByVal e As System.Timers.ElapsedEventArgs)    End SubTks,hendy Fri, 30 Mar 2007 01:16:21 -0700 http://www.w3exchange.com/view_topic.php?pid=91#91 91@http://www.w3exchange.com Topic: Mouse movement not working in Firefox Message: Your code is hard to read. Do you have to have it all in such long lines?Consider using variables to store references to html elements, so you don't repeat your code again and again.You are using IE only properties, such as posLeft. Use the top and left properties instead. They will return a String though, so you need to use parseInt to cast to a Number. Mon, 14 Aug 2006 01:08:16 -0700 http://www.w3exchange.com/view_topic.php?pid=84#84 84@http://www.w3exchange.com Topic: Mouse movement not working in Firefox Message: So I'm working on a breakout game, and this is a test I found online and I did some editing in it. The red square should follow the cursor, and it does in Safari and IE, but it doesn't in Firefox. Any clue what has to be done to make it work?ThanksTypon Sun, 13 Aug 2006 02:29:44 -0700