...

View Full Version : help: how can I have a span appear where the cursor is????



DooM_MonkeY
06-29-2004, 07:54 PM
Ok, I'm trying to make a "search this page" script like on dynamic drive, but I wanted it to be hidden until someone starting typing somthing. And then I wanted it to appear right next to the cursor while you type, this is what I have so far:




<script>

function typer() {

document.getElementById('span1').style.top=screen.clientY;
document.getElementById('span1').style.left=screen.clientX;
document.getElementById('span1').style.visibility="visible";
document.getElementById('box1').focus();
}

</script>

<body onkeydown="typer()">

<span id="span1" style="visibility:hidden;"><input type="text" id="box1" style="background:black;font-weight:bold;color:white;" onblur="span1.style.visibility='hidden';"></span>



The problem I'm having is finding the cursor position, I've looked at a lot of scripts and found lots of different scripts that have the span or div appear right by the cursor. The one that is closest to what I'm looking for is this one:

http://www.codingforums.com/showthread.php?t=31555&highlight=tooltip

And I know I can just copy and paste, but I want to learn how it works..... Any ideas?

DooM_MonkeY
06-30-2004, 12:11 AM
B.U.M.P come on guys I really need your help please

sad69
06-30-2004, 12:20 AM
I dunno, I'm lazy... copy+paste and then learn what's going on. That's the best help I'm going to be today.. sorry!

Sadiq.

MindCrafter
06-30-2004, 01:12 AM
DooM_MonkeY,

Here is an example of a context menu script that I use.

The key piece to the code is the event listener "document.oncontextmenu".
This traps the current cursor position for later use.


function ShowContextMenu(e){

// Create the HTL for the "new" contextmenu to be displayed

var sMenuText='<table id=\"ContextMenu\" name=\"ContextMenu\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" bgcolor=\"#FFFFFF\" bordercolor=\"#333333\">'
sMenuText+='<tr><td style=\"background-color:black; Color: white\"><b>Message Codes<\/b><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'On\'\" class=\"On\"><td><DIV OnClick=\"InsertCode(\'<::FNAME::>,\')\">First Name<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'Off\'\" class=\"Off\"><td><DIV OnClick=\"InsertCode(\'<::FULLNAME::\>,\')\">Full Name<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'On\'\" class=\"On\"><td><DIV OnClick=\"InsertCode(\'<::SHORTDT::\> \')\">Short Date<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'Off\'\" class=\"Off\"><td><DIV OnClick=\"InsertCode(\'<::LONGDT::\> \')\">Long Date<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'On\'\" class=\"On\"><td><DIV OnClick=\"InsertCode(\'<::Survey::\> \')\">Survey Name<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'Off\'\" class=\"Off\"><td><DIV OnClick=\"InsertCode(\'<::URL::\> \')\">Survey URL<\/DIV><\/td><\/tr>'
sMenuText+='<tr onMouseOver=\"this.className=\'Highlight\'\" onMouseOut=\"this.className=\'On\'\" class=\"On\"><td><DIV OnClick=\"InsertCode(\'<::TICKETNUM::\> \')\">Tracking Number<\/DIV><\/td><\/tr><\/table>'

// Determine Browser by Event type raised
// IE and Opera will allow access to the window.event collection
// NS requires that the events or "e" be passed to the javascript function
oSourceElement=(document.all?window.event.srcElement: e.target);

// Hide the contextmenu be froe rewriting to the DOM element
document.getElementById('ContextMenu').style.visibility='hidden'

// Get the name of the form field that was right-clicked
var sField1 = new String(oSourceElement.id)

var sTargetID=sField1.slice(0,10)

// Only display the contextmenu for specific enabled fields
if ((sTargetID=='txtMsgBody'||sTargetID=='txtSubject')&&(!oSourceElement.disabled)){

// Create a temp Object fromteh DOM element
oContextMenu=document.getElementById('ContextMenu')

// Set the X/Y Coordinates for placing the context menu
// These values are captured when the event listener first captured the right mouse click
var nLeft=(document.all?document.body.scrollLeft+event.clientX+'px':e.pageX+'px')
var nTop=(document.all?document.body.scrollTop+event.clientY+'px':e.pageY+'px')

//Write the new HTM to the container
oContextMenu.innerHTML=sMenuText

// Set the Container's CSS position & Z-Index to be on top
oContextMenu.style.position='absolute'
oContextMenu.style.zIndex=100

//Position the Container beside the mouse NOTE: this code sets the container in a fixed position
oContextMenu.style.left=nLeft
oContextMenu.style.top=nTop

// Display the "new" context menu
oContextMenu.style.visibility='visible'
return false
}
}
// Create Event Listners for Right Mouse Click
// When the event is raised, the current curosr X/Y position is trapped and passed as part of the event properties
document.oncontextmenu=ShowContextMenu;

Place the container DIV layer at the bottom of the page
<div id="ContextMenu" name="ContextMenu" style="visibility:hidden; z-index: 110"></div>


MindCrafter
www.mindcrafter.com



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum