...

View Full Version : onClick event handler



evilguru
07-09-2005, 06:39 PM
Hi, I my script I have a pop-up widget, which gives auto-complete suggestions to what they are typing in, now I have got most of the selection code working, however I want to hide the box when the click anywhere that is not in the box. Can anyone help me, as I have had no luck so far. Thanks.

vwphillips
07-09-2005, 07:30 PM
using timeouts is normal

var TO;

ie document.onclick=function(){ TO=setTimeout('obj.style.visibility=\'hidden\'',200); }


now for objects which are not to hide the object require an onclick/onfocus event to call

clearTimeout(TO);

evilguru
07-09-2005, 11:31 PM
I came up with something like that, but wouldn't the onClick event fire if they click on the box, as I only want to run the function if they click outside of it.

vwphillips
07-10-2005, 10:36 AM
read this again


now for objects which are not to hide the object require an onclick/onfocus event to call

clearTimeout(TO);

evilguru
07-10-2005, 11:47 AM
Maybe I mis-phrased the question, I will post the current code that I have to give a better idea about what isn't working.


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Intellitype</title>
<style type="text/css">
.IntelliTypeItem {
font-family: tahoma, sans-serif;
font-size: 9pt;
display: block;
padding: 1px;
}
.IntelliTypeItemSelected {
padding: 0px;
font-family: tahoma, sans-serif;
font-size: 9pt;
display: block;
border: 1px dotted #000000;
background-color: #B2B4BF;
}
</style>
<script type="text/javascript">
//IntelliType Box Management
//Globals
var selected; //obj

function IntelliSet(self) {
try {
selected.className = 'IntelliTypeItem';
}
catch (e) {
}
self.className = 'IntelliTypeItemSelected';
selected = self;
}

function IntelliHide(self) {
try {
selected.className = 'IntelliTypeItem';
}
catch (e) {
}
self.style.display = 'none';
}
</script>
</head>

<body>
<div style="overflow: auto; width: 125px; height: 80px; border: 3px outset"> <!--onblur="IntelliHide(this);"-->
<span id="0" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 1</span>
<span id="1" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 2</span>
<span id="2" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 3</span>
<span id="3" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 4</span>
<span id="4" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 5</span>
<span id="5" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 6</span>
</div>
</body>

</html>

The box itself is for a javascript text editor, and that is the auto-complete function box for it (like one sees in programs like notepad++ and visual studio). However, I do not want to use a timeout, but rather when the click off anywhere out of the box. I have got that working with IE using the onblur call on my <div> but it does not work in any of the other browsers. Does anyone know how this can be done I have seen it work on many browsers on things like DHTML menus (the one on the hotmail mailbox for creating a new message for example).
Thanks for all of your help anyway.

vwphillips
07-10-2005, 01:07 PM
couple of problems

1) the onblue event can give problems with MozFF autocomplete with XP Pro, doees not appear to effect other operating systems)

2) The hide can interupt the selected index being recognised and prevent completeing the text box.

Edit had another thought

toggle the document click event when the mse over/out of the text/selectbox

evilguru
07-10-2005, 01:35 PM
You mean like when the mouseover set a global eg var inCompleteBox = 1; then have an onlclick event in the containing area which checks if they are in the div and if they are not in it then removes the box.

Well I have tried an onmouseover/out solution and it does not seem to work, does anyone have any other idea about how it can be done.

vwphillips
07-10-2005, 03:46 PM
toggle the document click event when the mse over/out of the text/selectbox


monitor the position of the mouse and txtBx and PUobj

as we appear to have a coms prob see

http://www.vicsjavascripts.org.uk/AutoComplete/Trial6.htm

evilguru
07-10-2005, 10:20 PM
Thank you very much for that link, I now have the body handle all of the clicks, it then checks what is active and gets information about where the mouse cursor is and the size of the div and if either the X or Y coord of the mouse is not in the div then it hides it. While I am sure that the extra functions that I need would be in there anyway I think that there are some parts of the code which can be improved on. If anyone has any optimizations to it please tell me.


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Intellitype</title>
<style type="text/css">
.IntelliTypeItem {
font-family: tahoma, sans-serif;
font-size: 9pt;
display: block;
padding: 1px;
}
.IntelliTypeItemSelected {
padding: 0px;
font-family: tahoma, sans-serif;
font-size: 9pt;
display: block;
border: 1px dotted #000000;
background-color: #B2B4BF;
}
</style>
<script type="text/javascript">
//IntelliType Box Management
//Globals
var selected; //obj
var globals = new Array();
var intelliTypeIsActive = true;

function IntelliSet(self) {
try {
selected.className = 'IntelliTypeItem';
}
catch (e) {
}
self.className = 'IntelliTypeItemSelected';
selected = self;
}

function IntelliHide(self) {
try {
selected.className = 'IntelliTypeItem';
}
catch (e) {
}
self.style.display = 'none';
}

function SetGlobal(index, val) {
globals[index] = val;
}

function GetElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}

function GetMousePosition(e) {
var posX = 0;
var posX = 0;
//var e = window.event;
if (e.pageX || e.pageY) {
posX = e.pageX;
posY = e.pageY;
}
else if (e.clientX || e.clientY) {
posX = e.clientX + document.body.scrollLeft;
posY = e.clientY + document.body.scrollTop;
}
return {x:posX,y:posY};
}


function ClickManager(e) {
if (intelliTypeIsActive = true) {
var position = GetElementPosition('intelliType');
var mouseCoords = GetMousePosition(e);
var intelliType = document.getElementById('intelliType');
var intelliTypeSize = {height:intelliType.style.height, width:intelliType.style.width};
if (!(mouseCoords.x > position.left && mouseCoords.x < (position.left + parseInt(intelliTypeSize.width)))
|| !(mouseCoords.y > position.top && mouseCoords.y < (position.top + parseInt(intelliTypeSize.height)))) {
intelliType.style.display = 'none';
}
/*alert('Div is: X ->' + position.left + ' Y ->' + position.top + '\n'
+ 'Div Size is: X ->' + (parseInt(intelliTypeSize.width)) + 'Y ->' + (position.top + parseInt(intelliTypeSize.height)) + '\n'
+ 'Mouse is: X ->' + mouseCoords.x + ' Y -> ' + mouseCoords.y);*/
}
}
</script>
</head>

<body onclick="ClickManager(event);"> <!-- If Opera you need to add some content as the body is only as big as it needs to be...-->
<div id="intelliType" style="overflow: auto; width: 125px; height: 80px; border: 3px outset"> <!--onblur="IntelliHide(this);"-->
<span id="0" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 1</span>
<span id="1" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 2</span>
<span id="2" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 3</span>
<span id="3" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 4</span>
<span id="4" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 5</span>
<span id="5" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 6</span>
</div>
</body>

</html>

vwphillips
07-11-2005, 07:55 AM
all code can be improved.

The code I posted has additional features requested by users.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum