# Using a theme component instead of an iframe to create a topic timer

**URL:** https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635
**Category:** Development
**Tags:** topic-timers
**Created:** [3월 18, 2018, 11:49오후 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635 "2018-03-18T23:49:17Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 18, 2018, 11:49오후 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/1 "2018-03-18T23:49:17Z")

</div>

It’s probably best to ditch the iframe altogether. For a fun personal challenge, I came up with a rough proof of concept that applies the timer via a theme component. Right now, it adds a timer to the first post of a topic and has a few control buttons. It currently looks like this:

 ![timer](https://global.discourse-cdn.com/meta/original/3X/4/4/44d33878df6b18ca36f281b7749773ad9dbf7b5e.png)

If this is something you’d want me to expand on, let me know. It’s an interesting customization to work on.

---

<div class="post-metadata">

### Author: ![fellowshipforums](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fellowshipforums/32/93448_2.png) [@fellowshipforums](https://meta.discourse.org/u/fellowshipforums)
#### Post date: [3월 19, 2018, 12:15오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/2 "2018-03-19T00:15:52Z")

</div>

Thank you @tshenry for looking into this. The iframe solution was just the “quick and dirty” solution for us to get the timer functionality working. But YES, we are ABSOLUTELY interested in the custom timer that you were experimenting around with. Your solution looks way nicer and cleaner…but is something much beyond my scope in terms of my coding abilities. So again, yes, I am very interested in seeing what you come up with and being able to apply it to my forum.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 19, 2018, 12:18오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/3 "2018-03-19T00:18:50Z")

</div>

Alright sounds good, I’ll continue working on it and report back when I’ve got something that’s ready to show.

---

<div class="post-metadata">

### Author: ![fellowshipforums](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fellowshipforums/32/93448_2.png) [@fellowshipforums](https://meta.discourse.org/u/fellowshipforums)
#### Post date: [3월 24, 2018, 6:03오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/4 "2018-03-24T06:03:43Z")

</div>

@tshenry In constructing this theme, I wonder if you are able to build in the ability for me to select which category or subcategories to apply this to? I would not want this theme applied across all posts on my forum, but rather only a select few categories.

For example, on our [Forum](http://www.fellowshipforums.com) I would want it the Timer Theme applied only to posts in the “Past Exam” category. Ideally, I’d love to be able to select exactly which posts in the “Past Exam” category for this to apply to since a Timer feature would be appropriate 99% of the time, but there are a few posts where having a Timer would be inappropriate. But this is something I could for sure work around by placing the 1% of posts where a Timer is inappropriate elsewhere (another Category), or even delete them.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 24, 2018, 6:30오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/5 "2018-03-24T06:30:18Z")

</div>

Funny you should mention this! I just added the ability to specify a tag as the determining factor for which topics the stopwatch will display. This keeps it from being applied to any “about” topics or whatever other topic in a given category you may not want the timer to show:

 ![stopwatch-settings](https://global.discourse-cdn.com/meta/original/3X/8/9/89b665b89ef08936106dc4f809e6841be2866544.png)

Does this work for you alright or would a tag be problematic to use in your scenario?

While we’re at it, are there any other aspects about it that I should consider? It’s just about done, I’m just refining the code and trying to thoroughly test it. Should be ready either this weekend or sometime next week 🙂

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 24, 2018, 7:38오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/6 "2018-03-24T07:38:53Z")

</div>

This is what it looks like at the moment by the way:

 ![stopwatch](https://global.discourse-cdn.com/meta/original/3X/2/e/2eaa0a3eccf4ea2bd8b7e5831734fd4f3de75843.png)

---

<div class="post-metadata">

### Author: ![fellowshipforums](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fellowshipforums/32/93448_2.png) [@fellowshipforums](https://meta.discourse.org/u/fellowshipforums)
#### Post date: [3월 24, 2018, 9:34오후 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/7 "2018-03-24T21:34:46Z")

</div>

I think this looks perfect! The tag indentifer is also a perfect solution to my question above. This is great work! Thank you.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 27, 2018, 7:42오전 UTC](https://meta.discourse.org/t/using-a-theme-component-instead-of-an-iframe-to-create-a-topic-timer/189635/8 "2018-03-27T07:42:04Z")

</div>

Alright, the theme component has been released! Please let me know if you find any issues with it or have any ideas on how it could be improved.

> [@Topic Stopwatch](https://meta.discourse.org/t/topic-stopwatch-theme-component/83939):
>
> Installing this theme component will add a stopwatch to the top of a topic. A tag specified in the theme settings will establish which topics the stopwatch will appear. Example: Settings There are three settings. You must add a single tag name to associate with a stopwatch. In this example I use a tag called “speed-read.” Installation IMPORTANT: You must be running [Discourse Version 2.0.0.beta4](https://meta.discourse.org/t/discourse-2-0-0-beta4-release-notes/82446) or later for this theme component to work. Import Links: http…

Also, for anyone interested in solving the original question on how to disable iframe scrolling, simply add this code to the `</head>` tab of a theme of your choice:

```plaintext
<script type="text/discourse-plugin" version="0.8.18">
   api.decorateCooked($elem => $elem.children('iframe').attr("scrolling", "no"));
</script> 

```

(Shout-out to @vinothkannans for bringing to light the [usefulness](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/26) of `decorateCooked()` 😀)
