1 reply [Last post]
jmargey
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2004-08-04
Posts: 1
Points: 0

Hi all

Being using CSS ,javascript and the dom to develop a scroller. Everthing seems fine in all the other browsers i am aiming at apart from ie 5.0, the problem being the text wraps if it is wider than the container. Any suggestions - source below.

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT LANGUAGE="Javascript">
<!--
var timerID;
var Location;
/* Function to start and stop scrolling */
function scroll(type)
{
if (type == 'start') {
scrollIt(343, 15, 100);
}
if (type == 'stop') {
var stopLocation = document.getElementById('scrollerText');
Location = stopLocation.style.left
if (timerID != null) clearTimeout(timerID);
}
if (type == 'restart') {
reScrollIt(Location, 15, 100);
}
}
/* Function that does the actually scrolling */
function scrollIt(Left, dx, speed)
{
var text = document.getElementById('scrollerText');
Left -= dx;
text.style.left = Left + "px";
if (Left > -1500)
timerID = setTimeout("scrollIt(" + Left + ", " + dx + ", " + speed + ")", speed);
if (Left <= -1500)
clearText();
}
/* Function that does the actually restart scrolling after pause*/
function reScrollIt(Left, dx, speed)
{
var strlength;
strlength = Left.length;
var pixel = Left.substring(0,strlength-2);
var text = document.getElementById('scrollerText');
pixel -= dx;
text.style.left = pixel;
if (pixel > -1500)
timerID = setTimeout("scrollIt(" + pixel + ", " + dx + ", " + speed + ")", speed);
}
/* Function to reset the text layer for next scroll */
function clearText()
{
var el = document.getElementById('scrollerText');
/* Reposition the scrolling text */
el.style.left = 343 + "px";
scroll('start');
}
//-->
</script>
<STYLE TYPE="text/css">
<!--
#scroller {
width: 343px;
margin:4px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: black 1px solid;
FONT-WEIGHT: bold;
font-family: Arial, Helvetica, sans-serif;
font-size:small;
font-style:italic;
color:#096;
visibility:visible;
overflow: hidden;
clip: rect(auto auto auto auto);

position: relative;
background-color:#ffc;

}
#scrollerText {
/*width: 100%; */
white-space:nowrap;
position: relative;

}
-->
</STYLE> </head>

<body onload="scroll('start');">
<div id="scroller">
<div id="scrollerText" onmouseover="scroll('stop');" onmouseout="scroll('restart');">Important Notices: <a

href="ddd.htm">Thank you for visiting our web site. Thank you for visiting our web site.</a>
</div>
</div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

ie 5.0 problem text wraps!!

Hi jmargey,
Have you tried using overflow-x and overflow-y they are IE only but may fix your problem.

Hope that helps