# \[newbie\] Trouble adding script to dynamically change CSS values based on conditions

**URL:** https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386
**Category:** Support
**Created:** [October 11, 2016, 7:48am UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386 "2016-10-11T07:48:35Z")
**Posts on this page:** 11
**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: [October 11, 2016, 7:48am UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/1 "2016-10-11T07:48:36Z")

</div>

I’m very new to the world of Discourse so please bear with me if this is a question that has been answered a million times.

I’ve created a script that needs to run each time the user navigates to the homepage or the categories page. Currently I am attempting to run it through the **Customize \> HTML/CSS \> Head** using `<script>` tags. I check for DOM load completion, but it looks like Discourse has a very unique way of loading pages as you navigate around the forum.

Refreshing the categories page executes the script, but after navigating to another page, then back to the categories, the script fails to run.

I’ve tried creating a plugin to see if it would work better that way (I got the example alert() plugin working, woo!), but I just don’t quite understand how to utilize everything that’s available.

Any suggestions on how to get a script to run each time I navigate to the categories page?

If you need more information to understand what I’m asking for, please let me know. Sometimes my wording makes sense to me, but not to everyone else!

Thanks!

---

<div class="post-metadata">

### Author: ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)
#### Post date: [October 11, 2016, 8:01am UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/2 "2016-10-11T08:01:44Z")

</div>

Yes, Discourse uses internal navigation, so the DOM will only be ready once.

@cpradio suggested a possible solution here:

> [@My plugin codes runs just once!(My own script shouldn't be cached)](https://meta.discourse.org/t/my-pluggin-codes-runs-just-once-my-own-script-shouldnt-be-cached/51301):
>
> Hi. I wrote a plugin and I run my code. my code run just for the first page of my website.even if it is a simple alert.for example if you open front page and go to categories page the alert doesn’t work on new page.

---

<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: [October 11, 2016, 8:08am UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/3 "2016-10-11T08:08:08Z")

</div>

Thank you for the quick reply, @fefrei! I will try his suggestion out in morning and report back!

---

<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: [October 11, 2016, 6:13pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/4 "2016-10-11T18:13:11Z")

</div>

Alright, I placed the code that @cpradio suggested in a CSS/HTML Customization page under the ![](https://global.discourse-cdn.com/meta/original/3X/e/9/e959f60ab9433179b610fb81a4fd8d34795236aa.png) tab, but unfortunately it doesn’t seem to be working. Just to prove the concept, I have it try to display an alert. Below is the exact code I am using:

```
<script type="text/discourse-plugin">

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializePlugin(api)
{
  api.onPageChange((url, title) => {
        alert('test');
  });
}

export default {
  name: 'align-category-text',
  initialize: function(container)
  {
    withPluginApi('0.1', api => initializePlugin(api));
  }
};

</script>

```

I made sure the code was enabled and tried restarting rails. Any thoughts on what I’m missing?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 11, 2016, 6:17pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/5 "2016-10-11T18:17:03Z")

</div>

That isn’t how you’d do it there. To do it there, you’d have to do something like

```plaintext
<script type="text/discourse-plugin" version="0.4">
api.onPageChange((url, title) => {
  alert('test');
});
</script>

```

My original post was from a plugin perspective.

---

<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: [October 11, 2016, 6:21pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/6 "2016-10-11T18:21:59Z")

</div>

Oops! I just realized that right before you replied. Trying the plugin perspective now! If that doesn’t work, I will attempt to try the method you just posted. Thank you so much for your help!!

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 11, 2016, 6:22pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/7 "2016-10-11T18:22:47Z")

</div>

Both should work. I just tested the one I just posted, so I know it works, the plugin one should too 🙂

---

<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: [October 11, 2016, 6:40pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/8 "2016-10-11T18:40:41Z")

</div>

The plugin method works great! Thank you @cpradio, and @fefrei for getting me to the correct solution!

This was the end result of what I was trying to do as shown by a screenshot of a category with subcategories in the category list:

 ![](https://global.discourse-cdn.com/meta/original/3X/4/8/48b2157ab704f763c511b5a0bc869d7ca6b92e95.png)

I like the look of a stacked subcategory list with the new post indication to the right of each category better than everything pretty much displayed inline.

For future reference, is there an ideal method to use when comparing the plugin vs. the CSS/HTML page implementation, or do they have the same performance and end result?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 11, 2016, 7:05pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/9 "2016-10-11T19:05:04Z")

</div>

It should be nearly identical, both get preprocessed and minimized. The advantage the CSS/HTML has is you won’t have to do a container rebuild to pull in changes (or use the /admin/upgrade path), you can simply modify it within the Admin UI and save it to enable it (it may require a hard refresh of the browser though).

---

<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: [October 11, 2016, 7:27pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/10 "2016-10-11T19:27:21Z")

</div>

Great! Thanks for the answer.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:45pm UTC](https://meta.discourse.org/t/newbie-trouble-adding-script-to-dynamically-change-css-values-based-on-conditions/51386/11 "2024-06-08T12:45:13Z")

</div>

This topic was automatically closed after 2797 days. New replies are no longer allowed.