• Welcome to Simple Machines Community Forum. Please login or sign up.
January 21, 2022, 11:02:29 PM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


Highlight current link

Started by Sir Osis of Liver, July 01, 2020, 11:52:41 PM

Previous topic - Next topic

Sir Osis of Liver

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.  Would like to change color of link that's currently playing.  Any (simple) way to do this?
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

shadav

i suck at css but i'd assuming something to do with a:active or a:current???

where's ant  :laugh:

Mick.

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>



Sir Osis of Liver

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
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

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.

SychO

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)
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Sir Osis of Liver

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.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

SychO

even :target doesn't work when you change the href to the id ?? that's weird indeed.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Sir Osis of Liver

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?
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Mick.

So.... <a class="active" href didn't work?

Antechinus

Active only works while it's processing your click. ;)

Sir Osis of Liver

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.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

SychO

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
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Sir Osis of Liver

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>


"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

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.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

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. :(
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Advertisement: