[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 803
  • Last Modified:

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
0
SinCurse
Asked:
SinCurse
  • 2
1 Solution
 
sam2912Commented:
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
 
sam2912Commented:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now