Stock ticker bar between the site logo and the user panel


#1

Using the inspection feature of Chrome I have created a bar that is a series of index tickers that go across the top of my site between the logo and the user panel menu.

It is CSS, HTML and jQuery javascript. I have this in a single file and would like to inject this bar right behind the ember view title div.

I used the html head to place my style and script and my jQuery pull from the jQuery CDN.

I have added the HTML to the top of page to see if I can get something to populate.

I do a hard refresh.

What I should see is something like this.

What I get is:

Yes it is in the wrong space but I was just testing before I pinhole the spot using jQuery to inject it where I need it.

What I think is happening is that my jQuery is not initializing.

What I want is:

The questions are:

  • Am I doing this right?
  • Is there an easier way to include banner code?
  • Is there something I need to keep in mind with loading jQuery?
  • Anything else I need to think about?

(Jeff Atwood) #2

I think you would have more luck doing this as an additional header, not putting it in the top nav bar.


#3

I was thinking of a few ways to do this. This is nice real estate where my mock is, but I could bring it down to the next spot if that’s what you mean especially if it keeps things simpler. I would only allow it if they were on a desk top and had at least 825px of space, I collapse the banner to show less and less as space gets constrained, and if on mobile they see nothing (cluttering real estate on a phone doesn’t make sense). Thanks Jeff.


#4

Here was my final solution for my ticker bar. It’s on github. Should have made a gist since it is so small.

Here is what it looks like…

It adapts to the width of the parent container, if it gets too small it disappears (for mobile and tablet).