Tag Archives: javascript

News Ticker for PhpWebSite

In this post, we will combine the two scripts described in the last two entries, namely, A Javascript News Ticker and Extending phpWebSite for mobile access, into a single script that will display in a news ticker the most recent articles of your (phpWebSite) PWS-based website. The functions defined in these two articles will be reused here with minimal modifications. So if you have not yet read these articles, this is the right time to do so. Simply click the link provided above and return here afterwards.

To incorporate the new script into phpWebSite, we will use theme.php and theme.tpl included in every phpWebSite theme. theme.tpl defines the overall layout or template of your site, while theme.php facilitates the inclusion of php files into phpWebSite. We will be manipulating these two files in order to include the php script for our news ticker. But before this, we will first describe the script itself.

The basic idea is to use the javascript described in the news ticker article for the news ticker part. But instead of hard-coding the title and link arrays, as we did before, we will use the script in Extending phpWebSite for mobile access article to extract the titles and links of the most recent articles in your PWS-based website. We then output everything into a <script> html tag and insert this into phpWebSite using theme.tpl.

A Javascript News Ticker

News tickers are common in news websites. A news ticker is usually used to draw user’s attention to the site’s latest news headlines. It can also provide a direct link to the displayed news item so that readers can immediately access the full content from anywhere within the site. One such ticker can be seen at the Philippines Today website. This post describes how to create a simple news ticker you can use on your own website using javascript.

To start with, we define two arrays. One contains the titles of the news items to be displayed and the other the links to access these items. Here, we will explicitly specify the titles and the links within the code for simplicity. Other methods, such as via RSS, can be used to implement automatic retrieval of titles and links that will be displayed in the ticker. But this will not be covered here. Our first javascript code will be like this: