Personal tools
Navigation
 

Black Box technique

In searching for something as a high visibility substitute for a checkbox for very small inputs I have devised the Black Box technique In its simplest form its as attached someone else might find it useful as well This version works both in OSCAR and on the desktop.

HTML icon blackBox.htm — HTML, 2 kB (2145 bytes)

File contents

<html>
<head>
<title>BlackBox</title>

<style type="text/css">
.BlackBox {
	font-family:sans-serif;
	font-size: 14px;
	font-weight:bold; 
	text-align:center;
	height:20px; 
	width:20px;
}


</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$( ".BlackBox" ).click(function() {
		var bc = $( this ).css( "background-color" );
		if (bc=="rgb(0, 0, 0)") {
			$( this ).css( "background-color", "white" );
			$( this ).val('');
		} else {
			$( this ).css( "background-color", "rgb(0, 0, 0)" );
			$( this ).val('X'); //webkit fudge as it doesn't print background
		}

	});
	$( ".BlackBox" ).keypress(function(event) {
		// any key press except tab will constitute a value change to the checkbox
		if (event.which != 0){
			$( this ).click();
			return false;
		}
	});
});
</script>
</head>
<body  width="750px" >
<form method="post" action="" name="Resp" id="Resp" >

<div style="position:absolute; left:10px; top:10px;">
Click or Enter a Key Here to turn the box black
<input name="X3" id="X3" type="text" class="BlackBox" value="">
</div>

<input name="X5" id="X5" type="text" class="BlackBox" style="position:absolute; left:142px; top:69px; width:60px; height:60px; " value="">


<input name="X7" id="X7" type="text" class="BlackBox"style="position:absolute; left:255px; top:243px; width:12px; height:12px; " value="">



 <div class="DoNotPrint" style="position: absolute; top:385px; left:0px;">

	<table>		<tr><td> <div id="faxControl">&nbsp;</div></td></tr>
			<tr><td>Subject: <input name="subject" size="40" type="text"><br>
			<input value="Submit" name="SubmitButton" id="SubmitButton" type="submit"> 
		 	<input value="Reset" name="ResetButton" id="ResetButton" type="reset" "> 
			<input value="Print" name="PrintButton" id="PrintButton" type="button" onclick="window.print();"> 
			<input value="Print & Submit" name="PrintSubmitButton" id="PrintSubmitButton" type="button" onclick="window.print();setTimeout('SubmitButton.click()',1000);"> 
			<br>
			<div id="LOCAL" name="LOCAL">	</div>
	 </td></tr></table>
 </div>
 </form>

</body>
</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)