{"id":216,"date":"2014-02-04T13:18:54","date_gmt":"2014-02-04T13:18:54","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=216"},"modified":"2016-11-14T11:31:20","modified_gmt":"2016-11-14T11:31:20","slug":"ticker-tapes","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/04\/ticker-tapes\/","title":{"rendered":"Ticker Tapes"},"content":{"rendered":"<p>This post relates to the old Research and Conferences template and so has been <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/archive\/\">Archived<\/a>.<\/p>\n<p>This article describes how to turn a regular bulleted list into a ticker tape. Another post (coming soon) will discuss how to sync this with your site news page, or with an RSS feed from another site or blog, but there are plenty of cases where you wouldn&#8217;t want the content to be fully synchronised.<\/p>\n<ul>\n<li>Ticker tapes and other animated elements should be used with restraint, as they effect the readability of content on your site. This technique will only work with one ticker per page &#8211; you should not have more \ud83d\ude09<\/li>\n<\/ul>\n<p>As with <a title=\"Banner Slideshows\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/23\/banner-slideshows\/\">sliding banners<\/a>, column and grid layouts, this makes use of the <em>Class<\/em> field in All Purpose Content.<\/p>\n<p>Create a bulleted list in some <em>All Purpose Content <\/em>and<em> m<\/em>ake sure that each item is web a link to another webpage using the chainlink icon, this would ideally be your news page or the individual news items.<\/p>\n<p>Give the piece of <em>All Purpose Content<\/em> the <em>Class<\/em> &#8216;tickertape&#8217; in the field at the bottom of the content edit area &#8211; see below.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/TickerTape.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-219\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/TickerTape-300x284.png\" alt=\"TickerTape\" width=\"300\" height=\"284\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/TickerTape-300x284.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/TickerTape-316x300.png 316w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/TickerTape.png 940w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Any bulleted list items within this piece of content will become a ticker tape which types out the item character by character. Obviously the below screenshot isn&#8217;t animated:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-220\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example-300x120.png\" alt=\"Ticker Tape Example\" width=\"300\" height=\"120\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example-300x120.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example-1024x410.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example-500x200.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ticker-Tape-Example.png 1045w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Alternatively, using the same technique, you can use a different class &#8216;<em>scrollingticker<\/em>&#8216; which scrolls a new item vertically into view.<\/p>\n<p>Scrolling ticker is slightly more flexible in that it does not restrict you to only having hyperlinked content in your bulleted list and can even work with images if laid out carefully.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-221\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker-300x174.png\" alt=\"Scrolling Ticker\" width=\"300\" height=\"174\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker-300x174.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker-1024x596.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker-500x291.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Scrolling-Ticker.png 1038w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>See Also:<\/strong><\/p>\n<ul>\n<li><a title=\"Banner Slideshows\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/23\/banner-slideshows\/\">Banner Slideshows<\/a><\/li>\n<li><a title=\"Section Sidebars, Banners and Footers\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/15\/section-sidebars-banners-and-footers\/\">Section Sidebars, Banners and Footers<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This post relates to the old Research and Conferences template and so has been Archived. This article describes how to turn a regular bulleted list into a ticker tape. Another post (coming soon) will discuss how to sync this with &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/04\/ticker-tapes\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":839,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,19,1],"tags":[],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-media","category-the-class-field","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/users\/839"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":14,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/216\/revisions\/653"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}