How to mimic "Home" link navigation in custom CSS/HTML element


(Dean Taylor) #1

I’ve added an “Home” button to the via the CSS/HTML Header section…

I have made it an anchor similar to the following:

<a href="/"><img src="..."></a>

Although the link works as expected it causes the page to reload.

Is there a way to hookup the AJAX style link navigation Discourse uses when other links are clicked?

Thanks


How to make the footer similar to Youtube-app footer?
(Jeff Atwood) #2

Why is a home button needed when the logo on every page functions as home?


(Dean Taylor) #3

Due to advanced custom styling it’s not used and an alternative must be put in place


(Jens Maier) #4

Add data-auto-route="true" to the link, e.g. <a href="/" data-auto-route="true">Home</a>. This should cause Ember to handle the navigation for you.

Side note: this won’t work in posts. The HTML sanitizer suppresses most (all?) data- tags. :wink:


How to make the footer similar to Youtube-app footer?
(Dean Taylor) #5

This doesn’t quite seem to do the trick.

Is there any chance the Ember scope is limited to #main section?


(Jens Maier) #6

Hm, you’re right, it’s not very reliable. It worked when I tested it by adding a link to the header (i.e. $(".d-header .title")), so I’m guessing that some other component is observing specific parts of the DOM for changes – and section#main and div#main-outlet aren’t on that list.


(Sol) #7

No other ideas on this floating around? Would be also interested in this :slight_smile:


(Sol) #8

So we are out of ideas here?


(lid) #9

Try This

<a href="/" onclick="return Discourse.ClickTrack.trackClick(this)">Go Home</a>

(Dean Taylor) #10

@Lid didn’t work for me


(lid) #11

ok, Try this

<a href="/" onclick="Discourse.ClickTrack.trackClick(event);">Go Home</a>

<a href="/categories" onclick="Discourse.ClickTrack.trackClick(event);">Categories</a>

(Dean Taylor) #12

Success - this did the job - thanks @Lid


(Dean Taylor) #13

It appears things have changed and Discourse.ClickTrack.trackClick is no longer available.

Is there another method of implementing this now?


(Dean Taylor) #14

This worked for me:

require('discourse/lib/click-track').default.trackClick(event);

(probus) #15

Is this available from the admin UI, where did you include that?

On a related note, I noticed that links to home work without reload if you put them in the footer but not in header.


(Dean Taylor) #16

Within /admin/customize/css_html in a Header customisation

...
<strong class="logo"><a href="/" onclick="require('discourse/lib/click-track').default.trackClick(event);"><img height="100" width="300" src="http://example.com/uploads/default/20901/7ab3f3dfa49f7a1e.png" alt="Some Amazing site"></a></strong>
...

(James Cook) #17

Does this still work for you? Doesn’t seem to work for me.


(James Cook) #18

I receive Uncaught TypeError: e.isDefaultPrevented is not a function in the console when trying this.

I have poked around but unable to figure out why the event doesn’t have this function. Can anyone more familiar with javascript and/or Discourse js help us out here?


(James Cook) #19

The lack of love this topic is receiving makes me :cry:

If there is anybody out there that knows if this is possible/impossible please let me know. I’d rather not reload the entire page every time. Thanks!


#20

I can only tell that this trick still works in 1.5.4. I suppose you are on 1.6.0?