Skip to content

Instantly share code, notes, and snippets.

@freeart

freeart/collision.html

Created June 16, 2011 20:42
Show Gist options
  • Save freeart/1030225 to your computer and use it in GitHub Desktop.
Save freeart/1030225 to your computer and use it in GitHub Desktop.
Download ZIP
Detect colision of absolute position div
Raw
collision.html
<!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">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>
<style media="all" type="text/css">
.target
{
position: absolute;
}
.found
{
border: 4px solid #000;
}
.me
{
border-color: Blue;
}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function randomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
$.extend($.expr[':'], {
left: function (a, i, m) {
if (!m[3] || !(/^(lt|gt)\d+$/).test(m[3])) { return false; }
return m[3].substr(0, 2) === 'gt' ?
$(a).position().left > m[3].substr(1) : $(a).position().left < m[3].substr(2);
},
top: function (a, i, m) {
if (!m[3] || !(/^(lt|gt)\d+$/).test(m[3])) { return false; }
return m[3].substr(0, 2) === 'gt' ?
$(a).position().top > m[3].substr(1) : $(a).position().top < m[3].substr(2);
},
right: function (a, i, m) {
if (!m[3] || !(/^(lt|gt)\d+$/).test(m[3])) { return false; }
return m[3].substr(0, 2) === 'gt' ?
$(a).position().left + $(a).width() > m[3].substr(2) : $(a).position().left + $(a).width() < m[3].substr(2);
},
bottom: function (a, i, m) {
if (!m[3] || !(/^(lt|gt)\d+$/).test(m[3])) { return false; }
return m[3].substr(0, 2) === 'gt' ?
$(a).position().top + $(a).height() > m[3].substr(2) : $(a).position().top + $(a).height() < m[3].substr(2);
},
z: function (a, i, m) {
if (!m[3] || !(/^(lt|gt)\d+$/).test(m[3])) { return false; }
var z = $(a).css('z-index') == 'auto' ? 0 : $(a).css('z-index');
return m[3].substr(0, 2) === 'gt' ?
z > m[3].substr(2) : z < m[3].substr(2);
}
});
$(document).ready(function () {
for (var i = 0; i < 20; i++) {
style = {
zIndex: (randomFromTo(0, 1) == 0 ? randomFromTo(1, 10) : undefined),
top: randomFromTo(1, 600) + 'px',
left: randomFromTo(1, 800) + 'px',
backgroundColor: randomColor(),
width: randomFromTo(50, 250) + 'px',
height: randomFromTo(50, 250) + 'px'
}
var stringStyle = (style.zIndex ? 'z-index: ' + style.zIndex + ';' : '') + 'top: ' + style.top + ';left: ' + style.left + ';background-color: ' + style.backgroundColor + ';width:' + style.width + ';height:' + style.height + ';';
$('body').append('<div class=target style="' + stringStyle + '" />');
}
var fountElement = $('.target:first').addClass('found me');
fountElement.text('It`s me');
var elementBound = {
top: fountElement.position().top,
left: fountElement.position().left,
right: fountElement.position().left + fountElement.width(),
bottom: fountElement.position().top + fountElement.height(),
z: fountElement.css('z-index') == 'auto' ? 0 : Number(fountElement.css('z-index'))
}
$('.target:right(gt' + elementBound.left + '):left(lt' + elementBound.right + '):bottom(gt' + elementBound.top + '):top(lt' + elementBound.bottom + ')').each(function () {
var elZ = $(this).css('z-index') == 'auto' ? 0 : Number($(this).css('z-index'));
var isNext = (elementBound.z == 'auto' || elementBound.z == elZ);
if (isNext ? fountElement.next($(this)) : elZ > elementBound.z) {
$(this).addClass('found');
}
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment