Jump to content

Scroller javascript mixed with PHP


web_master

Recommended Posts

Hi,

 

I found a javascript script for a scrolling text (xhtml doc, and I cant include the marquee tag), but I must to mixed it with php code, because the text is in database.

 

Here is the code, the php code is my include:

 

/* Scroller */



// Entries

var tickerEntries = new Array(

<?php 

// Reload from dBase
$QueryReturn = mysql_query( 'SELECT * FROM `scroll` ORDER BY `scroll_id` DESC' );

// Check query
if ( !$QueryReturn ) { echo mysql_error(); exit; }

// Request query
while ($REQUEST = mysql_fetch_array ( $QueryReturn ) ) {

if ($lg == 'sr') {
	$lgLoad = $REQUEST[ 'scroll_txt_sr' ];
}

if ($lg == 'en') {
	$lgLoad = $REQUEST[ 'scroll_txt_en' ];
}

if ($lg == 'ru') {
	$lgLoad = $REQUEST[ 'scroll_txt_ru' ];
}
	echo ' " "' . $lgLoad . '" ",';
	echo '" "';
}
?>
);



//Config

var tickerWidth = 983; // width (pixels)
var tickerMargin = 0; // margin (pixels)
var tickerDelay = 30; // scrolling delay (smaller = faster)
var tickerSpacer = "  |"; // spacer between ticker entries

var tickerBGColor = "#fff"; // background color
var tickerHLColor = "#FFF0E0"; // hilight (mouse over) color

var tickerFont = "Verdana, Arial, Helvetica, san-serif"; // font family (CSS-spec)
var tickerFontSize = 12; // font size (pixels)
var tickerFontColor = "black"; // font color

var tickerBorderWidth = 0; // border width (pixels)
var tickerBorderStyle = "none"; // border style (CSS-spec)
var tickerBorderColor = "#fff"; // border color



//Function

var DOM = document.getElementById;
var IE4 = document.all;

var tickerIV, tickerID;
var tickerItems = new Array();
var tickerHeight = tickerFontSize + 8;

function tickerGetObj(id) {
  if(DOM) return document.getElementById(id);
  else if(IE4) return document.all[id];
  else return false;
}

function tickerObject(id) {
  this.elem = tickerGetObj(id);
  this.width = this.elem.offsetWidth;
  this.x = tickerWidth;
  this.css = this.elem.style;
  this.css.width = this.width + 'px';
  this.css.left = this.x + 'px';
  this.move = false;
  return this;
}

function tickerNext() {
  if(!DOM && !IE4) return;
  var obj = tickerItems[tickerID];
  if(!obj.move) {
    obj.x = tickerWidth;
    obj.css.left = tickerWidth + 'px';
    obj.move = true;
  }
}

function tickerMove() {
  if(!DOM && !IE4) return;
  for(var i = 0; i < tickerItems.length; i++) {
    if(tickerItems[i].move) {
      if(tickerItems[i].x > -tickerItems[i].width) {
        tickerItems[i].x -= 2;
        tickerItems[i].css.left = tickerItems[i].x + 'px';
      }
      else tickerItems[i].move = false;
    }
  }
  if(tickerItems[tickerID].x + tickerItems[tickerID].width <= tickerWidth) {
    tickerID++;
    if(tickerID >= tickerItems.length) tickerID = 0;
    tickerNext();
  }
}

function tickerStart(init) {
  if(!DOM && !IE4) return;
  if(tickerBGColor) {
    var obj = tickerGetObj('divTicker');
    obj.style.backgroundColor = tickerBGColor;
  }
  if(init) {
    tickerID = 0;
    tickerNext();
  }
  tickerIV = setInterval('tickerMove()', tickerDelay);
}

function tickerStop() {
  if(!DOM && !IE4) return;
  clearInterval(tickerIV);
  if(tickerHLColor) {
    var obj = tickerGetObj('divTicker');
    obj.style.backgroundColor = tickerHLColor;
  }
}

function tickerInit() {
  if(!DOM && !IE4) return;
  for(var i = 0; i < tickerEntries.length; i++) {
    tickerItems[i] = new tickerObject('divTickerEntry' + (i+1));
  }
  var obj = tickerGetObj('divTicker');
  obj.style.width = tickerWidth + 'px';
  obj.style.visibility = 'visible';
  tickerStart(true);
}

function tickerReload() {
  if(!DOM && !IE4) return;
  document.location.reload();
}

window.onresize = tickerReload;
window.onload = tickerInit;



//Scroll

document.write('<style> ' +
               '#divTicker { ' +
               'position: absolute; ' +
               'width: 983px; ' +
               'height: ' + tickerHeight + 'px; ' +
               'cursor: default; ' +
               'overflow: hidden; ' +
               'visibility: hidden; ' +
               (tickerBorderWidth ? 'border-width: ' + tickerBorderWidth + 'px; ' : '') +
               (tickerBorderStyle ? 'border-style: ' + tickerBorderStyle + '; ' : '') +
               (tickerBorderColor ? 'border-color: ' + tickerBorderColor + '; ' : '') +
               '} ' +
               '.cssTickerContainer { ' +
               'position: relative; ' +
               'height: ' + tickerHeight + 'px; ' +
               'margin-top: ' + tickerMargin + 'px; ' +
               'margin-bottom: ' + tickerMargin + 'px; ' +
               '} ' +
               '.cssTickerEntry { ' +
               'font-family: ' + tickerFont + '; ' +
               'font-size: ' + tickerFontSize + 'px; ' +
               'font-weight: bold; ' +
               'color: ' + tickerFontColor + '; ' +
               '} ' +
               '</style>');

document.write('<div class="cssTickerContainer">' +
               '<div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()">');

for(var i = 0; i < tickerEntries.length; i++) {
  document.write('<div id="divTickerEntry' + (i+1) + '" class="cssTickerEntry" ' +
                 'style="position:absolute; top:2px; white-space:nowrap">' +
                 tickerEntries[i] + ((tickerEntries.length > 1) ? ' ' + tickerSpacer + ' ' : '') +
                 '</div>');
}
document.write('</div></div>');


 

The array in javascript must looks like this:

 

var tickerEntries = new Array(

"text1",

"text2",

"text3"

)

 

thnx in advanced

 

T

Link to comment
https://forums.phpfreaks.com/topic/187693-scroller-javascript-mixed-with-php/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.