Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: Sir Osis of Liver on July 01, 2020, 11:52:41 PM

Title: Highlight current link
Post by: Sir Osis of Liver on July 01, 2020, 11:52:41 PM
Tinkering with an mp3 player format to play ebooks, to be embedded in posts as [html][/html].  It's very rough, but you can get the general idea here (http://www.thekrashsite.com/smf20/audiolinks/playlist.php).  Would like to change color of link that's currently playing.  Any (simple) way to do this?
Title: Re: Highlight current link
Post by: shadav on July 02, 2020, 03:14:12 PM
i suck at css but i'd assuming something to do with a:active or a:current???

where's ant  :laugh:
Title: Re: Highlight current link
Post by: Mick. on July 02, 2020, 03:40:09 PM
What if you add the active class to ALL the href's?  :o

<a class="active" href="javascript:void(0)" onclick="window.open('http://www.thekrashsite.com/smf20/audiolinks/player1.html','iframe_a') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>


Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 04:35:18 PM
There is no :current pseudo-class, there's :focus but doesn't work for this.  :active causes color to change only when link is clicked, doesn't remain changed.

Quote from: shadav on July 02, 2020, 03:14:12 PM
where's ant  :laugh:

^ This. ;D
Title: Re: Highlight current link
Post by: Antechinus on July 02, 2020, 06:42:04 PM
Can't be done just with CSS, as far as I know. You need some sort of back end logic to tell it what's going on.
Title: Re: Highlight current link
Post by: SychO on July 02, 2020, 06:52:35 PM
Change every link's href from "javascript:void(0)" to that anchor's id, so for example


<a id="player1" href="javascript:void(0)" onclick="window.open('http://www.thekrashsite.com/smf20/audiolinks/player1.html#player1','iframe_a') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>


to


<a id="player1" href="#player1" onclick="window.open('http://www.thekrashsite.com/smf20/audiolinks/player1.html#player1','iframe_a') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>


visited will now work (on browsers that allow it) and you can make use of the :target pseudo class (you seem to already have css using it)
Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 07:12:06 PM
That's basically the problem, visited isn't allowed in FF, and anything similar also doesn't work.  I've tried several variations using :target, including what you posted, but it's ignored.  Also some js and jquery workarounds, no luck.  Don't know how it's done here (i.e. bolding on sidebars), but I'm trying to limit the code to html that can be embedded in posts.  Guess it's not that important, can just add title above the player in the iframe, but it's annoying that something so simple can't be done.
Title: Re: Highlight current link
Post by: SychO on July 02, 2020, 07:18:26 PM
even :target doesn't work when you change the href to the id ?? that's weird indeed.
Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 07:27:51 PM
I'm sure I'm doing it wrong.  I have the link set up like this -



<tr><td>
<a id="player1" href="#player1" onclick="window.open(\'http://www.thekrashsite.com/smf20/audiolinks/player1.html#player1\',\'iframe_a\') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>
</td></tr>



What's the correct css?
Title: Re: Highlight current link
Post by: Mick. on July 02, 2020, 07:30:15 PM
So.... <a class="active" href didn't work?
Title: Re: Highlight current link
Post by: Antechinus on July 02, 2020, 07:33:33 PM
Active only works while it's processing your click. ;)
Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 07:37:39 PM
Some things work in IE (:visited), but not in FF.  As FF is the more current browser, and in wider use, I'm going with that.  I tried several variations of :active, but all it does is light up the link when it's clicked, then it returns to original color.  The links here are highlighted in main menu and sidebars, but as Ant posted, that requires some underlying machinery that I don't want to get into.
Title: Re: Highlight current link
Post by: SychO on July 02, 2020, 07:46:53 PM
Quote from: Sir Osis of Liver on July 02, 2020, 07:27:51 PM
I'm sure I'm doing it wrong.  I have the link set up like this -



<tr><td>
<a id="player1" href="#player1" onclick="window.open(\'http://www.thekrashsite.com/smf20/audiolinks/player1.html#player1\',\'iframe_a\') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>
</td></tr>



What's the correct css?


Yea, and it works for me, your code already has the relevant css code using :target, guess it's just a thing with FF since I'm on chrome
Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 08:08:44 PM
This works in FF, but have to close the tab to clear it.  Only the iframe refreshes on reload, rest of table doesn't -



<style>
td {color: white; font-size: 10pt; border: 1px black solid; background: grey; border-radius: 3px;}
a:link {color: white; text-decoration: none;}
a:hover {color: blue; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:target {color: blue;}
</style>

</head>

<body style="background: #A6C3D9;">
<table style="width: 70%; border-radius: 6px; margin: 50px auto 0 auto;">
<tr><td>
<iframe src="iframe.html" name="iframe_a" style="height: 90px; width: 100%; border-radius: 3px;" title="Audio Player"></iframe>
</tr></td>
<tr><td>
<a  id="player1" href="#player1" onclick="window.open('http://www.thekrashsite.com/smf20/audiolinks/player1.html#player1','iframe_a') . focus()">The Evolution of Modern Medicine by Sir William Osler (1849 - 1919) - Preface</a>
</td></tr>


Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 02, 2020, 08:25:40 PM
Actually does exactly what I wanted, except for refresh.  It reloads to current link -



http://www.thekrashsite.com/smf20/audiolinks/playlist.html#player3



I want it to reload clean page -



http://www.thekrashsite.com/smf20/audiolinks/playlist.html



Will work on this tomorrow.  Thanks.
Title: Re: Highlight current link
Post by: Sir Osis of Liver on July 03, 2020, 12:55:10 PM
Any way to refresh page from -



http://www.thekrashsite.com/smf20/audiolinks/playlist.html#player3



to -



http://www.thekrashsite.com/smf20/audiolinks/playlist.html



Tried several things, they all loop endlessly. :(