PDA

View Full Version : mouse follower in conflict with Firefox

arampro
07-06-2007, 03:03 PM
Hello,

I found this nice script to put anything next to my mouse. It works in Internet Explorer, Opera and Safari, burt it does not work in firefox. I think that the problem has something to do with "getElementById", but It could also be something else.
Could someone please help? :(
thanks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mouse follower</title>
<!-- Start of mouse follower script -->
<script type="text/javascript">
<!--
function doMouseMove()
{
curicon.style.pixelLeft=event.clientX-68
curicon.style.pixelTop=event.clientY-66
}
document.onmousemove=doMouseMove;
// -->
</script>
<!-- End of mouse follower script -->

</head>
<body>
<!-- Start of mouse follower -->
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2">
<!-- Put anything here and it will go be-side the mouse. -->
hello
</div>
<!-- End of mouse follower -->

</body>
</html>
Kor
07-10-2007, 08:44 AM
There are a lot of errors in your code:

1. All the document's objects must have as a root the document object
2. the reference method in case of an element with an id is getElementById()
3. Mozilla has other syntax to capture the events and other properties of the document/window object, regarding the mouse and the scrollbar position
4. You should consider the possible scroll of the page, thus you need to compensate it
5. IE works both in quirk and in standard mode. IE 5 has an old syntax to refer the body of the document
6. The standard CSS attributes for the XY positions are left and top, so that the corresponded javascript on-the-fly attributes are the same (not pixelLeft nor pixelTop)
7. The CSS attributes which values are space related (width, height, left, top, size, a.s.o....) need a measurement unit (except the 0 value, which, of course, remains 0, no matter the measurement unit), pixels ('px') in your case

Here's your corrected code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-68)+'px';
mydiv.style.top=(posy-66)+'px';
}
document.onmousemove=doMouseMove
</script>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2">
hello
</div>
</body>
</html>
arampro
07-10-2007, 10:43 AM
Thanks alot for your reply kor,
it does work :)
I have taken this solution and combined it with "jquery". Jquery has a nice element called "fisheye".
this works fine on firefox and opera, but not on internet explorer (7).

I really don't have any idea why that is. Does anybody maby know the answer? :S

thnks,

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="http://www.dejongensopdehoek.nl/tigges/extern/style.css" rel="stylesheet" type="text/css" />
<title>Wat is jouw achtergrond?</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

<script type="text/javascript">
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-68)+'px';
mydiv.style.top=(posy-66)+'px';
}
document.onmousemove=doMouseMove;
</script>


</head>

<body>

<!-- Start of mouse follower -->
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2">
<!-- Put anything here and it will go be-side the mouse. -->
HELLO
</div>
<!-- End of mouse follower -->



<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="bigimg/1.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/2.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
<a class="dock-item" href="bigimg/3.jpg"><img src="images/portfolio.png" alt="portfolio" /><span></span></a>
<a class="dock-item" href="bigimg/4.jpg"><img src="images/music.png" alt="music" /><span></span></a>
<a class="dock-item" href="bigimg/5.jpg"><img src="images/video.png" alt="video" /><span></span></a>
<a class="dock-item" href="bigimg/6.jpg"><img src="images/history.png" alt="history" /><span></span></a>
<a class="dock-item" href="bigimg/7.jpg"><img src="images/calendar.png" alt="calendar" /><span></span></a>
<a class="dock-item" href="bigimg/8.jpg"><img src="images/rss.png" alt="rss" /><span></span></a>
<a class="dock-item" href="bigimg/9.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/10.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
</div>
</div>

<div class="dock" id="dock2">
<div class="dock-container">
<a class="dock-item" href="bigimg/11.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/12.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
<a class="dock-item" href="bigimg/13.jpg"><img src="images/portfolio.png" alt="portfolio" /><span></span></a>
<a class="dock-item" href="bigimg/14.jpg"><img src="images/music.png" alt="music" /><span></span></a>
<a class="dock-item" href="bigimg/15.jpg"><img src="images/video.png" alt="video" /><span></span></a>
<a class="dock-item" href="bigimg/16.jpg"><img src="images/history.png" alt="history" /><span></span></a>
<a class="dock-item" href="bigimg/17.jpg"><img src="images/calendar.png" alt="calendar" /><span></span></a>
<a class="dock-item" href="bigimg/18.jpg"><img src="images/rss.png" alt="rss" /><span></span></a>
<a class="dock-item" href="bigimg/19.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/20.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
</div>
</div>

