Help with custom javascript for manual banner ads

(probus) #1

I’m trying to setup a simple html banner with a small javascript that cycles a couple of divs around. It all works well when I initially load the page, but after opening a topic or clicking the logo to go back to home page the javascript stops executing and I’m left with a broken banner. Why does the script stop executing and how do I fix it? Can anyone help me?

I’m using Innerfade and the I put the script into the HTML head section. The actual code is in the Top of pages -section.

I don’t know how to paste the code here, but you can look at a very simple example here

edit. After looking into this, I think that I need to make a plugin. if so, how do I make a simple plugin that injects the javascript to every page?

(probus) #2

From here I can see that Discourse has what seems like a suitable hook to get the script running again after every “page” change, Discourse.PageTracker.current() / change. But that seems to be triggered just before loading the new page content and hence, doesn’t work since I need to manipulate the loaded content. Would I need a new hook?

(Kane York) #3

Regardless of the technical aspects of the question, why exactly do you want a carousel? They’re widely regarded as a horrible user experience.

See gui design - Are carousels effective? - User Experience Stack Exchange and Using a carousel on home page or not? - User Experience Stack Exchange for more on that.

On the technical side, one possible way to get this to work is to get a callback into the Ember scheduler’s afterRender queue. I haven’t tested or tried this out before, so I can’t really point to the exact function call you need. Also be aware that if you ever have a syntax error in your Javascript, the pages will likely become blank until you go back to the admin section.

(probus) #4

Thanks, I’ll look into that.

I’m not exactly building a carousel. It’s a banner ad (that has some moving parts of sorts) so banner blindness is pretty much guaranteed and expected. In any case, getting this to work is interesting for future references, since I will want to deploy more html5/javascript ads.

(ampburner) #5

I’m trying to do something similar (with a simple html banner, not a caroussel). Basically I’m trying to get a static welcome banner in between the header, and the main navigation by adding some jquery into the header (via the admin panel) like so:

jQuery( document ).ready(function() {
    jQuery( "<div id='introbanner'>stuff</div>" ).insertBefore( ".list-controls" );

However, there are some problems with this approach.

  • sometimes, when document read event is fired, the .list-controls element is not yet present
  • when you navigate the site, sometimes the element is removed from dom, and the banner disappears.

The truth is that I’m an extreme js noob. I have the feeling that I should not rely on document ready but hook into Ember somehow, but I have no idea where to start.

Help would be much appreciated.

(ampburner) #6

Figured it out!

(Kane York) #7

Note that we do have Banner Topics now.

(ampburner) #8

Yes! I’ve noticed. Those are very useful, but my use case is a bit different.
It’s not really a dismissible banner, but a permanent graphic.


(Sam Saffron) #9

That seems a little oppressive to me, as you navigate around the lists you are constantly having to scroll down the image.

Why not use some sort of background with gradient transparency or something?

(ampburner) #10

Good point, it was intended just to show up on the home page (categories view).
I’ll tweak it a little bit.