Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text string appears on mouse click 1

Status
Not open for further replies.
ugly

ugly

Programmer
Joined
Jul 5, 2002
Messages
70
Location
GB
Hi
I would like a string to appear when a user clicks at any point in a browser window, but specifically at the point the user clicks. I know how to capture the xy coordinates of the click but am not sure how to get my string to appear at this point.
Grateful for any help Ugly
 
Sort by date Sort by votes

Using CSS positioning.

For example, if you have a DIV at the end of your page:

Code: 
<div id="floatingMessage" style="display:hidden; position:absolute;"></div>

Then you can fill it with your message, and use CSS to show and position it:

Code: 
var myDiv = document.getElementById('floatingMessage');
myDiv.style.left = <insert X coordinate here>;
myDiv.style.top = <insert Y coordinate here>;
myDiv.style.display = 'block';

Hope this helps,
Dan


 
Upvote 0 Downvote
Dan
Thank you for that, that has progressed me. My aim however is that each time a user clicks their mouse a message appears at that spot, they click again in a different spot another message appears but the the first message remains etc etc etc eventually the screen will become chocked up with these messages.
 
Upvote 0 Downvote
Wow this was kinda fun, it should get you started:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Javascript Stuff</title>
<script type='text/javascript'>
if(navigator.appName.toLowerCase().indexOf("microsoft")!=-1) document.onclick = function () {popMessage(event)};
function popMessage(e)
{	
xPos=0;yPos=0;
xPos = (e.pageX) ? e.pageX : e.clientX+document.body.scrollLeft;
yPos = (e.pageY) ? e.pageY : e.clientY+document.body.scrollTop;
dBody = document.getElementsByTagName("BODY")[0];
nDiv = document.createElement("DIV");
nDiv.appendChild(document.createTextNode("Div at "+xPos+","+yPos));
nDiv.style.position = "absolute";
nDiv.style.left = xPos+"px";
nDiv.style.top = yPos+"px";
nDiv.style.zIndex = 99;
dBody.appendChild(nDiv);
}
</script>
<body onClick="popMessage(event)">
<div>Click on me somewhere</div>
</body>
</html>

hope thath helps

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle
 
Upvote 0 Downvote
Just playing but this is what I came up with is it close to what you use?
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Javascript Stuff</title>
<script type='text/javascript'>
[COLOR=red]var mun = 0[/color]
if(navigator.appName.toLowerCase().indexOf("microsoft")!=-1) document.onclick = function () {popMessage(event)};
function popMessage(e)
{ 
[COLOR=red]var divs = new Array('first click','second click','third click');[/color] 
 
xPos=0;yPos=0;
xPos = (e.pageX) ? e.pageX : e.clientX+document.body.scrollLeft;
yPos = (e.pageY) ? e.pageY : e.clientY+document.body.scrollTop;
dBody = document.getElementsByTagName("BODY")[0];
nDiv = document.createElement("DIV");
nDiv.appendChild(document.createTextNode(divs[mun]));
nDiv.style.position = "absolute";
nDiv.style.left = xPos+"px";
nDiv.style.top = yPos+"px";
nDiv.style.zIndex = 99;
dBody.appendChild(nDiv);
[COLOR=red]if (mun <2){
mun++}
else mun=0
[/color]
}
</script>
<body onClick="popMessage(event); ">
<div>Click on me somewhere</div>
</body>
</html>

Glen 
[URL unfurl="true"]http://lantzvillecomputers.ca[/URL]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
678
gmmastros
gmmastros
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
921
coldbohemia
coldbohemia
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
914
rogerte
rogerte
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
951
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top