<div class="dock" id="dock3">
<div class="dock-container">
<a class="dock-item" href="bigimg/21.jpg" target="_top"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/22.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
<a class="dock-item" href="bigimg/23.jpg"><img src="images/portfolio.png" alt="portfolio" /><span></span></a>
<a class="dock-item" href="bigimg/24.jpg"><img src="images/music.png" alt="music" /><span></span></a>
<a class="dock-item" href="bigimg/25.jpg"><img src="images/video.png" alt="video" /><span></span></a>
<a class="dock-item" href="bigimg/26.jpg"><img src="images/history.png" alt="history" /><span></span></a>
<a class="dock-item" href="bigimg/27.jpg"><img src="images/calendar.png" alt="calendar" /><span></span></a>
<a class="dock-item" href="bigimg/28.jpg"><img src="images/rss.png" alt="rss" /><span></span></a>
<a class="dock-item" href="bigimg/29.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/30.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
</div>
</div>

<div class="dock" id="dock4">
<div class="dock-container">
<a class="dock-item" href="bigimg/31.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/32.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
<a class="dock-item" href="bigimg/33.jpg"><img src="images/portfolio.png" alt="portfolio" /><span></span></a>
<a class="dock-item" href="bigimg/34.jpg"><img src="images/music.png" alt="music" /><span></span></a>
<a class="dock-item" href="bigimg/35.jpg"><img src="images/video.png" alt="video" /><span></span></a>
<a class="dock-item" href="bigimg/36.jpg"><img src="images/history.png" alt="history" /><span></span></a>
<a class="dock-item" href="bigimg/37.jpg"><img src="images/calendar.png" alt="calendar" /><span></span></a>
<a class="dock-item" href="bigimg/38.jpg"><img src="images/rss.png" alt="rss" /><span></span></a>
<a class="dock-item" href="bigimg/39.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/40.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
</div>
</div>

<div class="dock" id="dock5">
<div class="dock-container">
<a class="dock-item" onclick="" href="bigimg/41.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/42.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
<a class="dock-item" href="bigimg/43.jpg"><img src="images/portfolio.png" alt="portfolio" /><span></span></a>
<a class="dock-item" href="bigimg/44.jpg"><img src="images/music.png" alt="music" /><span></span></a>
<a class="dock-item" href="bigimg/45.jpg"><img src="images/video.png" alt="video" /><span></span></a>
<a class="dock-item" href="bigimg/46.jpg"><img src="images/history.png" alt="history" /><span></span></a>
<a class="dock-item" href="bigimg/47.jpg"><img src="images/calendar.png" alt="calendar" /><span></span></a>
<a class="dock-item" href="bigimg/48.jpg"><img src="images/rss.png" alt="rss" /><span></span></a>
<a class="dock-item" href="bigimg/49.jpg"><img src="images/home.png" alt="home" /><span></span></a>
<a class="dock-item" href="bigimg/50.jpg"><img src="images/email.png" alt="contact" /><span></span></a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 80,
halign : 'center'
}
)

$('#dock2').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 80,
halign : 'center'
}
)
$('#dock3').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 80,
halign : 'center'
}
)
$('#dock4').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 80,
halign : 'center'
}
)
$('#dock5').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 80,
halign : 'center'
}
)

}
);

</script>
</body>
</html>
Kor
07-10-2007, 10:57 AM
I doubt you need an XHTML content (do you really inted to work with XML?), thus I suggest you to replace the Doctype.

Replace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or a strict HTML one (google for Doctype to see what's all about)

In case you need an XHTML doctype by all means, close all the "empty" elements (meta as well, in your case) and isolate the embeded javascript code into CDATA islands, to avoid conflicts with the XML interpretor:

<script type="text/javascript">
/*<![CDATA[*/
... your code here ...
/*]]>*/
</script>
arampro
07-10-2007, 02:44 PM
Hi, Kor,
Thanks for the advise. I belive I have done what you suggested me, but the result is the same! I've tried both methods; the HTML and the XML advise.
I've also tried other Doctype's. still no succes

I thought It mamby has something to do with these lines:

///////////////////////////////////////

<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

//////////////////////////////////////

I need these to import the file for the "fisheye" effect. If I disable these lines then the mouse follower work perfectly (but ofcourse the fisheye effect does not).

Do you maybe know why the javascript code you gave me interfere with jquery? I thoght they are all javascript!?! Have you mayby any idea how this problem could be fixed.

I really appreciate your help. thx,
Kor
07-10-2007, 07:51 PM
could be ... If the other js files have a onmousemove event called as well as mine, there might be a conflict... I should have seen those codes as well... Can you check that?
arampro
07-11-2007, 10:41 AM
I think you were right. In de "fisheye.js" (in the attachment), line 80, they're using "function(e)". So That might give the error. My JS knowledge is not good enough to change your code.
I tried using "p" instead of "e" in your code but it didn't work at all. I hope you can help me with that.

Thanks alot for your help.
5431