Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

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

    Image following the mouse

    And I know I can just copy and paste, but I want to learn how it works..... Any ideas?
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #2
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    B.U.M.P come on guys I really need your help please
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #3
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Qwik ContextMenu Sample with Comments

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •