My Programming Tricks

Caveman Blogger

I found several examples online but none of it works 100% as expected. I sort of modified them and came out with the version which works 100% for me on Chrome, IE, Safari and Firefox.

Here it is:

Enjoy!

Caveman Blogger

The firefox friendly version:

<html>
<head>

<script type="text/javascript">

var ff = (navigator.userAgent.indexOf("Firefox") != -1);

function showXY(e)
{
  if (ff) {
     var s = 'X=' + e.pageX + ' Y=' + e.pageY;
     document.getElementById('coordinates').textContent = s;
  }
  else {
     var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY;
     document.getElementById('coordinates').innerText = s;
  }
}

document.onmousemove = showXY;

</script>
</head>

<body>

<div id="coordinates"></div>

</body>
</html>

Here's the firefox friendly version. Instead of using onmousemove event capture in the body tag, it is initiated in javascript before the body. IF you initiate the event in the body tag, it won't work. A rare Firefox problem with a weird solution. But it works.

Caveman Blogger

Here they are:

<html>
<head>

<script type="text/javascript">

function showXY()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY;
document.getElementById('coordinates').innerText = s;
}

</script>
</head>

<body onmousemove=showXY()>

<div id="coordinates"></div>

</body>
</html>

The key component for this to work is highlighted in green. However this won't work in Firefox. The firefox friendly version can be found here. Sorry I wasn't aware of the Firefox problem earlier. Another way to fix this is to use JQuery.

Caveman Blogger

There are many sites in the world that are using fancy javascript functions or subroutines to deal with the dynamic CSS.

But what if we only need to control a small part of our website? Can we use a quick and dirty method without having to mess with function calls to and fro javascript engine?

Here is a simple way to do it. Put these in your <TD>:

<TABLE><TR><TD width=100 onmouseover="this.style.background='#ffdddd';this.style.cursor='pointer';" onmouseout="this.style.background='#ffeeee';" onclick="[your click destination]">CLICK</TD></TR></TABLE>

You can also change the background image dynamically using this method:

<TABLE><TR><TD width=100 onmouseover="this.style.background='url(/img/background1.gif)';this.style.cursor='pointer';" onmouseout="this.style.background='url(/img/background2.gif)';" onclick="[your click destination]">CLICK</TD></TR></TABLE>

You can also replace [your click destination] with location.href = 'http://www.yahoo.com'; or you can assign a link anchor (<A>) to the CLICK.

Cool isn't it? Wow! Now you don't need to deal with so much javascript. Whew!

Bottom line: this trick relies on onmouseover="this.style..... as shortcut to avoid javascript function calls.

My Programming Tricks

Labels

Sunday, December 30, 2012

Javascript Mouse Wheel Event Handler

Tuesday, August 21, 2012

Simple HTML/Javascript Codes to Display your Live Mouse Coordinates (Firefox Fix)

Monday, August 20, 2012

Simple HTML/Javascript Codes to Display your Live Mouse Coordinates

Friday, January 29, 2010

How do you highlight a table data (<TD>) without using fancy javascript routine?