Forum:

HTML Pages with CSS and JavaScript

cursor position in iframe

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

How can we find the cursor position inside iframe.

please help..

thank you.

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This an editable thing or you want to know the mouse coordinates? Not sure with the limited details you gave.

Eric

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I wanted to get the cursor position in my iFrame which is relative to the iframe walls...

Actually we use 'href' attribute in iFrame to tell the content we want in side iframe.

I specified the path to an html page... then I used the below mentioned code
and I was able to get the cursor position in any browser: (IE, Mozilla, Safari).

By the way thank you Eric for your concern..

the code:

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

FYI:

Normally people say cursor position when they are talking about textareas and textboxes.
They say mouse position when it is the X/Y coordinates on the page.

Eric

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Your code is a little outdated in how it detects browsers. When coding JavaScript it should be sniffin support for objects,methods and properties that you are going to use.

There is a nice example here on http://www.quirksmode.org/js/events_properties.html.

Eric

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you Eric ...

I visited the link, I got the required information.. but neither my code mentioned above nor the code help in the given link allowing cross browser compatibility...

Below I am specifying all code I am using ... It is running successfully on IE & Safari but not on Mozilla & Netscape.

Please help me to make changes to allow the desired output on all browser.

Details: I am using three files - temp1.html, tooltip.css & tooltipz.html.

temp1.html:

tooltip.css:

tooltipz.html

<html>
	<head>
		<title>Tool Tip</title>
		<link rel="stylesheet" type="text/css" href="tooltip.css" />
		<script type="text/javascript" language="javascript">
			var tempX = 0; // cursor x - y position....
			var tempY = 0;				
			
			var IE = document.all?true:false;
			if (!IE) document.captureEvents(Event.MOUSEMOVE);
			function getMouseXY(e) {			
					if (IE) { 
						tempX = event.clientX + document.body.scrollLeft;
						tempY = event.clientY + document.body.scrollTop;
					} else {  
						tempX = event.clientX;
						tempY = event.clientY;
					}  					
					
					//alert(tempX);
					//if (tempX < 0){tempX = 0;} // cursor x
					//if (tempY < 0){tempY = 0;} // cursor y  
					
					//alert(tempX+" "+tempY);

return true;
			}

function popupcreate(){
				var bodyObj = document.getElementsByTagName('body')[0];

//alert(tempX+" "+tempY+"---");	
				if(document.getElementById('tooltip1')==null){
					var divObj1 = document.createElement('div');
					divObj1.id = "tooltip1";
					divObj1.innerHTML = "This a trial content<br> Just to check that that it can function properly";

var divObj2 = document.createElement('div');
					divObj2.id = "tooltip2";	
					divObj2.innerHTML = '<img src="close.gif" id="img1" onclick="popclose()">';
					divObj1.appendChild(divObj2);

bodyObj.appendChild(divObj1);

//getting cursor postion..			
					//-------------------------------------			
					var clientWidth = document.body.clientWidth; // client width & Height.....
					var clientHeight = document.body.clientHeight;

function popclose(){
				var bodyObj = document.getElementsByTagName('body')[0];
		
				var popElm = document.getElementById('tooltip1');
				bodyObj.removeChild(popElm);
			}			
		</script>
	</head>

This entire code is running properly on IE & Safari but not on Mozilla & Netscap...
Please any buddy help me resolve the problem..

Thank you.

ramnna jain

Ranch Hand

Posts: 129

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is the real code..

Any buddy facing the problem to get the mouse position & successfully run on any browser(IE, Mozilla, Netscap, Safari) please use this given link:

http://www.codingforums.com/archive/index.php/t-87134.html

I want to show How I made changes in my above given code:

temp1.html:

tooltip.css:

tooltipz.html

return true;
			}

//----------------------------------

var zxcEvt=0;

function zxcAddEvt(zxcobj,zxcfun,zxcevt){
						if (zxcobj[zxcevt+'add']){ return; }
						zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
						zxcobj[zxcevt+'add']=true;
						zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
						zxcEvt++;
					}

zxcAddEvt(document,'zxcDrag','mousemove');

//---------------------------------

function popupcreate(){
				var bodyObj = document.getElementsByTagName('body')[0];

var divObj2 = document.createElement('div');
					divObj2.id = "tooltip2";	
					divObj2.innerHTML = '<img src="close.gif" id="img1" onclick="popclose()">';
					divObj1.appendChild(divObj2);

bodyObj.appendChild(divObj1);

function popclose(){
				var bodyObj = document.getElementsByTagName('body')[0];
		
				var popElm = document.getElementById('tooltip1');
				bodyObj.removeChild(popElm);
			}			
		</script>
	</head>

Why fit in when you were born to stand out? - Seuss. Tiny ad:

Free, earth friendly heat - from the CodeRanch trailboss

https://www.kickstarter.com/projects/paulwheaton/free-heat