...

View Full Version : Resolved onmouseover issue



wldrumstcs
04-09-2010, 07:08 PM
I have created a scroll script that, when you mouse over the page, the scrolling stops, and it resumes when you mouseout. For some reason, my script messes up slightly when you have <p>, <a>, <span>, and <div> tags inside the main div. On that page, even if you are moused over the page, it will still try to scroll a tiny bit. This is because it thinks you have moved your mouse out of the page. I have tried adding mouseover and mouseout events to these tags to remedy the problem, but that didn't work.

Here's a link to an example with nothing but text, and it works fine:
http://www.myfsjournal.com/scroll2.php

Here's the same page, but with stuff inside of <p> and <a> tags. However, it doesn't work quite right.
http://www.myfsjournal.com/scroll1.php

You can view all the code on my page, but here's the relevant part:


var timerIsOn = 1;

window.onload = function()
{
startScroll();
var marqueeDiv = document.getElementById("marqueeDiv")
if(navigator.appName != "Microsoft Internet Explorer")
{
if(marqueeDiv != null)
{
marqueeDiv.addEventListener("mouseout",function () {resumeScroll();},false);
marqueeDiv.addEventListener("mouseover",function () {stopScroll();},false);
}

}
else
{
if(marqueeDiv != null)
{
marqueeDiv.attachEvent("onmouseout",function () {resumeScroll();},false);
marqueeDiv.attachEvent("onmouseover",function () {stopScroll();},false);
}
}
}
function startScroll()
{
if(timerIsOn == 1)
{
//if we have scrolled to the bottom
if(getScrollY() >= document.documentElement.scrollHeight - document.documentElement.clientHeight)
{
window.scroll(0,0);
}
window.scrollBy(0,1); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()',50); // scrolls every 100 milliseconds
}
}

function stopScroll()
{
clearTimeout(scrolldelay);
timerIsOn = 0;
}

function resumeScroll()
{
timerIsOn = 1;
startScroll();
}

function getScrollY()
{
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' )
{
//Netscape compliant
scrOfY = window.pageYOffset;
}
else if( document.body && document.body.scrollTop )
{
//DOM compliant
scrOfY = document.body.scrollTop;
}
else if( document.documentElement && document.documentElement.scrollTop )
{
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}

Old Pedant
04-09-2010, 07:54 PM
Why not put a fixed <div> over the *top* of the scrolling div. Greater z-index. Detect the onmouseover/out on it and have it affect the scrolling div.

If it doesn't work when the top div has transparent background, give the top div a white background but then 1% opacity.

Ugh... just realized: Then your links don't work either.

Old Pedant
04-09-2010, 07:56 PM
Is it possibly because your HTML is illegal???

<p><a href="google.com">asdflkjfffaewf</p>

Where's the </a> tags???

wldrumstcs
04-09-2010, 07:58 PM
Hi Pendant. Unfortunately, the missing </a> isn't the answer. I quickly wrote up the data displayed in the two links I posted. Obviously, I neglected to include the </a>. Nevertheless, even with them, it still isn't working. This has me all very confused.

Old Pedant
04-09-2010, 08:10 PM
Well, I agree that it seems to happen as you transition from being over the <div> to being over the <p> (or possibly <a>). As soon as you are fully over the text or fully over the blank areas, it is fully stopped. But it "ticks" as you make the transition.

Okay, so a maybe hacky fix:



var maybeStop = null;
function reallyStop( )
{
maybeStop = null;
clearTimeout(scrolldelay);
timerIsOn = 0;
}
function stopScroll()
{
if ( maybeStop != null ) return; // ??? might not be wanted/needed
maybeStop = setTimeout(reallyStop,100); // adjust time as needed?
}

function resumeScroll()
{
if ( maybeStop != null ) clearTimeout( maybeStop );
timerIsOn = 1;
startScroll();
}

Basically, you don't stop if you get a resume within XX milliseconds of the onmouseout.

I suspect somebody could, with care, hover on exactly the right spot and have it continue to scroll. But they'd have to work at it. Maybe?

wldrumstcs
04-09-2010, 08:29 PM
I get your thinking, and it's not a bad idea. However, when implemented, something went wrong. It really bogs down the computer and doesn't behave as you'd think.

http://www.myfsjournal.com/scroll1.php

Old Pedant
04-09-2010, 08:51 PM
Ahh...of course....

LOL!

Easy fix:

function resumeScroll()
{
if ( maybeStop != null ) clearTimeout( maybeStop );
if ( timerIsOn != 0 ) return;
timerIsOn = 1;
startScroll();
}

Old Pedant
04-09-2010, 08:59 PM
Ehhh...never mind. Doesn't work at all.

Sorry.

Old Pedant
04-09-2010, 09:11 PM
Okay, fixed. Works in MSIE and FF, at least.

You were just overcomplicating it.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Latest News</title>
<style type="text/css">
body {background-color:#FFFFFF;}
</style>
<script type="text/javascript">
var scrolldelay = null;

window.onload = function()
{
resumeScroll();
var marqueeDiv = document.getElementById("marqueeDiv")
if(navigator.appName != "Microsoft Internet Explorer")
{
if(marqueeDiv != null)
{
marqueeDiv.addEventListener("mouseout",function () {resumeScroll();},false);
marqueeDiv.addEventListener("mouseover",function () {stopScroll();},false);
}

}
else
{
if(marqueeDiv != null)
{
marqueeDiv.attachEvent("onmouseout",function () {resumeScroll();},false);
marqueeDiv.attachEvent("onmouseover",function () {stopScroll();},false);
}
}
}


function stopScroll()
{
if ( scrolldelay != null ) clearInterval(scrolldelay);
scrolldelay = null;
}
function resumeScroll()
{
if ( scrolldelay == null ) scrolldelay = setInterval('startScroll()',50);
}
function startScroll()
{
//if we have scrolled to the bottom
if(getScrollY() >= document.documentElement.scrollHeight - document.documentElement.clientHeight)
{
window.scroll(0,0);
}
window.scrollBy(0,1); // horizontal and vertical scroll increments
}

function getScrollY()
{
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' )
{
//Netscape compliant
scrOfY = window.pageYOffset;
}
else if( document.body && document.body.scrollTop )
{
//DOM compliant
scrOfY = document.body.scrollTop;
}
else if( document.documentElement && document.documentElement.scrollTop )
{
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
</script>
</head>
<body>
<div id="marqueeDiv" style="width:100%;height:100%;z-index:999">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p><a href="google.com">asdflkjfffaewf</a></p>
... rest same ...

wldrumstcs
04-09-2010, 09:22 PM
Lol Pendant. I literally figured it out right after you did. Thank you so much for the help! I appreciate it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum