Image

Imagezimzat wrote in Imagejavascript 😡frustrated

Listens: "I Knew I Loved You" by Savage Garden

Unable to 'stopPropagation'

I've been trying just about all day to add a 'quick build' function to a page. What I want it to do is to show a little popup div when they click on an image next to a link. The div will have a small form to quickly perform an action which would otherwise have to go through a couple of pages first.

I've been able to get it to show when the image is clicked, however when I try to make it disappear when the user clicks anywhere else on the page, it makes it disappear even when clicked inside the div. I can't seem to figure out how LiveJournal does it here with "AJAX" comment management.

The code uses the X Library from cross-browser.com to make it cross-browser compliant. If you haven't heard of it, it basically allows you to call one function and get the same result across different browsers. Any function that begins with x is from that library.

<script language="JavaScript">
<!--
	function quickbuild (building_id, obj)
	{
		offset_x = -5;
		offset_y = +5;
		
		pos_x = xPageX(obj) + offset_x;
		pos_y = xPageY(obj) + xHeight(obj) + offset_y;
		
		if (pos_x < 0)
		{
			pos_x = 0;
		}
		
		xVisibility('qbdiv', true);
		xMoveTo('qbdiv', pos_x, pos_y);
		return true;
	}
	
	function document_click ()
	{
		xVisibility('qbdiv', false);
		return true;
	}
	
	function qbdiv_click ()
	{
		xStopPropagation(window.event);
		return true;
	}
	
	xAddEventListener(xGetElementById('qbdiv'), 'click', qbdiv_click, true);
	xAddEventListener(document, 'click', document_click, true);
// -->
</script>

<div id="qbdiv" name="qbdiv" style="position: absolute; visibility: hidden;">
	<form method="post" action="buildings.php" name="multiform" id="multiform">
	<input name="planet_id" type="hidden" value="1" />
	<input name="building_id" type="hidden" value="" />
	<table class="forumline" cellspacing="1" cellpadding="4" border="0">
		<tr>
			<td>
				<b>Cranes:</b> <input name="cranes" id="cranes" width="3" maxlength="3" /> <b>x</b> <input name="planning" id="planning" width="3" maxlength="3" />
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" name="build" value="Build" id="build" onClick="submitform();">
			</td>
		</tr>
	</table>
	</form>
</div>

<a onClick="quickbuild('4', this);"><img src="" witdth="16" height="16"></a>

LJ Video