scroller flashing cursor

glenmac · Nov 16, 2006

I have a scroller working on my page, the ploblem is that I want the hand cursor to show over a link.
I realize usng setTimeout will cause the cursor to flash so I want to stop the scrolling on Mouseover.
here's my feeble attempt;
js file

Code:

var DefScrollSpeed = 1;
var DefScrollDirection = 'horizontal'; // (horizontal, vertical)


function BGScroller(ID, SD, SS, BG)
{
	Elem = GetElem(ID);
	if(!Elem)
	{
		return false;
	}
	else
	{
		if(BG)
		{
			Elem.style.backgroundImage = 'url("' + BG + '")';
		}
		SS =  SS ? SS : DefScrollSpeed;
		SD =  SD ? SD : DefScrollDirection;
		BGScroll(ID, SD, SS, 0);
	}
}
function BGScroll(ID, SD, SS, Pos)
{
	Elem = GetElem(ID);
    Elem.style.backgroundPosition = (SD == 'horizontal') ? Pos++ : '0 ' + Pos++;
    window.setTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}
function BGScrollerInit()
{

	BGScroller("logoCont", 'horizontal', 100, 'images/bannerbg.jpg');
}
function GetElem(ID)
{
	return document.all ? document.all[ID] : (document.getElementById(ID) ? document.getElementById(ID) : false);
}

function stopScroll()
{
clearTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}

here's my html file

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ezras Soccer World</title>
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="JScript/scroll.js"TYPE="text/javascript"></SCRIPT>
<link rel="stylesheet" href="soccer.css" type="text/css">
<script LANGUAGE="JAVASCRIPT">
// preload image background
Image1=new Image(1062,187);
Image1.src="images/bannerbg.jpg";
</script>
</head>
<body onLoad="BGScrollerInit()">
<div id = "logoCont"> 
	<a href = "[URL unfurl="true"]http://www.microsoft.com"[/URL] target = "_blank">
	<div id = "logo1" onMouseOver = "stopScroll()">test1</div></a>
	<div id = "logo2">test2</div>
</div>
</body>
</html>

Any help would be much appreciated the page can been seen at

http://lantzvillecomputers.com/soccer

Glen

http://lantzvillecomputers.com

kaht · Nov 16, 2006

I copied/pasted your code into a new html file and switched a few things around. I pasted the .js file directly into the page so that I could test it all from one file. Here's what I had:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ezras Soccer World</title>
<link rel="stylesheet" href="soccer.css" type="text/css">
<script type="text/javascript">
// preload image background
//Image1=new Image(1062,187);
//Image1.src="images/bannerbg.jpg";

var DefScrollSpeed = 1;
var DefScrollDirection = 'horizontal'; // (horizontal, vertical)


function BGScroller(ID, SD, SS, BG)
{
    Elem = GetElem(ID);
    if(!Elem)
    {
        return false;
    }
    else
    {
        if(BG)
        {
            Elem.style.backgroundImage = 'url("' + BG + '")';
        }
        SS =  SS ? SS : DefScrollSpeed;
        SD =  SD ? SD : DefScrollDirection;
        BGScroll(ID, SD, SS, 0);
    }
}
function BGScroll(ID, SD, SS, Pos)
{
    Elem = GetElem(ID);
    Elem.style.backgroundPosition = (SD == 'horizontal') ? Pos++ : '0 ' + Pos++;
    window.setTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}
function BGScrollerInit()
{

    BGScroller("logoCont", 'horizontal', 100, 'images/bannerbg.jpg');
}
function GetElem(ID)
{
    return document.all ? document.all[ID] : (document.getElementById(ID) ? document.getElementById(ID) : false);
}

function stopScroll()
{
clearTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}

</script>
</head>
<body onLoad="BGScrollerInit()">
<div id = "logoCont">
    <a href = "[URL unfurl="true"]http://www.microsoft.com"[/URL] target = "_blank">
    <div id = "logo1" onMouseOver = "stopScroll()">test1</div></a>
    <div id = "logo2">test2</div>

</div>
</body>
</html>

A few things I noticed:

1) I commented out the image1 declaration because it was referenced nowhere else in the code.

2) When mousing over the link it tries calling the stopScroll function, which references these variable names: (ID, SD, SS, and Pos) but they are not passed to the function so it has no clue what they are.

3) In your line that imports the .js file (which I removed in my code) left out a space which makes your src declaration all run together:

Code:

<SCRIPT LANGUAGE="JAVASCRIPT" SRC="JScript/scroll.js"[COLOR=black yellow] [/color]TYPE="text/javascript"></SCRIPT>

4) On your link to microsoft you place a div inside the anchor. Anchors are inline level elements, and divs are block level elements. You cannot place a block level element inside an inline level element. Use span instead of div, or better yet just assign the mouseover event to the anchor itself and get rid of the div altogether

(this has nothing to do with the javascript, and is not making your page break - but will cause problems with HTML validation later)

Now.... when I copied and pasted your code I did not notice any scrolling. From the code it appears that an image is what moves, so I was not able to replicate it. However, I think the big problem you're having is that your stopScroll function does not have valid scope for the variables you are referencing and that should fix your problem.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

scroller flashing cursor

glenmac

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor