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

06-29-2004, 08: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:


function typer() {



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


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

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

06-30-2004, 01: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!


06-30-2004, 02:12 AM

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

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

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

// Set the Container's CSS position & Z-Index to be on top

//Position the Container beside the mouse NOTE: this code sets the container in a fixed position

// Display the "new" context menu
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

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