alzami
-
Posts
95 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by alzami
-
thank u guys for your reply.i am studying oop as well as your codes.as soon ###### i can manage to understand them i will let you know.
-
send number according to the number boxes <td onClick="add(this.id,0,0);" id="td1"></td><td onClick="add(this.id,0,1);" id="td2"></td> i managed to add values to array according to serial of boxes out there.but still cant declare winner .i have made a script which will look for three same value in a row.seems not working <script>var arr =new Array(3)for (i=0; i <3; i++){arr[i]=new Array(3)}</script><script>var i=0;function add(el,r,c){ var m=document.getElementById(el); i++; if(i%2==1){ m.innerHTML="o"; arr[r][c]=m.innerHTML; } if(arr[0][0]==arr[0][1]==arr[0][2]=="o"){ alert("player 1 wins"); } if(i%2==0){ m.innerHTML="x"; arr[r][c]=m.innerHTML; } }</script> and for searching winner i made this .but its not working,can't imagine why??i made it only to examine if it works or not .so i made for two types of serial containing same object.not working though if(arr[0][0]==arr[0][1]==arr[0][2]=="o" || arr[0][0]==arr[1][0]==arr[2][0]=="o"){ alert("player 1 wins"); }
-
i want to use a 2D array here.but how can i create a 2D array in javascript??
-
trying to make a game here.everyon know what this game is.filling couple of boxes .if can manage to put similar object in a row that player will win.i can manage to make the structure.but cant figure out how to declare winner i mean how can i decide that three table in a row is filled by same object?and if i click on a table a certain object appears for player one.but if player 2 click on the same table it changes.how to prevent that?you will understand what i am trying to say if you see my codes.... <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#shape{ border:1px solid black; width:200px; height:200px;}td{ border:1px solid black;}</style></head><body><table id="shape"><tr ><td onClick="add(this.id);" id="td1"></td><td onClick="add(this.id);" id="td2"></td><td onClick="add(this.id);" id="td3" ></td></tr><tr ><td onClick="add(this.id);" id="td4" ></td><td onClick="add(this.id);" id="td5"></td><td onClick="add(this.id);" id="td6"></td></tr><tr ><td onClick="add(this.id);" id="td7" ></td><td onClick="add(this.id);" id="td8"></td><td onClick="add(this.id);" id="td9"></td></tr></table><script>var i=0;function add(el){ var m=document.getElementById(el); i++; if(i%2==1){ m.innerHTML="o"; } if(i%2==0){ m.innerHTML="x"; }}</script></body></html>
-
thanks for your reply.i replaced my script with your codes but still remains the same.slow at first and gains speed later on...
-
i am new to javascript as well as oop.i have decided to study your code.i didn't understand some terms .may i ask some question regarding your codes. how Array.prototype.slice.call(args) this works?and what does Function.prototype.instance it represents?
-
don't know why the sliding effect starts with a real slow speed but after one loop it gains the expected speed .can't find out whats the problem is <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>*{margin:0px; padding:0px;}#box{ width:700px; height:301px; border:1px solid black; position:relative; overflow:hidden;}img{ width:700px; height:300px;}#i1{ height:300px; width:700px; position:absolute; left:0px; top:0px;}#i2{ position:absolute; height:300px; width:700px; left:700px; top:0px;}#i3{ height:300px; width:700px; position:absolute; top:0px; left:1400px;}</style></head><body><div id="box"><div id="i1"><img src="imagec1.jpg" ></div><div id="i2"><img src="imagec2.jpg" ></div><div id="i3"><img src="imagec3.jpg" ></div></div><script>var m=0;var n=700;var o=1400;function scroll(){ document.getElementById("i1").style.left = m +"px"; document.getElementById("i2").style.left = n +"px"; document.getElementById("i3").style.left = o +"px"; m=m-1;n=n-1;o=o-1; if(m==-1400){m=700;} if(n==-700){n=1400;} if(o==-700){o=1400;}}setInterval(scroll,10);</script><script>window.onload=scroll();</script></body></html>
-
thats my final code and works just same as my expectation .thanks for your patience <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#this{ width:500px; height:100px; border:1px solid blue; display:none;}#this img{ width:100px; height:100px;}#that { width:300px;height:300px; position:absolute;top:120px; left:200px;border:1px solid black;}#that img{ width:300px;height:300px;} a:hover{ color:red; }</style></head><body style="position:relative;"><div id="this"></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="show();">next</a></div><div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="showBack();">previous</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick=" auto();">auto</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick=" clse();">closeAuto</a></div><div id="that"><img src="image1.jpg" /></div><script>window.onerror = function(m, u, l){ alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l); return true;}</script><script>var i; var imag = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];function load(){ var m=document.getElementById("this"); for(i=0;i<imag.length;i++){ m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'" />'; } }</script><script>load();</script><script>var p=0;var k=0;var a=0;function show(){ var m=document.getElementById("that"); var s=document.getElementById("next"); var d=document.getElementById("previous"); p++; if(p==imag.length){ p=0; a=k=p; m.innerHTML='<img src="'+imag[p]+'" />'; }else{ m.innerHTML='<img src="'+imag[p]+'" />'; a=k=p; }}</script><script>function showBack(){ var m=document.getElementById("that"); var s=document.getElementById("next"); var d=document.getElementById("previous"); if(k==0){ k=imag.length-1; m.innerHTML='<img src="'+imag[k]+'" />'; a=p=k; } else{ k--; m.innerHTML='<img src="'+imag[k]+'" />'; a=p=k; } }</script><script>var c=0;function auto(){ if(c==null) {return;} var m=document.getElementById("that"); a++; if(a==imag.length){ m.innerHTML='<img src="'+imag[0]+'" />'; a=0; }else{ m.innerHTML='<img src="'+imag[a]+'" />'; } c=setTimeout(function(){auto();},700); }function clse(){ var m=document.getElementById("that"); clearTimeout(c); c=null; m.innerHTML='<img src="'+imag[a]+'" />'; }</script></body></html>
-
if i do that way it stops but neither next nor previous button works <script>function auto(){ if(c==null) {return;} var m=document.getElementById("that"); a++; if(a==imag.length){ m.innerHTML='<img src="'+imag[0]+'" />'; a=0; }else{ m.innerHTML='<img src="'+imag[a]+'" />'; } c=setTimeout(function(){auto();},700); }function clse(){ var m=document.getElementById("that"); clearTimeout(c);var c=null; m.innerHTML='<img src="'+imag[a]+'" />'; }</script>
-
added it and changed close to clse.still not doing anything .getting frustrated var c=0;function auto(){ if(c==null) {return;} var m=document.getElementById("that"); a++; if(a==imag.length){ m.innerHTML='<img src="'+imag[0]+'" />'; a=0; }else{ m.innerHTML='<img src="'+imag[a]+'" />'; } c=setTimeout(function(){auto();},700); }function clse(){ var m=document.getElementById("that"); clearTimeout(c); c=null; m.innerHTML='<img src="'+imag[a]+'" />'; }</script>
-
i used the codes as you described;here is the full code which include "next" "previous" button and all the rest.I have made it such a way that if i use the next and previous button before clicking auto button ,the auto will start from the next image. .i used the codes that u suggested but its giving me an error.though the codes works still.but it cant manage to stop the auto scroll. <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#this{ width:500px; height:100px; border:1px solid blue; display:none;}#this img{ width:100px; height:100px;}#that { width:300px;height:300px; position:absolute;top:120px; left:200px;border:1px solid black;}#that img{ width:300px;height:300px;} a:hover{ color:red; }</style></head><body style="position:relative;"><div id="this"></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="show();">next</a></div><div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="showBack();">previous</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick=" c=0 ;auto();">auto</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick=" close();">closeAuto</a></div><div id="that"><img src="image1.jpg" /></div><script>var i; var imag = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"]function load(){ var m=document.getElementById("this"); for(i=0;i<imag.length;i++){ m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'" />'; } } load();var p=0;var k=0;var a=0;function show(){ var m=document.getElementById("that"); var s=document.getElementById("next"); var d=document.getElementById("previous"); p++; if(p==imag.length){ p=0; a=k=p; m.innerHTML='<img src="'+imag[p]+'" />'; }else{ m.innerHTML='<img src="'+imag[p]+'" />'; a=k=p; }}function showBack(){ var m=document.getElementById("that"); var s=document.getElementById("next"); var d=document.getElementById("previous"); if(k==0){ k=imag.length-1; m.innerHTML='<img src="'+imag[k]+'" />'; a=p=k; } else{ k--; m.innerHTML='<img src="'+imag[k]+'" />'; a=p=k; } }var c;if(c==null) {return;}function auto(){ var m=document.getElementById("that"); a++; if(a==imag.length){ m.innerHTML='<img src="'+imag[0]+'" />'; a=0; }else{ m.innerHTML='<img src="'+imag[a]+'" />'; } c=setTimeout(function(){auto();},700); }function close(){ var m=document.getElementById("that"); clearTimeout(c); c=null; m.innerHTML='<img src="'+imag[a]+'" />'; }</script></body></html>
-
did what u suggested.but still not working;
-
i have a created an auto image slide gallery which i want to stop whenever i click on the "close auto " button.but cant figure out how to.so please help me out on this!!i've deleated the "next" and "previous" sections of javascript for simplification because that part works just fine. <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#this{ width:500px; height:100px; border:1px solid blue; display:none;}#this img{ width:100px; height:100px;}#that { width:300px;height:300px; position:absolute;top:120px; left:200px;border:1px solid black;}#that img{ width:300px;height:300px;} a:hover{ color:red; }</style></head><body style="position:relative;"><div id="this"></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:510px;" id="next"><a href="#" onClick="show();">next</a></div><div style="height:30px;width:100px;background-color:grey;float:right;position:absolute;top:0px;left:0px;" id="previous"><a href="#" onClick="showBack();">previous</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:0px;left:600px;" id="auto"><a href="#" onClick="auto();">auto</a></div><div style="height:30px;width:100px;background-color:grey;float:left;position:absolute;top:50px;left:600px;" id="auto"><a href="#" onClick="close();">closeAuto</a></div><div id="that"><img src="image1.jpg" /></div><script>var i; var imag = ["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"]function load(){ var m=document.getElementById("this"); for(i=0;i<imag.length;i++){ m.innerHTML += '<img src="'+imag[i]+'" id="'+i+'" />'; } } </script><script>load();</script><script>a=0;function auto(){ var m=document.getElementById("that"); a++; if(a==imag.length){ m.innerHTML='<img src="'+imag[0]+'" />'; a=0; }else{ m.innerHTML='<img src="'+imag[a]+'" />'; } var c=setTimeout(auto,700); }</script><script>function close(){ clearTimeout(c); var m=document.getElementById("that"); m.innerHTML='<img src="'+imag[a]+'" />';}</script></body></html>
-
thanks a lot
-
i want to load some images using new image() object method.i can do the same thing using normal array indexing.but i want to do it in this way only for learning purpose.can anyone tell me where the mistakes here <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>#this{ width:500px; height:100px; border:1px solid blue;}#this img{ width:100px; height:100px;}</style></head><body><div id="this"></div><script>load();</script><script> var imag = new array(4); imag[0] = new image(); imag[0].src = "image1.jpg"; imag[1] = new image(); imag[1].src = "image2.jpg"; imag[2] = new image(); imag[2].src="image3.jpg"; imag[3] = new image(); imag[3].src ="image4.jpg"; imag[4] =new image(); imag[4].src="image5.jpg";function load(){ var m=document.getElementById("this"); var i; for(i=0;i<imag.length;i++){ m.innerHTML += '<img src="'+imag[i].src+'" id="'+i+'" onClick="show(this.id);" />'; }} </script></body></html>
-
many many thanks!!!i always wonder why you guys always post tougher to understand codes (joking ).i remenber a guy posted codes took me hours to understand .may be its because i am new to javascript.
-
i want to make a smooth scroll upto a certain direction.but code doesn't working though i cant see any error or any other problem.please help <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>.this{ width:200px; height:1000px; border:1px solid black;}</style></head><body><a href="#" onClick="return false;" onMouseDown="scroll('div1');">click to div1</a></br><a href="#" onClick="return false;" onMouseDown="scroll('div2');">click to div2</a></br><a href="#" onClick="return false;" onMouseDown="scroll('div3');">click to div3</a></br><a href="#" onClick="return false;" onMouseDown="scroll('div4');">click to div4</a></br><div class="this" id="div1">div1</div><a href="#" onClick="return false;" onMouseDown="toTop();">back to top</a><div class="this" id="div2" >div2</div><a href="#" onClick="return false;" onMouseDown="toTop();">back to top</a><div class="this"id="div3" >div3</div><a href="#" onClick="return false;" onMouseDown="toTop();">back to top</a><div class="this" id="div4" >div4</div><a href="#" onClick="return false;" onMouseDown="toTop();">back to top</a><script>function scroll(el){ var m=document.getElementById(el); var t=m.offsetTop; var c=window.pageYOffset; window.scrollBy(0,40); if(c==t){ clearTimeout(p); } var p=setTimeout(scrolll,50); }</script><script>function toTop(){ var m=window.pageYOffset; window.scrollBy(0,-m);}</script></body></html> i have tried this also .but not working <script>var i=0;function scroll(el){ var m=document.getElementById(el); var t=m.offsetTop; var c=window.pageYOffset; for(i=0;i<=m.offsetTop;i++){ window.scrollBy(0,i); } }</script>
-
thanks!but how can i make the javascript work????
-
want to make the small div to move with the page while it is being scrolled.seems codes not working .please help me on this. <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>.mid{ height:2900px; width:400px; border:1px solid black; margin:0 auto;}#od{ float:left; height:300px; width:150px; border:1px solid red; margin-left:143px; top:20px; position:relative;}</style><script>window.onscroll=function(){setTimeout(movediv,300);}</script></head><body style="position:relative;"><div id="od"></div><div class="mid"></div><script>function movediv(){ var this_id=document.getElementById("od"); var heights=this_id.style.height; var heights_num=heights.slice(0,-1); var h=parseInt( heights_num); var page_height=parseInt(window.pageYOffset); if(page_height>h){ move(); }}function move(){ var m=document.getElementById("od"); var tops=m.style.top; var d=parseInt(window.pageYOffset); var ts=tops.slice(0,-1); var t=parseInt(ts); t++; m.style.top = t +"px"; var p = setTimeout(move,12); if(t>d+60){ clearTimeout(p); m.style.top = t +"px"; } }</script></body></html>