Author Topic: Javascript Element Selection Engine  (Read 3422 times)

0 Members and 1 Guest are viewing this topic.

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Javascript Element Selection Engine
« on: October 04, 2011, 07:54:51 am »
Wrote a little code which allows you to select elements within an html page (using a drag selection field)
All you have to do to make it "selectable" is add the selectable class :)
Code: (html) [Select]
<html>
<head>
<title>Selection field</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var mouseX = 0, mouseY = 0, startX = 0, startY = 0, colliders = [];

window.onmousedown = function() {
//Defaults
$('#selector') .css('position', 'absolute')
.css('opacity', 0.50);

//Declarations
startX = mouseX;
startY = mouseY;

//Apply
$('#selector').css('left', startX);
$('#selector').css('top', startY);

//Show
$('#selector').show();
}

window.onmousemove = function(e) {
//Set mouse values
mouseX = e.pageX;
mouseY = e.pageY;

//Positioning values
var tX, tY, w, h;

//Calculate X
if ( (mouseX - startX) >= 0 )
{
tX = startX;
w = mouseX - startX;
}
else
{
tX = startX + ( mouseX - startX );
w = (mouseX - startX) * -1;
}

//Calculate Y
if ( (mouseY - startY) >= 0 )
{
tY = startY;
h = mouseY - startY;
}
else
{
tY = startY + ( mouseY - startY );
h = (mouseY - startY) * -1;
}

//Apply
$('#selector').css({ left: tX, top: tY, width: w, height: h });

//Check for collision
//Private function to detect collision (called twice, once horizontal, once vertical)
function cps(p1, p2) {
var x1 = p1[0] < p2[0] ? p1 : p2;
var x2 = p1[0] < p2[0] ? p2 : p1;
return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}

//Store the selector position data in this array
var sel = [[tX, tX + w], [tY, tY + h]];

$.each(colliders, function(key, i) {
var selectionBorder = ( cps(sel[0], this[1]) && cps(sel[1], this[2]) ) ? '1px solid black' : '1px solid white';
if ( $('#selector').css('display') == 'block' )
{
$(this[0]).css('border', selectionBorder);
}
});

//Override
return false;
}

window.onmouseup = function() {
$('#selector').hide();
}

//Init
function init () {
$('#selector').hide();
$('.selectable').each(function (key, i) {
var pos = $(this).position();
colliders.push([this, [ pos.left, pos.left + $(this).innerWidth() ], [ pos.top,  pos.top + $(this).innerHeight() ] ]);
});
};
</script>
</head>
<body onload="javascript:init();">
<div class="selectable" style="position:absolute;left:500px;top:500px;width:100px;height:100px;background-color:red;border:1px solid white;"></div>
<div class="selectable" style="position:absolute;left:800px;top:200px;width:100px;height:100px;background-color:blue;border:1px solid white;"></div>
<div style="background:lightblue;border:1px solid blue;display:none:position:absolute;width:0px;height:0px;left:0px;top:0px;z-index:9001" id="selector"></div>
</body>
</html>

Demo: http://www.walotech.com/nomnom.html

Edit 2: Added transparency, added red cube to test transparancy
Edit 3: Added collision detection, morphed it into a selection engine (couldn't resist :P), added blue cube to test multi-selection, people could use this in any application.
Edit 4: Moved the show() so that it doesn't flicker :)
Edit 5: Edited live demo to show potential and how selected items can be used.

Feel free to use this entire engine (with author credits), or snippets of it (no author credits needed)
« Last Edit: October 06, 2011, 04:17:18 pm by Ikkerens »

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline aeTIos

  • Nonbinary computing specialist
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3915
  • Rating: +184/-32
    • View Profile
    • wank.party
Re: Javascript Element Selection Engine
« Reply #1 on: October 04, 2011, 10:32:05 am »
nice.
I'm not a nerd but I pretend:

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Javascript Element Selection Engine
« Reply #2 on: October 05, 2011, 12:49:39 am »
I like it! I actually needed a drag-to-select engine for my Phinder project.




Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Javascript Element Selection Engine
« Reply #3 on: October 05, 2011, 02:53:59 am »
I like it! I actually needed a drag-to-select engine for my Phinder project.

Great! If you need help understanding the code (or customizing it), just give a shout ;)

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Javascript Element Selection Engine
« Reply #4 on: October 05, 2011, 06:20:22 am »
Can you add like a button that, when pressed, sets all selected elements to display: none;? I would like to see how that would work. Also, I'm talking about the demo ;)

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Javascript Element Selection Engine
« Reply #5 on: October 05, 2011, 08:46:28 am »
Can you add like a button that, when pressed, sets all selected elements to display: none;? I would like to see how that would work. Also, I'm talking about the demo ;)

Uploaded the new version, same demo link.

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...