|
JavaScript - Cursor Coords
I need a javascript that will print out the X and Y of the mouse on the screen as I move the mouse and keep up to date. The X and the Y must also be stored in a variable.
(Trying to increase my knowledge of javascript so that I can make my web sites better and my experiments are all in making games) Similar TutorialsI have a project where I need to be able to control four things onClick. I have a set of 12 arrows (3 colors, 4 directions) and I need to specify the XY coordinate of the arrow tip and I need to call the arrow by color and direction (instead of by src). Is this something that I can do with a 2d array? My Java looks like this: function ixycoord(i,x,y) { document.images["baseimage"].src = i; if (document.getElementById) {document.getElementById("baseimage").style.top = y; document.getElementById("baseimage").style.left = x} else if (document.layers) {document.baseimage.top = y; document.baseimage.left = x} else {document.all.baseimage.style.top = y; document.all.baseimage.style.left = x} } And the HTML looks like this: <div id="baseimage"> <img id="baseimage" src="/arrowred.png"> </div> <p>This is a the <a href="#n" onClick="ixycoord('whiteup.png',49,57)"> aorta</a>. This is the <a href="#n" onClick="ixycoord('blueleft.png',145,144)"> ventricle </a> and this is the <a href="#n" onClick="ixycoord('redright.png',220,230)">pericardium</a>. </p> I have to be able to make it *NOT* have the the image source in the onClick. Thanks in advance for any help you can give me! Help! I am trying to get a ball within an image and then send the x, y coordinates to paypal. I'm almost there but the BALL.GIF wont go into the picture. Can anyone help me do this? The second script (getting the coordinates works perfectly.... I just cant figure out how to get the ball in the picture!!) Here's my code: [code] <script language="JavaScript"> function placeCrosshair(e) { var ch = document.getElementById('ball'); var pic = document.getElementById('myImg'); ch.style.left = e.x + 11; ch.style.top = e.y + 11; </script> <script language="JavaScript"> javascript&colonself.resizeTo(900,screen.availHeight);self.moveTo(40,0); var d = document; //Get the img X and Y positions with an onMouseOver event function getCoor(imgId) { x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("clickImage").offsetLeft; y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("clickImage").offsetTop; document.mypaypalform.item_name.value = "Ball position: x=" + x + "\ny=" + y; //this section writes out the coordinates on the page. var data = "<br><h3>Your selected ball position is: x =" + x + " and y =" + y + "</h3>"; if (mypaypalform.layers) { mypaypalform.layers.cust.document.write(data); mypaypalform.layers.cust.document.close(); } else { if (mypaypalform.all) { cust.innerHTML = data; } } } </script> <p></p> <a href="#" onClick="placeCrosshair(event)> <img src="ball.jpg" width="21" height="21" id="ball" /> <a href="#" onclick="getCoor('myImg')"> <img src="picture.jpg" alt="" border="0" height="600" width="850" name="myImg" ismap></a> <br><br> <h3>Click on the payment button to enter.</h3> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="mypaypalform"> <!-- Placeholder for dynamic form contents --> <span name=cust id=cust style="position:relative;"></span> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="buy@buy.co.uk"> <input type="hidden" name="item_name" value="Game - "> <input type="hidden" name="item_number" " value="1"> <input type="hidden" name="amount" value="0.50"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="lc" value="US"> <input type="hidden" name="bn" value="PP-BuyNowBF"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_paynow_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> Thank you Al i have a problem with this code when working in IE it gives me 0,0 coords when i use iframe tag and -1,-1 when i use div tag but gives correct coords when using firefox Code: unction GetRealOffset(id)
{
var elem = document.getElementById(id);
var leftOffset = elem.offsetLeft;
var topOffset = elem.offsetTop;
var parent = elem.offsetParent;
while(parent != document.body)
{
leftOffset += parent.offsetLeft;
topOffset += parent.offsetTop;
parent = parent.offsetParent;
}
var Offsets = new Object();
Offsets.top = topOffset;
Offsets.left = leftOffset;
alert(Offsets.top + " " +Offsets.left)
return Offsets;
}
i tried this code as well Code: function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
but both r giving same value in IE can u help me plz thx in advance Edit/Delete Message Hello, I am not the best JS programmer, but I was wondering... Is there a way to do this: HTML Document /w/ 2 frames, A & B. When you click a button in frame A: "Click" (X,Y coords) in frame B. If that's not possible in JS, please let me know what language I need. - Waffles I have some own cursor with a .cur file. But it's very annoying to try changing each part from the css to the new cursor. Is there no aviable script in JS or HTML or CSS or whatever there is, that i can press the link for all cursor like: Pointer, defaut, wait, stop, link and so on. So they all changes into my own? Without having those white cursor. I would like to create a caret for a textarea like the one he http://www.dynamicdrive.com/forums/s...4576#post74576 it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow: Code: <textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> I don't see anything on the screen other than the blinking cursor I've got the following html code for a button - how can I get the cursor to turn into the hand shape when the mouse is over the button? Thanks PHP Code: <INPUT NAME="btn_cancel" TYPE="button" VALUE="Cancel" onClick="cancel_button_click()";> I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). Hi, Would you please try the following in IE: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#curl").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("http://");
}
});
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<input id="cname" name="name" size="25" class="required" value="Name" />
</p>
<p>
<input id="cemail" name="email" size="25" class="required email" value="Email" />
</p>
<p>
<input id="curl" name="url" size="25" class="url" value="URL" />
</p>
<p>
<textarea id="ccomment" name="comment" cols="22" class="required">Comment</textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
As you see the cursor goes back to the beginning of the field if you focus on the URL field. It works with no problem in other browsers. How can it be corrected? Thanks for any help! Good day! In my javascript code I have a function for the enter key. I want to add cursor key in that function/ I research about the coding for cursor key but I can't find the code same on what I want to happen. Here is the code: Code: <script language="javascript">
function handleEnter(e, nextfield)
{
var characterCode = (e && e.which)? e.which: e.keyCode;
if(characterCode == 13)
{
document.getElementById(nextfield).focus();
return false;
}
else
{
return true;
}
}
</script>
<input type='text' name='plt' onkeypress='return handleEnter(event,\"b0\");' />
Thank you I have this image map and I need to change the cursor to finger on mouse over: <map name="Map" > <area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)"> <area shape="rect" coords="175,101,445,204" onClick="scr_valid(0)" > </map> Adding href (<area shape="rect" coords="175,100,445,203" onClick="scr_valid(0)" href="#" >) does not work. Any body could help please? Thank you. i need typing cursor back in first text box after clicking ok of alert [CODE] <html> <head> <script type='text/javascript'> function player() { document.getElementById("Player2").value= document.getElementById("Player1").value; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } </script> </head> <body> <form> Player:<input type="Name" id="Player1" onkeyup="player()"/> <input type="Name" id="Player2" DISABLED /> <input type='button' onclick="notEmpty(document.getElementById('Player2'), 'Please fill in player field!')" value='Submit' /> </form> </body> </html> [ICODE] Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! hello all member help me quick i am create a one form in 10 texbox. i am copy other web Url link when i am paste in textbox cursor not move automatically to the second textbox. and when paste the second textbox the cursor move the not third textbox. please help me how can move automatically cursor textbox only past. not mixmim leg using. only using paste. send completely code java script and input code quickly thanks Hi, Need to put a cursor in a password form on page load here is what I got that does not work. This will be used on a touch screen Code: <script type = "text/javascript">
var count = 2;
function validate() {
var pw = document.myform.pword.value;
var valid = false;
/*Failed attempt to put cursor in myform on page Load */
function setCursor(myform){
return set;
}
var pwArray = ["1701", "Password2", "Password3", "Password4"]; // the corresponding passwords;
for (var i=0; i <pwArray.length; i++) {
if (pw == pwArray[i]) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "030.html";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid password. You have " + count + t + " left.");
document.myform.pword.value = "";
setTimeout("document.myform.pword.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.pword.value = "";
document.myform.pword.disabled = true;
return false;
}
}
</script>
Thank you for any help. it is required to locate the typing cursor in field after when click ok on java alert thanks in advance !! Sup yo, I need to add text in a <textarea>, but i can only append text at the end. Is there any way to add text to where the cursor is currently at? Code: function addCharm(var1) {
var newtext = var1;
document.lolform.inputtext.value += newtext;
}
And below i has sum buttonz that uses that function. So, again, how can I add text to where the I-beam is currently, instead of at the end? Thanks in advance. I'm not very well versed in javascript. I'm trying to make a bookmarklet that when I click it will either append text to what I've already written or insert the predefined text at the cursor's position in a textarea. Also the browser I'm trying to do this on is Chromium. Here's what I have: Code: javascript:void((function(){document.getElementsByTagName('textarea')[0].value='ಠ_ಠ'})())
...but this of course changes the entire value of the text field to: ಠ_ಠ ...rather than appending or inserting at the cursor position. I'm guessing append would be the simplest, though cursor position would be most efficient. So if you can help in anyway, please do! Thanks. Hi all, I'd like to use the bbcode editor at http://php-login-script.com/bbdemo.php. Currently that script doesn't set the focus on the textarea after tag insertion. I've tried to to make it by inserting textarea.focus() at the end of their function, like Code: function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementById(obj);
// Code for IE
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
//alert(sel.text);
sel.text = tag1 + sel.text + tag2;
}
else
{ // Code for Mozilla Firefox
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;
var sel = textarea.value.substring(start, end);
//alert(sel);
var rep = tag1 + sel + tag2;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
textarea.scrollTop = scrollTop;
textarea.scrollLeft = scrollLeft;
}
textarea.focus();
}
But, in IE that sets the cursor the end of the last inserted tag and in FF the cursor moves at the end of the whole text in textarea. How can i set it ine between the tags(say ), after insert? Thanks. I have created a drag script and am having a problem with the cursor. When I hover over the div, the cursor becomes "move" as I want it to be. But if I click, then drag it changes to the I-beam cursor. I am wondering what I can do to get it to stay "move" or whatever I'd like it to be. I know things like onselectstart, etc, but that doesn't seem to do anything. Thanks for your time.
|
|||||||