How to create a close button on movable objects?

Posted on 2009-05-01
Last Modified: 2013-11-06
Hello, I have a website with movable objects, users can freely move the mini windows on the website. Please refer to
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~

require("./");   //some php functions declared in this file

$db = new CustomSQL($DBName);   //database connection info


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<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;  



<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 = ""+sw+"x"+sh+"+"+cw+"x"+ch;




<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



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 ? ( ? : 'unnamed object') : '(null)';


function grab(context)


  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection

  dragobj = context; = 10; // move it to the top

  document.onmousemove = drag;

  document.onmouseup = drop;

  grabx = mousex;

  graby = mousey;

  elex = orix = dragobj.offsetLeft;

  eley = oriy = dragobj.offsetTop;



function drag(e) // parameter passing is important for NS family 


  if (dragobj)


    elex = orix + (mousex-grabx);

    eley = oriy + (mousey-graby); = "absolute"; = (elex).toString(10) + 'px';  = (eley).toString(10) + 'px';



  return false; // in IE this prevents cascading of events, thus text selection is disabled


function drop()


  if (dragobj)

  { = 0;

    dragobj = null;



  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( ) { = 'hidden'; } else { thisDiv.visibility = 'hide'; }



<?   //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){ ?>


	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"



		standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>

		<param name='<? print $row['webcamPort'] ?>' value="<? 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'


		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="<? print $row['webcamPort'] ?>" autostart="true" designtimesp='5311' loop="false">




	<? } } ?>



Open in new window

Question by:SinCurse
    LVL 14

    Accepted Solution

    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='';'none';" title="Double-click to close.">

    Open in new window

    LVL 14

    Expert Comment

    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


    Author Closing Comment

    thanks alot!
    works like charm =D

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Suggested Solutions

    Title # Comments Views Activity
    Simple JavaScript form question 4 45
    Javascript and mvc 12 36
    Javascript newbie 5 30
    HTML5 and Javascript 3 21
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and Log…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now