jeanpaul1979
12-05-2007, 10:03 PM
Here's the situation: I want the Catfish (http://www.sitepoint.com/blogs/2005/10/18/the-catfish-part-1) popup invented by sitepoint to popup when a visitors cursor moves to the top outside of the website canvas.The Catfish popup is available as a jQuery Plugin (http://www.jqueryplugins.com/plugins/version/1/), that's what I'm using now.
I have found one script that observes the cursor position. But when I use it together with Catfish it stops working. I suspect it is because the onload event that is, overwritten? Either way, I can't find a way to fix this. I'm a very green JS programmer though...so I hope someone can help me with this.
The cursor observer snippet-script I'm using can be seen in action here: http://www.hscripts.com/scripts/JavaScript/cursor-position.php
I have hosted all the files (3) linked together if someone wants to do live testing here: http://trendhits.com/test.rar
And here is the short html page including both scripts:
Please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Catfish Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.catfish.js"></script>
<style type="text/css">
div#catfish {
display: none; /* Stops catfish appearing before the page is fully loaded */
background-color: #FFFFFF;
text-align: center;
border-top: 1px solid black;
}
div#catfish a#close {
position: absolute;
top: 5px;
right: 15px;
color: black;
}
</style>
</head>
<body>
<p>the page</p>
<!-- the cursor observer script -->
<!-- Script by hscripts.com -->
<!-- copyright of HIOX INDIA -->
<!-- more scripts @ http://www.hscripts.com -->
<form name=ee><input name=sd type=text> </input></form>
<script language=javascript>
window.onload = init;
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
document.ee.sd.value = x+":"+y;
}
</script>
<!-- end -->
<!-- remove catfish below and the cursor works -->
<div id="catfish">
<!-- CATFISH CONTENT HERE -->
<p>lololo</p>
<script type="text/javascript">
<!--
// Release the cat!!!
$(window).load(function(){
$('#catfish').catfish({
closeLink: '#close',
height: 52
});
});
//-->
</script>
<a href="#" id="close">Close</a>
</div>
</body>
</html>
I have found one script that observes the cursor position. But when I use it together with Catfish it stops working. I suspect it is because the onload event that is, overwritten? Either way, I can't find a way to fix this. I'm a very green JS programmer though...so I hope someone can help me with this.
The cursor observer snippet-script I'm using can be seen in action here: http://www.hscripts.com/scripts/JavaScript/cursor-position.php
I have hosted all the files (3) linked together if someone wants to do live testing here: http://trendhits.com/test.rar
And here is the short html page including both scripts:
Please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Catfish Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.catfish.js"></script>
<style type="text/css">
div#catfish {
display: none; /* Stops catfish appearing before the page is fully loaded */
background-color: #FFFFFF;
text-align: center;
border-top: 1px solid black;
}
div#catfish a#close {
position: absolute;
top: 5px;
right: 15px;
color: black;
}
</style>
</head>
<body>
<p>the page</p>
<!-- the cursor observer script -->
<!-- Script by hscripts.com -->
<!-- copyright of HIOX INDIA -->
<!-- more scripts @ http://www.hscripts.com -->
<form name=ee><input name=sd type=text> </input></form>
<script language=javascript>
window.onload = init;
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
document.ee.sd.value = x+":"+y;
}
</script>
<!-- end -->
<!-- remove catfish below and the cursor works -->
<div id="catfish">
<!-- CATFISH CONTENT HERE -->
<p>lololo</p>
<script type="text/javascript">
<!--
// Release the cat!!!
$(window).load(function(){
$('#catfish').catfish({
closeLink: '#close',
height: 52
});
});
//-->
</script>
<a href="#" id="close">Close</a>
</div>
</body>
</html>