How to create a close button on movable objects?

Hello, I have a website with movable objects, users can freely move the mini windows on the website. Please refer to
http://dunnbypaul.net/js_mouse/ 
this is the code i'm using.

I'm fetching webcam ports from my database, and creating a mini window for each webcam videos inside. The attachment shows how my website looks like now, easier for you to understand what I'm talking about.

So how do I create a button to let user close the specific mini window?
I tried to use
<input type=button value='Close Window' onClick='window.close();'>
but i guess its an object rather than a window, doesn't work.

Thanks in advance~
<?php
require("./CustomSql.inc.php");   //some php functions declared in this file
$db = new CustomSQL($DBName);   //database connection info
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Lim Yueh Yih">
<title>Javascript test page - Universal mouse control</title>
<style type="text/css">
#movable_obj1_id { position:absolute; left:90px;  top:80px  }
#movable_obj2_id { position:absolute; left:140px; top:145px }
#movable_obj3_id { position:absolute; left:20px;  top:180px  }
.infobox    { width: 320px; 
              cursor: default;
              text-align: left;
              cursor: pointer;
              background-color: #ffffff;  
            }
</style>
<script type="text/javascript">
function adsize() {
  var sw = window.screen.width;
  var sh = window.screen.height;
  var cw = document.body.clientWidth;
  var ch = document.body.clientHeight;
  document.getElementById("sizead").src = "http://dunnbypaul.net/sizelog/?site=js_mouse&size="+sw+"x"+sh+"+"+cw+"x"+ch;
}
</script>
</head>
 
<body onload="init();adsize();">
<!--- PHP is used to include this code block twice to ensure that it is identical to what is in the pre tag -->
<script type="text/javascript" defer>
//<!--
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
 
var dragobj = null;
 
function falsefunc() { return false; } // used to block cascading events
 
function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}
 
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
 
  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}
 
function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)
 
  document.getElementById('span_browser').innerHTML = navigator.appName;
  document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
  document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
  document.getElementById('span_mousex').innerHTML = mousex;
  document.getElementById('span_mousey').innerHTML = mousey;
  document.getElementById('span_grabx').innerHTML = grabx;
  document.getElementById('span_graby').innerHTML = graby;
  document.getElementById('span_orix').innerHTML = orix;
  document.getElementById('span_oriy').innerHTML = oriy;
  document.getElementById('span_elex').innerHTML = elex;
  document.getElementById('span_eley').innerHTML = eley;
  document.getElementById('span_algor').innerHTML = algor;
  document.getElementById('span_dragobj').innerHTML = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
}
 
function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}
 
function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}
 
function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}
function hide(thisDiv) {
	//this function hides the div
	thisDiv = getRefToDivNest(thisDiv); if( !thisDiv ) { return; }
	if( thisDiv.style ) { thisDiv.style.visibility = 'hidden'; } else { thisDiv.visibility = 'hide'; }
}
</script>
<?   //fetch webcam ports store in database and creates new mini window for each webcam
	$sql="SELECT * FROM webcam";
	$result = mysql_query($sql) or die ("Error in query: $sql " . mysql_error());
	//$row = mysql_fetch_array($result);
	$num_results = mysql_num_rows($result);
	if ($num_results > 0){ ?>
	<?php 
	while($row = mysql_fetch_array($result))
	{  ?>
		<div id="movable_obj1_id" class="infobox" onmousedown="grab(this)">
		<div>Webcam Name: <?print $row['webcamName']?><br>
		Webcam Port: <?print $row['webcamPort']?></div>
		<!-- OBJECT for Internet Explorer-->
		<OBJECT id='mediaPlayer' width="320" height="240"
		classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
		codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
		standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
		<param name='http://streamwebtown.com/<? print $row['webcamPort'] ?>' value="http://streamwebtown.com/<? print $row['webcamPort'] ?>">
		<param name='animationatStart' value='true'>
		<param name='transparentatStart' value='true'>
		<param name='autoStart' value="true">
		<param name='showControls' value="true">
		<param name='loop' value="false">
		 <!--EMBED for Mozilla-->
		<EMBED type='application/x-mplayer2'
		pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
		id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
		bgcolor='darkblue' showcontrols="true" showtracker='-1'
		showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="240"
		src="http://streamwebtown.com/<? print $row['webcamPort'] ?>" autostart="true" designtimesp='5311' loop="false">
		</EMBED>
		</OBJECT>
		</div>
	<? } } ?>
</body>
</html>

Open in new window

movable-window.jpg
SinCurseAsked:
Who is Participating?
 
Samuel LiewCommented:
I didn't see any button which the user need to click to close each 'window', so I used the ondblclick event as an example.
<div id="movable_obj1_id" class="infobox" onmousedown="grab(this)" ondblclick="this.innerHTML='';this.style.display='none';" title="Double-click to close.">

Open in new window

0
 
Samuel LiewCommented:
You can also use the DOM method to remove the div element from the page. Double-click on the text to activate.
<div id="movable_obj1_id" class="infobox" onmousedown="grab(this)" ondblclick="this.parentNode.removeChild(this);" title="Double-click to close.">

Open in new window

0
 
SinCurseAuthor Commented:
thanks alot!
works like charm =D
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.