Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    onmouseover issue

    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:
    Code:
        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;
        }
    Last edited by wldrumstcs; 04-09-2010 at 10:22 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Is it possibly because your HTML is illegal???

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

    Where's the </a> tags???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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:

    Code:
        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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    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

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Ahh...of course....

    LOL!

    Easy fix:
    Code:
        function resumeScroll()
        {
            if ( maybeStop != null ) clearTimeout( maybeStop );
            if ( timerIsOn != 0 ) return;
            timerIsOn = 1;
            startScroll();
        }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Ehhh...never mind. Doesn't work at all.

    Sorry.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Okay, fixed. Works in MSIE and FF, at least.

    You were just overcomplicating it.

    Code:
    <!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 ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    wldrumstcs (04-09-2010)

  • #10
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Lol Pendant. I literally figured it out right after you did. Thank you so much for the help! I appreciate it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •