Change colour when a div (runtime dimension and position) contains another div (fixed dimension and position)
This code is not tested so much, and is little slow. It is only a test, but it works. Requires PROTOTYPE.JS
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5 <head> 6 <title>Prova di selezione rettangolo</title> 7 <script src="prototype.js" type="text/javascript"></script> 8 9 <script> 10 Event.observe(document,"mousedown",MouseDown); 11 Event.observe(document,"mouseup",MouseUp); 12 Event.observe(document,"mousemove",MouseMove); 13 14 var x1 = -1; 15 var y1 = -1; 16 var w = 0; 17 var h = 0; 18 var make = false; 19 var shift = false; 20 function MouseDown(e) { 21 $('mouse').innerHTML = "mousedown"; 22 23 x1 = Event.pointerX( e ); 24 y1 = Event.pointerY( e ); 25 $('box').setStyle({top:y1+"px",left:x1+"px",width: w+"px",height:h+"px"}); 26 make = true; 27 } 28 29 function MouseUp(e) { 30 $('mouse').innerHTML = "mouseup"; 31 make = false; 32 w = 1; 33 h = 1; 34 } 35 36 function MouseMove(e) { 37 var x2 = Event.pointerX( e ); 38 var y2 = Event.pointerY( e ); 39 var l = x1; 40 var t = y1; 41 $('pointer').innerHTML = "X1: "+x1+" -- X2: "+x2+" -- Y1: "+y1+" -- Y2: "+y2; 42 43 if (x1 > -1 && make == true) { 44 var x2 = Event.pointerX( e ); 45 var y2 = Event.pointerY( e ); 46 47 48 if (x2 < x1) { 49 l = x2; 50 x2 = x1; 51 } 52 53 if (y2 < y1) { 54 var t = y2; 55 56 y2 = y1; 57 } 58 59 var w = (x2 - l); 60 var h = (y2 - t); 61 $('box').setStyle({top:t+"px",left:l+"px",width:w+"px",height:h+"px"}); 62 } 63 64 pippo = $$('div.pippo'); 65 var rect = $('box'); 66 var n = pippo.size(); 67 $('rectc').innerHTML = ''; 68 $('rectc').innerHTML += Position.cumulativeOffset(rect)+" -- "; 69 for (var i = 0;i<n;i++) { 70 var el = $(pippo[i].id); 71 var xy = Position.cumulativeOffset(el); 72 var elx1 = xy[0]; 73 var ely1 = xy[1]; 74 var xy = el.getDimensions(); 75 var elx2 = elx1 + xy.height; 76 var ely2 = ely1 + xy.width; 77 $('rectc').innerHTML += "x1: "+elx1+" x2: "+elx2+" y1:"+ely1+" y2: "+ely2; 78 if (Position.within(rect,elx1,ely1) || Position.within(rect,elx2,ely1) || Position.within(rect,elx1,ely2) || Position.within(rect,elx2,ely2)) { 79 $('rectc').innerHTML += "true"; 80 $(el).setStyle({backgroundColor:'red'}); 81 } else { 82 $('rectc').innerHTML += " -- false"; 83 $(el).setStyle({backgroundColor:'transparent'}); 84 } 85 $('rectc').innerHTML += ' <<>> '; 86 } 87 } 88 89 90 </script> 91 </head> 92 <body> 93 <div id="debug_container" style="border: 1px red solid"> 94 <div id="mouse"></div> 95 <div id="pointer"></div> 96 <div id="pippoc"></div> 97 <div id="rectc"></div> 98 </div> 99 100 <div id="box" style="border: 1px green solid; position: absolute;z-Index: 1000"></div> 101 102 <div id="pippo" class="pippo" style="position:absolute;left:200px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> 103 <div id="pippo2" class="pippo" style="position:absolute;left:300px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> 104 <div id="pippo3" class="pippo" style="position:absolute;left:400px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> 105 106 </body> 107 </html>
