Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS 

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

<!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>Prova di selezione rettangolo</title>
  <script src="prototype.js" type="text/javascript"></script>
  
  <script>
  Event.observe(document,"mousedown",MouseDown);
  Event.observe(document,"mouseup",MouseUp);
  Event.observe(document,"mousemove",MouseMove);
  
  var x1 = -1;
  var y1 = -1;
  var w = 0;
  var h = 0;
  var make = false;
  var shift = false;
  function MouseDown(e) {
  	$('mouse').innerHTML = "mousedown";
	
		x1 = Event.pointerX( e );
		y1 = Event.pointerY( e );
		$('box').setStyle({top:y1+"px",left:x1+"px",width: w+"px",height:h+"px"});
		make = true;
  }
  
  function MouseUp(e) {
  	$('mouse').innerHTML = "mouseup";
	make = false;
	w = 1;
	h = 1;
  }
  
  function MouseMove(e) {
  	var x2 = Event.pointerX( e );
        var y2 = Event.pointerY( e );
	var l = x1;
	var t = y1;
	$('pointer').innerHTML = "X1: "+x1+" -- X2: "+x2+" -- Y1: "+y1+" -- Y2: "+y2;
	
	if (x1 > -1 && make == true) {
		var x2 = Event.pointerX( e );
		var y2 = Event.pointerY( e );
	
		
		if (x2 < x1) {
			l = x2;
			x2 = x1;
		}
		
		if (y2 < y1) {
			var t = y2;
			
			y2 = y1;
		}
		
		var w = (x2 - l);
		var h = (y2 - t);
		$('box').setStyle({top:t+"px",left:l+"px",width:w+"px",height:h+"px"});
	}
	
	pippo = $$('div.pippo');
	var rect = $('box');
	var n = pippo.size();
	$('rectc').innerHTML = '';
	$('rectc').innerHTML += Position.cumulativeOffset(rect)+" -- ";
	for (var i = 0;i<n;i++) {
		var el = $(pippo[i].id);
		var xy = Position.cumulativeOffset(el);
		var elx1 = xy[0];
		var ely1 = xy[1];
		var xy = el.getDimensions();
		var elx2 = elx1 + xy.height;
		var ely2 = ely1 + xy.width;
		$('rectc').innerHTML += "x1: "+elx1+" x2: "+elx2+" y1:"+ely1+" y2: "+ely2;
		if (Position.within(rect,elx1,ely1) || Position.within(rect,elx2,ely1) || Position.within(rect,elx1,ely2) || Position.within(rect,elx2,ely2)) {
			$('rectc').innerHTML += "true";
			$(el).setStyle({backgroundColor:'red'});
		} else {
			$('rectc').innerHTML += " -- false";
			$(el).setStyle({backgroundColor:'transparent'});
		}
		$('rectc').innerHTML += ' <<>> ';
	}
  }
  
  
  </script>
</head>
<body>
<div id="debug_container" style="border: 1px red solid">
	<div id="mouse"></div>
	<div id="pointer"></div>
	<div id="pippoc"></div>
	<div id="rectc"></div>
</div>

<div id="box" style="border: 1px green solid; position: absolute;z-Index: 1000"></div>

<div id="pippo" class="pippo" style="position:absolute;left:200px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>
<div id="pippo2" class="pippo" style="position:absolute;left:300px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>
<div id="pippo3" class="pippo" style="position:absolute;left:400px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>

</body>
</html>
to javascript prototype div contains by ziobudda on May 10, 2007

div function

    div: func [
        "Returns the quotient and remainder of the first value divided by the second."
        value1 [number! money! time!]
        value2 [number! money! time!]
    ][
        reduce [round/down value1 / value2  remainder value1 value2]
    ]
to math div REBOL by gregg.irwin on Jan 10, 2006

HitTest //JavaScript Function


With this it's possible to correct the "SELECT over DIV" IE bug as i showed in the example bellow

it checks one element (or an array of them) against another one and returns the itens that matched the hit test (if the element superposes the other one in any place)

[UPDATED CODE AND HELP CAN BE FOUND HERE]


code

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/hittest [v1.0]

hitTest = function(o, l){
	function getOffset(o){
		for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight};
			o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
		return r.r += r.l, r.b += r.t, r;
	}
	for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
		b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
		&& (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
	return j ? !!r.length : r;
};


usage
<style type="text/css">
#menu{position: absolute; height: 500px; width: 200px; display: none; border: 1px solid #999; background: #eef;}
</style>

<div id="menu">
    <input type="button" onclick="hide();" value="Hide Menu" />
</div>
<form action="">
    <fieldset>
    <strong>DIV x SELECT</strong>
    <br /><select><option>DIV OVER SELECT DIV OVER SELECT DIV OVER SELECT</option></select>
    <input type="button" onclick="show();" value="Show Menu" />
    </fieldset>
</form>


<script type="text/javascript">
//<![CDATA[

var x = document.getElementById("menu");

//exemplo de como consertar o problema do select em cima do div, como só acontece no IE, é possível sniffar o browser...

function show(){
    x.style.display = "block";
    if(!x.ieFix)
        x.ieFix = hitTest(x, document.getElementsByTagName("select"));
    for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "hidden");

}

function hide(){
    x.style.display = "none";
    for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "visible");
}

//]]>
</script>
to test javascript select hit div over jonas jsfromhell raoni by jonasraoni on Nov 24, 2005
« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS