I have the following code that shows a text ticker at the top of my page, but the bottom scroll bar shows because of the min-width being 900px, can anyone suggest what I change in this code so the overflow is not shown and the browsers view point is not bigger than the actual content.
<html><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ticker-wrapper{
background: #800000;
font-size: 21px;
font-family: Verdana;
color: #FFF;
}
#ticker-title{
float: left;
}
#ticker-text{
position: relative;
top: 0;
left: 2500px;
float: left;
}
#ticker-content{
float: left;
overflow: hidden;
background: purple;
}
#ruler{
visibility: hidden;
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="ticker-wrapper">
<div id="ticker-title"> News: </div>
<span style="width: 670px;" id="ticker-content" onmouseover="stopTicker();" onmouseout="startTicker();">
<div style="left: -720px; min-width: 774px;" id="ticker-text">I grab this from
a database table but have placed a random phrase here.</div>
<div class="clearfix"></div>
</span>
<div class="clearfix"></div>
<span id="ruler">I grab this from a database table but have placed a random phrase here.</span>
</div>
<script type="text/javascript">
var content = 'I grab this from a database table but have placed a random phrase here.';
elWidth = bodyWidth()-100;
bWidth = bodyWidth()-100;
tickerText = document.getElementById('ticker-text');
hasTimeout = null;
//### Start the Ticker if it isn't already running
function startTicker() {
if(hasTimeout == null) {
document.getElementById('ticker-text').innerHTML = content;
document.getElementById('ruler').innerHTML = content;
tickerText.style.minWidth = parseInt(document.getElementById('ruler').offsetWidth)+1;
hasTimeout = setInterval("tickTicker()", 75);
}
}
//### Stop the Ticker
function stopTicker() {
clearInterval(hasTimeout);
hasTimeout = null;
}
//### Determine the width of the body element
function bodyWidth() {
var docElemProp = window.document.documentElement.clientWidth,
body = window.document.body;
return window.document.compatMode === "CSS1Compat" && docElemProp || body && body.clientWidth || docElemProp;
}
//### Resize the ticker depending on the body width
function resizeTicker() {
bWidth = bodyWidth();
document.getElementById('ticker-content').style.width = bWidth-100; /*elWidth;*/
document.getElementById('ticker-content').style.minWidth = bWidth-100; /*elWidth;*/
}
//### Tick the Ticker
function tickTicker() {
var tickerTextLeft = parseInt(tickerText.style.left);
var tickerTextWidth = parseInt(tickerText.offsetWidth);
if(tickerTextLeft > elWidth+1) {
tickerText.style.left = elWidth;
} else if(tickerTextLeft <= -tickerTextWidth) {
tickerText.style.left = elWidth;
} else {
tickerText.style.left = tickerTextLeft-10;
}
}
//### Start Up and fire all requirements
function startUp() {
resizeTicker();
tickerText.style.left = elWidth;
startTicker();
}
//### OnLoad and OnResize
window.onload = startUp;
window.onresize = resizeTicker;
</script>
</body></html>The above is a newer code I have but previously I used…
Old code.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>
<? $ticker = "my news ticker with lots of text";
echo ('<script type="text/javascript" src="' . scriptsLocation . '/ticker.js"></script>');
echo('<script type="text/javascript">'); echo("var content='" . $ticker . "';"); echo('</script>');
echo('<script type="text/javascript">window.onload = function() {startticker();}</script>'); ?>
<style>
#myticker { width: 100%; background-color: brown; border: 0.1em solid black; }
@media screen and (max-width: 900px) {
#myticker { width: 880px; background-color: red; }
}
@media screen and (max-width: 600px) {
#myticker { width: 580px; background-color: purple; }
}
@media only screen and (max-width : 480px) {
#myticker { width: 460px; background-color: green; }
}
@media only screen and (max-width : 320px) {
#myticker { width: 300px; background-color: blue; }
}
</style>
</head><body>
<div id="myticker" style="height: 25px;"><div style="float: left; color: #ffffff; font-family: verdana; font-size: 21px; /* this is height of the ticker -4 */"><? echo(tickerTitle); ?></div><div style="float: left;"><span id="newsticker"></span></div></div><div class="clear"></div>
<script type="text/javascript">
var tWidth='670px'; // width (in pixels)
var tHeight='25px'; // height (in pixels)
/*var tbgcolour='#800000 '; // background colour:*/
var ttxtcolour='#ffffff '; // background colour:
var moStop=true; // pause on mouseover (true or false)
var fontfamily = 'verdana'; // font for content
var tSpeed=6; // scroll speed (1 = slow, 5 = fast)
// Simple Marquee / Ticker Script // copyright 3rd January 2006, Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the below code in this script (including this
// comment) is used without any alteration
var cps=tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;height:'+tHeight+';width:'+tWidth+';overflow:hidden;color:'+ttxtcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"'; tick +='><div id="mq" style="position:absolute;left:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('newsticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.left=(parseInt(tWidth)+10)+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.left = (parseInt(mq.style.left)>(-10 - aw)) ?parseInt(mq.style.left)-cps+"px" : parseInt(tWidth)+10+"px"; document.getElementById('myticker').style.width = tWidth-40; }
</script>
</body></html>Can anyone suggest what I change so I get the same effect with the old code?
The length of the text changes from day to day.