responsive news ticker 100% width

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
Jason_C
php-forum Active User
php-forum Active User
Posts: 47
Joined: Sat Nov 18, 2006 7:32 am

Sun May 10, 2015 6:40 am

I have tohe following news ticker that is static in width on my live site, but wish to reuse it on the new responsive design but have it 100% width.

I tried to change the tWidth to 100% but the ticker did not show at all, if I make the tWidth 1260px then the ticker shows, but when viewed on another mobile device then the ticker splits over two lines with the scrolling text at the bottom.

How could I change the code so it stays on the same line.

Or is there another ticker that someone could suggest I try to use that works the same as this one does.

Code: Select all

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;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tbgcolour+';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";}

Code: Select all

<?php
echo ('<script type="text/javascript" src="tickerRES.js"></script>');
echo('<script type="text/javascript">');
// get data and convert the '  to   \'
//		$sql = "SELECT `ticker` FROM `ticker`";
//		$res = mysql_query($sql);
// convert all    \'    to     '		\/    to     /
//		$ticker = stripslashes(mysql_result($res, 0, "ticker")); $str = str_replace("'","\'",$ticker); $str = str_replace("/","\/",$str); $ticker = $str;
//		$ticker = removeNewLines($ticker);
$ticker = $_SESSION['newTickerText'];
echo("var content='" . $ticker . "';");
echo('</script>');
echo('
<script type="text/javascript">
window.onload = function() {
startticker();
}
</script>');
?>

Code: Select all

<div style="width: 100%; background-color: #800000; height: 25px;"><div style="float: left; color: #ffffff; font-family: verdana; font-size: 21px; /* this is height of the ticker -4 */"><?php echo(tickerTitle); ?></div><div style="float: left;"><span id="newsticker"></span></div></div><div class="clearfix"></div>
Post Reply