{"id":15251122,"url":"https://github.com/jerps/rss-ticker","last_synced_at":"2025-10-05T13:30:30.573Z","repository":{"id":51357718,"uuid":"186294287","full_name":"jerps/rss-ticker","owner":"jerps","description":"RSS/Atom Feed Ticker As Custom HTML Element","archived":true,"fork":false,"pushed_at":"2021-05-14T11:41:41.000Z","size":20707,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-18T19:08:03.466Z","etag":null,"topics":["atom","custom-element","html","javascript","rss","rss-reader","rss-ticker","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jerps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-12T19:14:54.000Z","updated_at":"2023-01-28T08:54:21.000Z","dependencies_parsed_at":"2022-09-13T08:00:46.518Z","dependency_job_id":null,"html_url":"https://github.com/jerps/rss-ticker","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerps%2Frss-ticker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerps%2Frss-ticker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerps%2Frss-ticker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerps%2Frss-ticker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerps","download_url":"https://codeload.github.com/jerps/rss-ticker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235399012,"owners_count":18983814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atom","custom-element","html","javascript","rss","rss-reader","rss-ticker","webcomponent"],"created_at":"2024-09-29T17:06:45.094Z","updated_at":"2025-10-05T13:30:25.510Z","avatar_url":"https://github.com/jerps.png","language":"JavaScript","readme":"# This project has been archived\n\n***\n## rss-ticker v1.1.1 : RSS/Atom Feed Ticker As Custom HTML Element\n\n***\n\n**rss-ticker** is a custom HTML element which displays an RSS/Atom feed feed as a sequence of items which repeatedly scrolls horizontally to show all items. Using the mouse or touch, an **rss-ticker** can be controlled by dragging. To temporarily halt the ticker and show an infobox with full content, or to let it scroll forwards and backwards at different speeds.\\\n\nThe items are displayed in a color that is dependent on the item's publication date. By default, a \"new\" item is displayed in red and an \"old\" item is displayed in blue. Less new and less old items are displayed with a color inbetween red and blue. Attributes can be set to change these colors and to specify when an item is \"new\" or \"old\". Changing the value of most of the attributes is immediately effective.\n\n***\n\n![](screenshot01.png)\n\n![](screenshot02.png)\n\n***\n\nSee [this](https://johnerps.com/rss-ticker/demo.html) page for a demonstration.\n\nPage [johnerps.com#d](https://johnerps.com#d) also has an **rss-ticker**. Click on the yellow circle with the RSS icon (bottom half, right of the screen) to open a form in which the ticker's attributes can be changed, while it's running. Experiment with **rss-ticker** attributes. See effects immediately.\n\n\u003e [Documentation](https://johnerps.com/rss-ticker/docs/index.html)\n\n***\n\n### Usage\n\n**rss-ticker** is simple to use. Add it to a page like any other element, set it's attributes, add some styling. No Javascript needed.\n\nFor example, the following html code adds an **rss-ticker**.\n\n````html\n\u003crss-ticker autostart=\"2\" url=\"http://rss.cnn.com/rss/edition.rss\"\u003e\u003c/rss-ticker\u003e\n````\n\nIt automatically starts 2 seconds after being attached to the DOM. It fetches RSS/Atom feed http://rss.cnn.com/rss/edition.rss.\n\nIt happens that a feed can not be fetched due to, for example, CORS restrictions. Attribute `proxy-url` is used to fetch the feed through another server (for example the one that served the page) to mitigate the restrictions.\n\nThe [demo page](https://johnerps.com/rss-ticker/demo.html) has two **rss-ticker**s which are added to the page with the following html (and some styling).\n\n````html\n\u003crss-ticker id=\"rss1\"\n    url=\"http://rss.cnn.com/rss/edition.rss\"\n    proxy-url=\"https://johnerps.com/php/getfile.php?url=%%_URL_%%\"\n    autostart=\"3\"\n    speed=\"2.5\"\n    color-new=\"#a44\"\n    color-old=\"#bbb\"\n    hrs-old=\"6\"\n    transparency=\"0.3\"\n    infobox-link-bgcolor=\"#1a1a1a\"\n    font-size=\"1.3\"\n\u003e\u003c/rss-ticker\u003e\n\u003crss-ticker id=\"rss2\"\n    url=\"https://www.theguardian.com/uk/rss\"\n    proxy-url=\"https://johnerps.com/php/getfile.php?url=%%_URL_%%\"\n    autostart=\"5\"\n    speed=\"4\"\n    infobox-img-size=\"3\"\n    color-new=\"#888\"\n    color-old=\"#333\"\n    transparency=\"0.3\"\n    infobox-link-color=\"#1a1a1a\"\n    infobox-link-bgcolor=\"#b0b0b0\"\n\u003e\u003c/rss-ticker\u003e\n````\n\nThe page with the `\u003crss-ticker\u003e` element(s) must have modules **webcomponentsjs** (for browser compatibility) and **rss-ticker** added to the `\u003chead\u003e` element.\n\n````html\n\u003chead\u003e\n    .\n    .\n    \u003cscript src=\"https://unpkg.com/@webcomponents/webcomponentsjs\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/rss-ticker\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n````\n\nThe HTML element class of **rss-ticker** is bound to property `default` of global variable `RssTicker`.\n\n`RssTicker.default`\n\n**rss-ticker** can also be consumed as an ES2015 module, when using Javascript and a tool like webpack.\n\n````javascript\nimport RssTicker from 'rss-ticker';\n````\n\nOr as a CommonJS module.\n\n````javascript\nvar RssTicker = require('rss-ticker');\n````\n\n***\n\n### How To Build\n\nFirst install node and npm.\n\nThen,\n\n````shell\n$ git clone https://github.com/jerps/rss-ticker.git\n$ cd rss-ticker\n$ npm run build:prod\n# for development:\n$ npm run build:dev\n````\n\n***\n\n### License\n\nrss-ticker is [MIT Licensed](LICENSE). You may use, distribute and copy it under the license terms.\n\n***\n\n### Changes\n\n* v1.1.1 (2021-05-14)\n\n  * Security updates.\n\n* v1.1.0 (2019-11-2)\n\n  * Some bugfixes.\n  * Added documentation.\n\n* v1.0.1 (2019-10-12)\n\n  * Changed default (proxy) url to be empty.\n\n* v0.9.0 (2019-10-07)\n\n  * Bugfixes / misc. lay-out changes.\n\n  * Added attribute `descr-or-content`.\n\n  * Pre-load info-box images.\n\n* v0.8.2 (october 7, 2019)\n\n  * Some bugfixes.\n\n  * demo.html styling.\n\n* v0.8.1 (october 6, 2019)\n\n  * Some bugfixes.\n\n  * Changed boolean `autostart` attribute to be the number of seconds to wait before start (0 = no autostart).\n\n  * Added attribute `infobox-img-size`.\n\n* v0.8.0 (october 6, 2019)\n\n  * Bugfixes.\n\n  * Added attribute `autostart`. Renamed attribute `moveright` to `scrollright`.\n\n  * Added demo.html.\n\n  * Started writing docs.\n\n* v0.7.2 (october 5, 2019)\n\n  * Bugfixes.\n\n* v0.7.1 (september 29, 2019)\n\n  * Show item sequence number.\n\n* v0.7.0 (september 29, 2019)\n\n  * Several bugfixes.\n\n  * Changed defaults of attrs `url` and `proxy-url`.\n\n  * The ticker items now center vertically within the vertical space of the rss-ticker element.\n\n  * When `running` event is triggered the information object now also contains property `inum` which is the number of items.\n\n* v0.6.0 (september 28, 2019)\n\n  * Misc. changes \u0026 bugfixes.\n\n* v0.5.0 (september 15, 2019)\n\n  * Some bugfixes.\n\n  * Added static read-only property `apNames` to `RssTicker`. It gives an array with all attribute/property names.\n\n  * rss-ticker is now stable and fully functional.\n\n* v0.4.1 (september 15, 2019)\n\n  * Added static method `apNames` to return an array with attribute/property names.\n\n* v0.4.0 (september 15, 2019)\n\n  * Bugfixes. Misc. changes.\n\n  * Added node_modules to repository.\n\n* v0.3.3 (september 14, 2019)\n\n  * Bugfixes.\n\n* v0.3.2 (september 14, 2019)\n\n  * Upgraded node modules.\n\n* v0.3.1 (september 14, 2019)\n\n  * Misc changes \u0026 bugfixes.\n\n* v0.3.0 (july 5, 2019)\n\n  * Misc. bugfixes. Added polyfills. Stable.\n\n* v0.2.0 (june 24, 2019)\n\n  * Used webpack/babel for packaging.\n\n* v0.1.0 (may 22, 2019)\n\n  * First working version.\n\n* v0.0.0 (may 2019)\n\n  * Initial commit. WIP.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerps%2Frss-ticker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerps%2Frss-ticker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerps%2Frss-ticker/lists"}