How to hide a DIV with javascript on Discourse? and then change as users navigate?


(Charles Walter) #1

Has anyone here used the custom fields to hide a div using Javascript? I’m not clear why this code would not work for me. It works if I put it in the Javascript console in chrome.

<script>
document.getElementById('notopic').style.display='none';
</script>

I’m trying to include a particular div on topic pages vs. non-topic pages. I assume it needs to be activated differently due to the JS coding of the discourse application?

Ultimately, I would then include it as part of a separate code to load, but I remember now that the fragments in our header and footer do not get reloaded as users navigate, so this will be trickier, no?

<script type="text/javascript">
if(window.location.href.indexOf(“/t/“) > -1) {
       document.getElementById('notopc').style.display='none';
    }
</script>

(Charles Walter) #2

I found an alternate way to do what I was looking for, but still curious if anyone has had experience with this type of stuff.


(Vinoth Kannan) #3

You can do it in ember initializer like below.

import { cleanDOM } from 'discourse/lib/clean-dom';
import { startPageTracking, onPageChange } from 'discourse/lib/page-tracker';
import { viewTrackingRequired } from 'discourse/lib/ajax';

export default {
  name: 'toggle-div',

  initialize(container) {
    const router = container.lookup('router:main');
    router.on('willTransition', viewTrackingRequired);
    router.on('didTransition', cleanDOM);

    startPageTracking(router);

    onPageChange((url, title) => {
      var topicPattern = new RegExp('^/t/');
      if (topicPattern.test(url)) {
        document.getElementById('notopc').style.display='none';
      } else {
        document.getElementById('notopc').style.display='block';
      }
    });
  }
};

Of course you can do it easily using CSS

.archetype-regular #notopc {
 display: none;
}