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?
i suck at css but i'd assuming something to do with a:active or a:current???
where's ant :laugh:
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>
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
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.
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)
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.
even :target doesn't work when you change the href to the id ?? that's weird indeed.
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?
So.... <a class="active" href didn't work?
Active only works while it's processing your click. ;)
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.
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
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>
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.
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. :(