####################################
[> Title: Scrolling Newsticker
[> Author: Cybermaster
[> Javascript: Mioplanet.com
[> Coding: PHP+XHTML+JAVASCRIPT
[> Rev: 0.1
\_____________________________________________/
Description
A new feature. Another way to publish news. Includes a control panel to add/delete news tickers. Tickers scroll from right to left in Latest News Topic.
Preview
News Ticker preview:
Create a Scrolling News Ticker in JavaScript | Resources | Mioplanet
Control Panel:
Setup
STEP 1 (ADD NEW TABLE TO DB)
MySQL:
SQlite:
STEP 2 (CREATE JAVASCRIPT FILE)
Create htdocs/scrolling_newsticker.js
STEP 3 (ADD TOPIC TO INDEX.PHP)
Add to htdocs/index.php
STEP 4 (ADD NEW PHP FILE)
Create htdocs/scrollnews.php
STEP 5 (ADD NEWS TICKER TO LATEST NEWS)
Open htdocs/latestnews.php
-> After <? add:
OPTION 1: UNSTOPPABLE TICKER
OPTION 2: TICKER STOPS WHEN MOUSE GETS OVER :ninja:
STEP 6 (ADD LINK TO THE LAYOUT)
In this case, it's tibiacom layout.
Setting Options in the JavaScript Source Code
You can edit the file scrolling_newsticker.js and change the values for the following variables:
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
TICKER_RIGHTTOLEFT
Set to true if the text is in Arabic, Hebrew or other right-to-left writing language.
TICKER_SPEED
Set the scrolling speed. Default value is 2.
TICKER_STYLE
Set the default style for the scrolling text.
TICKER_PAUSED
When this variable is set to true, the scrolling ticker is paused.
This value can be changed at runtime, for example when the mouse is over the ticker.
:$ There you have, another script.
###########################################
Tested with Gesior Account Maker, with TibiaCom Layout. TFS 0.3.6
[> Title: Scrolling Newsticker
[> Author: Cybermaster
[> Javascript: Mioplanet.com
[> Coding: PHP+XHTML+JAVASCRIPT
[> Rev: 0.1
\_____________________________________________/
Description
A new feature. Another way to publish news. Includes a control panel to add/delete news tickers. Tickers scroll from right to left in Latest News Topic.
Preview
News Ticker preview:
Create a Scrolling News Ticker in JavaScript | Resources | Mioplanet
Control Panel:
Setup
STEP 1 (ADD NEW TABLE TO DB)
MySQL:
Code:
CREATE TABLE `z_scrolling_news` (
`id` int(11) NOT NULL auto_increment,
`header` varchar(255),
`header_color` varchar(255),
`header_bgcolor` varchar(255),
`text` text COMMENT '© Cybermaster OTland.net',
`text_bgcolor` varchar(255),
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
INSERT INTO `z_scrolling_news` (`id`, `header`, `header_color`, `header_bgcolor`, `text`, `text_bgcolor`) VALUES
(NULL, 'Example', 'blue', 'yellow', 'This a test script. If you see the words scrolling from right to left then the script is working fine. Script by Cybermaster -OTland.net', 'white');
INSERT INTO `z_scrolling_news` (`id`, `header`, `header_color`, `header_bgcolor`, `text`, `text_bgcolor`) VALUES
(NULL, 'Example No. 2', 'red', 'orange', 'Again, a noob example. Now you see another ticker coming after the first one. Script by Cybermaster -OTland.net', 'lightgreen');
INSERT INTO `z_scrolling_news` (`id`, `header`, `header_color`, `header_bgcolor`, `text`, `text_bgcolor`) VALUES
(NULL, 'Yet another one', 'blue', 'yellow', 'Already had enough? Now with another ticker you might find useful to add many tickers at once, so players will read the scrolling newsticker more closely. Script by Cybermaster -OTland.net', 'aqua');
SQlite:
Code:
CREATE TABLE "z_scrolling_news" (
"id" int(11) NOT NULL auto_increment,
"header" varchar(255),
"header_color" varchar(255),
"header_bgcolor" varchar(255),
"text" text COMMENT '© Cybermaster OTland.net',
"text_bgcolor" varchar(255),
PRIMARY KEY ("id")
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
INSERT INTO "z_scrolling_news" ("id", "header", "header_color", "header_bgcolor", "text", "text_bgcolor") VALUES
(NULL, 'Example', 'blue', 'yellow', 'This a test script. If you see the words scrolling from right to left then the script is working fine. Script by Cybermaster -OTland.net', 'white');
INSERT INTO "z_scrolling_news" ("id", "header", "header_color", "header_bgcolor", "text", "text_bgcolor") VALUES
(NULL, 'Example No. 2', 'red', 'orange', 'Again, a noob example. Now you see another ticker coming after the first one. Script by Cybermaster -OTland.net', 'lightgreen');
INSERT INTO "z_scrolling_news" ("id", "header", "header_color", "header_bgcolor", "text", "text_bgcolor") VALUES
(NULL, 'Yet another one', 'blue', 'yellow', 'Already had enough? Now with another ticker you might find useful to add many tickers at once, so players will read the scrolling newsticker more closely. Script by Cybermaster -OTland.net', 'aqua');
Create htdocs/scrolling_newsticker.js
PHP:
/* ************************************
|| Scrollnews Feature © Cybermaster ||
|| JavaScript made by Mioplanet.com ||
|| OTland.net ||
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
ticker_start();
function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}
function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
}
STEP 3 (ADD TOPIC TO INDEX.PHP)
Add to htdocs/index.php
PHP:
case "scrollnews";
$topic = "Scroll News";
$subtopic = "scrollnews";
include("scrollnews.php");
break;
STEP 4 (ADD NEW PHP FILE)
Create htdocs/scrollnews.php
PHP:
<?PHP
/****************************************
|| SCROLLNEWS FEATURE © Cybermaster ||
|| * * * * * * OTland.net * * * * * * ||
||* * * * * * * * * * * * * * * * * * *||
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
if($action == "edit_ticker") {
if($logged && $group_id_of_acc_logged >= $config['site']['access_admin_panel']) {
$main_content .= '<h2>SCROLLNEWS CONTROL PANEL</h2><hr /><br/>';
$header = htmlspecialchars(stripslashes(substr(trim($_POST['header']),0,2000)));
$header_color = htmlspecialchars(stripslashes(substr(trim($_POST['header_color']),0,2000)));
$header_bgcolor = htmlspecialchars(stripslashes(substr(trim($_POST['header_bgcolor']),0,2000)));
$text = htmlspecialchars(stripslashes(substr(trim($_POST['text']),0,2000)));
$text_bgcolor = htmlspecialchars(stripslashes(substr(trim($_POST['text_bgcolor']),0,2000)));
if($_POST['updateticker'] == 1 && $logged && $group_id_of_acc_logged >= $config['site']['access_admin_panel']) {
$SQL->query("INSERT INTO `z_scrolling_news` (`id`, `header`, `header_color`, `header_bgcolor`, `text`, `text_bgcolor`) VALUES (NULL, '".$header."', '".$header_color."', '".$header_bgcolor."', '".$text."', '".$text_bgcolor."')");
$main_content .= '<div class="TableContainer" > <table class="Table1" cellpadding="0" cellspacing="0" > <div class="CaptionContainer" > <div class="CaptionInnerContainer" > <span class="CaptionEdgeLeftTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> <span class="CaptionEdgeRightTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> <span class="CaptionBorderTop" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span> <span class="CaptionVerticalLeft" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span> <div class="Text" >Added New Ticker</div> <span class="CaptionVerticalRight" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span> <span class="CaptionBorderBottom" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span> <span class="CaptionEdgeLeftBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> <span class="CaptionEdgeRightBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> </div> </div> <tr> <td> <div class="InnerTableContainer" > <table style="width:100%;" ><tr><td>Your news ticker has been published.</td></tr> </table> </div> </table></div></td></tr><br><center><table border="0" cellspacing="0" cellpadding="0" ><form action="?subtopic=scrollnews&action=edit_ticker" method="post" ><tr><td style="border:0px;" ><div class="BigButton" style="background-image:url('.$layout_name.'/images/buttons/sbutton.gif)" ><div onMouseOver="MouseOverBigButton(this);" onMouseOut="MouseOutBigButton(this);" ><div class="BigButtonOver" style="background-image:url('.$layout_name.'/images/buttons/sbutton_over.gif);" ></div><input class="ButtonText" type="image" name="Back" alt="Back" src="'.$layout_name.'/images/buttons/_sbutton_back.gif" ><br/></div></div></td></tr></form></table></center>';
}
else
{
$main_content .= '<form action="?subtopic=scrollnews&action=edit_ticker" method=post><div class="TableContainer"><table class="Table1" cellpadding="0" cellspacing="0" ><div class="CaptionContainer" > <div class="CaptionInnerContainer" > <span class="CaptionEdgeLeftTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span><span class="CaptionEdgeRightTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span><span class="CaptionBorderTop" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span><span class="CaptionVerticalLeft" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span> <div class="Text" >[+] Add a ticker</div> <span class="CaptionVerticalRight" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span> <span class="CaptionBorderBottom" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span> <span class="CaptionEdgeLeftBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> <span class="CaptionEdgeRightBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span> </div> </div> <tr> <td> <div class="InnerTableContainer" > <table style="width:100%;" ><tr><td class="LabelV" >Ticker Title:</td><td style="width:100%;" ><input name="header" value="" size="30" maxlength="50" ></td></tr><tr><td class="LabelV" ><a href="http://www.w3schools.com/HTML/html_colornames.asp">Title Font Color:</a></td><td style="width:100%;" ><input name="header_color" value="" size="15" maxlength="30" > ex. orange, aqua, #F0F8FF</td></tr> <tr><td class="LabelV" ><a href="http://www.w3schools.com/HTML/html_colornames.asp">Title BG Color:</a></td><td style="width:100%;" ><input name="header_bgcolor" value="" size="15" maxlength="30" ></td></tr><td class="LabelV" ><span>Ticker Text:</span></td><td style="width:100%;"><textarea name="text" rows="6" cols="45" wrap="virtual"></textarea></td></tr> <tr><td class="LabelV" ><a href="http://www.w3schools.com/HTML/html_colornames.asp">Ticker Text BGColor:</a></td><td><input name="text_bgcolor" value="" size="15" maxlength="30" ></td></tr></table> </div> </table></div></td></tr><table width="100%"><tr align="center"><td><table border="0" cellspacing="0" cellpadding="0" > <tr><td style="border:0px;" ><input type="hidden" name="updateticker" value="1" > <div class="BigButton" style="background-image:url('.$layout_name.'/images/buttons/sbutton.gif)" > <div onMouseOver="MouseOverBigButton(this);" onMouseOut="MouseOutBigButton(this);" > <div class="BigButtonOver" style="background-image:url('.$layout_name.'/images/buttons/sbutton_over.gif);" ></div> <input class="ButtonText" type="image" name="Submit" alt="Submit" src="'.$layout_name.'/images/buttons/_sbutton_submit.gif" ></div></div></td> <tr></form></table></td><td><table border="0" cellspacing="0" cellpadding="0" ></table></td></tr></table>';
}
$news = $SQL->query('SELECT * FROM `z_scrolling_news` ORDER BY `id`;');
$main_content .= '<br/><h2>[-] Delete a ticker</h2><br/><div style="height:200px;width:530px;font:12px/16px Georgia, Garamond, Serif;overflow:scroll;"><table width="100%" border="0" cellpadding="0" cellspacing="1"><tr bgcolor="'.$config['site']['vdarkborder'].'" align="left"><td><strong><span style="color:white;">ID</span></strong></td><td align="center"><span style="color:white;"><strong>Header</strong></span></td><td align="center"><span style="color:white;"><strong>Text</strong></span></td><td align="center"><span style="color:white;"><strong>Action</strong></span></td></tr>';
foreach ($news as $ticker)
{$order++;
if(is_int($order / 2)) $bgcolor = $config['site']['darkborder']; else $bgcolor = $config['site']['lightborder'];
$text = $ticker['text'];
$header = $ticker['header'];
if (strlen($text) > 50) $text = substr($text, 0, strrpos(substr($text, 0, 50), ' ')) . '...';
if (strlen($header) > 15) $header = substr($header, 0, strrpos(substr($header, 0, 15), ' ')) . '...';
$main_content .= '<tr bgcolor="'.$bgcolor.'"><td>'.$ticker['id'].'<br/></td><td>'.$header.'<br/></td><td>'.$text.'<br/></td><td><a href="?subtopic=scrollnews&action=remove_ticker&id='.$ticker['id'].'" onclick="return confirm(\'Are you sure that you want remove this ticker? \')"><span style="color:red">[DELETE]</span></a></td></tr>';
}
$main_content .= '</table></div>';
}
else
$main_content .= 'You are not logged in or you are not authorized to access this page.';
}
if($action == 'remove_ticker') {
if($logged && $group_id_of_acc_logged >= $config['site']['access_admin_panel']) {
$id = (int) $_REQUEST['id'];
$tickerr = $SQL->query("SELECT `id` FROM `z_scrolling_news` WHERE `id` = ".$id." LIMIT 1")->fetch();
if($tickerr['id'] == $id){
$SQL->query("DELETE FROM `z_scrolling_news` WHERE `id` = ".$tickerr['id']);
header('Location: ?subtopic=scrollnews&action=edit_ticker');
}
else
$main_content .= 'Ticker with ID '.$id.' does not exist. Could not perform deletion.';
}
else
$main_content .= 'You are not logged in or you are not authorized to access this page.';
}
?>
STEP 5 (ADD NEWS TICKER TO LATEST NEWS)
Open htdocs/latestnews.php
-> After <? add:
OPTION 1: UNSTOPPABLE TICKER
PHP:
/****************************************
|| SCROLLNEWS FEATURE © Cybermaster ||
|| * * * * * * OTland.net * * * * * * ||
||* * * * * * * * * * * * * * * * * * *||
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
$news = $SQL->query('SELECT * FROM `z_scrolling_news` ORDER BY `id`;');
$main_content .= '<div id="TICKER" style="overflow:hidden;width:800px;float:left;border-top:1px solid #000000; border-bottom:1px solid #000000;">';
foreach($news as $scroll) {
$main_content .= '<span style="background-color:'.$scroll['header_bgcolor'].';color:'.$scroll['header_color'].'">'.$scroll['header'].'</span> <span style="background-color:'.$scroll['text_bgcolor'].';">'.$scroll['text'].' | ';
}
$main_content .= '</div><script type="text/javascript" src="scrolling_newsticker.js" language="javascript"></script><br/>';
/* * * * * * * * * * * * * * * * * * * * *
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
OPTION 2: TICKER STOPS WHEN MOUSE GETS OVER :ninja:
PHP:
/****************************************
|| SCROLLNEWS FEATURE © Cybermaster ||
|| * * * * * * OTland.net * * * * * * ||
||* * * * * * * * * * * * * * * * * * *||
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
$news = $SQL->query('SELECT * FROM `z_scrolling_news` ORDER BY `id`;');
$main_content .= '<div id="TICKER" style="overflow:hidden;width:800px;float:left;border-top:1px solid #000000; border-bottom:1px solid #000000;" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">';
foreach($news as $scroll) {
$main_content .= '<span style="background-color:'.$scroll['header_bgcolor'].';color:'.$scroll['header_color'].'">'.$scroll['header'].'</span> <span style="background-color:'.$scroll['text_bgcolor'].';">'.$scroll['text'].' | ';
}
$main_content .= '</div><script type="text/javascript" src="scrolling_newsticker.js" language="javascript"></script><br/>';
/* * * * * * * * * * * * * * * * * * * * *
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
STEP 6 (ADD LINK TO THE LAYOUT)
In this case, it's tibiacom layout.
PHP:
if($group_id_of_acc_logged >= $config['site']['access_admin_panel'])
echo "<a href='?subtopic=scrollnews&action=edit_ticker'>
<div id='submenu_polls' class='Submenuitem' onMouseOver='MouseOverSubmenuItem(this)' onMouseOut='MouseOutSubmenuItem(this)'>
<div class='LeftChain' style='background-image:url(".$layout_name."/images/general/chain.gif);'></div>
<div id='ActiveSubmenuItemIcon_polls' class='ActiveSubmenuItemIcon' style='background-image:url(".$layout_name."/images/menu/icon-activesubmenu.gif);'></div>
<div class='SubmenuitemLabel'><font color=\"red\">! Scrollnews CP !</font></div>
<div class='RightChain' style='background-image:url(".$layout_name."/images/general/chain.gif);'></div>
</div>
</a>";
Setting Options in the JavaScript Source Code
You can edit the file scrolling_newsticker.js and change the values for the following variables:
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
Set to true if the text is in Arabic, Hebrew or other right-to-left writing language.
Set the scrolling speed. Default value is 2.
Set the default style for the scrolling text.
When this variable is set to true, the scrolling ticker is paused.
This value can be changed at runtime, for example when the mouse is over the ticker.
:$ There you have, another script.
###########################################
Tested with Gesior Account Maker, with TibiaCom Layout. TFS 0.3.6
Last edited: