News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

iframes in posts?

Started by Sir Osis of Liver, July 07, 2020, 12:49:26 AM

Previous topic - Next topic

Sir Osis of Liver

Seems like a bad idea, but it solves an annoying problem.  If you look here, there are two posts containing a book list and audio players.  In second post booklist/player is in [html][/html] tags, it works fine, but clicking on title causes the active link to jump to top of screen.  First post is same booklist/player embedded in iframe.  Doesn't look bad, and it solves the jumping problem.  All of this is to preserve an earlier feature that changes color of the current selection.  There are actually two iframes in the second post, one contains the booklist/player, the other is the second table cell where the html players load.  Things work, but am not really comfortable with this, but can't find another way to highlight the current selection. :(
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Looking

Without understanding the whole of what you want to do, in my opinion if the content is local you should be able to make a good effect using DIVs using an include rather than IFrames.

SychO

some javascript code instead would be a lot better to do what you want with the player.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Sir Osis of Liver

Not really concerned about the table iframe that contains the player, it's placing the whole thing in an iframe in a post that bothers me.  Haven't been able to find any other way to highlight the current selection without the jumping problem.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor

The correct solution is to have JavaScript that toggles classes when you do it, but that's not exactly friendly to put in a post.

If only someone could write a bbcode to do this.

Sir Osis of Liver

Are iframes in posts a technical or security problem?  It seems to work in pc browsers, android FF on a tab, and in FF phone emulations.  I just want to keep the current title highlited after it's clicked.  Other option is to just put a title over the player in the table cell, but we like the menu thing better.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor

-sigh-

The correct solution is no iframe, you are using them as a crutch for doing this properly because they happen to have some conveniently useful characteristics, but they're a bad idea, they've been a bad idea for a long time.

And yes, they can actually be a security risk if not set up correctly. You haven't set them up correctly, I don't even have to look to know this, because I guarantee you won't have done the things required to make them secure.

The correct solution, as suggested, is that someone writes a playlist bbc that manages style changes in a post without resorting to iframes, but I have neither the desire nor the patience to do this, especially given 'just use iframes' is an acceptable solution.

Sir Osis of Liver

Quote from: Arantor on July 07, 2020, 05:40:54 PM
The correct solution is no iframe, you are using them as a crutch for doing this properly because they happen to have some conveniently useful characteristics, but they're a bad idea, they've been a bad idea for a long time.

I'm trying it because I haven't been able to find a better way of doing this after several days of dicking around with it.  SychO's suggestion for using :target pseudo-class does exactly what I want, except for the content jumping.  If it wasn't so close I would do something else.

Quote
And yes, they can actually be a security risk if not set up correctly. You haven't set them up correctly, I don't even have to look to know this, because I guarantee you won't have done the things required to make them secure.

That's my concern, and why I started this topic.  Your answer is appreciated.

Quote
The correct solution, as suggested, is that someone writes a playlist bbc that manages style changes in a post without resorting to iframes, but I have neither the desire nor the patience to do this, especially given 'just use iframes' is an acceptable solution.

I've used the personal bbc mod on a couple of forums to create custom bbc tags, but don't see how this can be done with css, or if it can be done within html table that contains the playlist/player.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor

Everyone who has commented has pointed out that it would need JavaScript to pull it off. The point of using a playlist bbc would be to be able to manage and provide the JS without having to encode it somehow in the post.

Sir Osis of Liver

It seems that most of the risk involving iframes relates to cross-site content, which we're not really doing here.  Everything loads from the home domain except the mp3 file that loads from another site into the player, and if necessary we can copy the mp3s into home domain.  I'm going to tinker with Looking's suggestion about using a div instead of iframe to contain the player, quick search indicates a div can be targeted somewhat similar to iframe.  I'll still have the menu jumping problem, but eliminating both iframes would seem to be best way to go.  Thanks.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Chen Zhen


How are you implementing this in the post?
Are you just using full HTML/Javascript (possibly with a custom BBCODE mod) or did you create a plugin/mod that has custom admin/db settings that are integrated via BBCODE ?

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

I'll post some example code below.
Imo you should create a mod for your client that allows entries of multiple playlists.
Then you use BBCODE integration to add a unique BBCODE that shows the opted playlist id in the format you created.

Example css file:

/* Ebook Player style sheet */
.ebookWrapper {
background: #557EA0;
}

.ebookDivTable {
display: table;
width: 95%;
margin: 20px 20px 0px 20px;
}
.ebookDivTableList {
display: table;
width: 95%;
margin: 0px 20px 20px 20px;
}
.ebookDivRow {
display: table-row;
}

.ebookDivCell {
display: table-cell;
color: white;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivTitle {
text-align: center;
margin: 10px 0 10px 0;
}

.ebookDivInlineTitle {
display: inline;
font-size: 14px;
font-weight: bold;
}

.ebookPlayerMessage {
background: #000;
text-align: center;
background: #A6C3D9;
color:#534444;
border: 3px #557EA0 solid;
border-radius: 10px;
padding: 20px 0 0px 0;
margin: 12px auto 0 auto;
width: 90%;
height: 60%;
}
.ebookMeccaPlayerToggle {
background: #000;
}
.ebookMeccaContainer {
width: 90%;
margin: auto;
}
.ebookMeccaPlayerDivAudio {
text-align: center;
background: #A6C3D9;
color:#534444;
border: 3px #557EA0 solid;
border-radius: 10px;
padding: 2em 0 0.6em 0;
margin:12px 0 0 0;
}
.ebookDivCellLink {
color: white !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivCellLinkVisited {
color: purple !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivCellMouseover {
color: blue !important;
text-decoration: none;
cursor: pointer;
}
.ebookDivCellClickMouseover {
color: blue !important;
text-decoration: none;
cursor: pointer;
font-style: oblique;
font-weight: 700;
}
.ebookDivCellOnclickActivate {
color: red !important;
text-decoration: none;
}
.ebookDivCellOnclick {
color: blue !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookAudioTag {
height: 60px;
width: 90%;
margin-top: -20px;
}
.ebookPlayingButtonOuter {
padding-right: 1em;
}
.ebookPlayingButtonInner {
display: inline-flex;
position: relative;
top: 1px;
left: 3px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #222;
}
.ebookPausedButtonInner {
display: inline-flex;
position: relative;
margin-top:0.3em;
    margin-left:0.25em;
    border-left:3px solid #222;
    border-right:3px solid #222;
    width: 0.75em;
    height: 0.8em;
}


example PHP code (code at the top prior to the function should not be in the same file... this is an example):

<?PHP

// you need to populate the array likely from the database depending on the target list
// this is only an example with a manually filled array and id being used
$mp3List = array(
'ebook1' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_beforebreakfast_oneill.mp3', 'Before Breakfast by Eugene O\'Neill (1888 - 1953) 20:17'),
'ebook2' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_bullerpodingtoncompact_stockton.mp3', 'The Buller-Podington Compact by Frank R. Stockton (1834 - 1902) 37:42'),
'ebook3' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_darkladyofsonnets_shaw.mp3', 'The Dark Lady of the Sonnets by George Bernard Shaw (1856 - 1950) 32:11'),
'ebook4' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_firstandlast_galsworthy.mp3', 'The First and the Last by John Galsworthy (1867 - 1933)  47:57'),
'ebook5' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_howheliedtoherhusband_shaw.mp3', 'How He Lied to Her Husband by George Bernard Shaw (1856 - 1950)  38:02'),
'ebook6' => array('https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_outside_glaspell.mp3', 'The Outside by Susan Glaspell (1876 - 1948) 23:29'),
'ebook7' => array('http://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_parlorcar_howells.mp3', 'The Parlor Car by William Dean Howells (1837 - 1920) 40:57'),
'ebook8' => array('http://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_riderstosea_synge.mp3', 'Riders to the Sea by John Millington Synge (1871 - 1909) 21:29'),
);
$idList = 0;
ebookMp3Player($mp3List, $idList);
function ebookMp3Player($mp3List, $idList)
{
echo '
<div class="EbookWrapper">
<div class="ebookDivTable">
<div class="ebookDivRow">
<div class="ebookDivCell">
<div class ="ebookDivTitle">
<div class="ebookDivInlineTitle">One Act Play Collections</div>
<div> by various authors</div>
</div>
</div>
</div>
<div class="ebookDivRow">
<div class="ebookDivCell">
<div class="ebookPlayerMessage" id="ebookMeccaListMessage' . $idList . '" title="Audio Player">Click/tap title to open audio player.</div>
<div class="ebookMeccaPlayerToggle" id="ebookMeccaList' . $idList . '" style="display: none;">
<div class="ebookMeccaPlayerContainer">
<div id="ebookMeccaAudioContainer' . $idList . '" class="ebookMeccaPlayerDivAudio"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ebookDivTableList" id="ebookDivTableList' . $idList . '">
</div>
</div>
<script type="text/javascript">
function ebookMeccaPlayAudioBook(bookUrl, mp3ItemId) {
document.getElementById("ebookMeccaAudioContainer' . $idList . '").innerHTML = "";
var audioDiv = document.getElementById("ebookMeccaAudioContainer' . $idList . '");
var audioPlayer = document.createElement("AUDIO");
audioPlayer.src = bookUrl;
audioPlayer.type = "audio/mp3";
audioPlayer.controls = "controls";
audioPlayer.className = "ebookAudioTag";
audioPlayer.allow = "autoplay";
audioPlayer.autoplay = true;
audioPlayer.id = "audioTag_" + mp3ItemId + "_' . $idList . '";
document.getElementById("ebookMeccaAudioContainer' . $idList . '").appendChild(audioPlayer);
}
function ebookMeccaAudioVisitedLink(ignore) {
var mp3ListJson = ' . json_encode($mp3List) . ', i, newRow = [], newCell = [], newAudio = [];
var mp3List = Object.keys(mp3ListJson).map((key) => [key, mp3ListJson[key]]);
for(i=0;i<mp3List.length;i++) {
(function(mp3Item) {
if (document.getElementById("visited_" + mp3Item[0] + "_' . $idList . '") && ignore != mp3Item[0]) {
document.getElementById("visited_" + mp3Item[0] + "_' . $idList . '").className = "ebookDivCellLinkVisited";
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").style.display = "none";
}
else if (ignore == mp3Item[0]) {
var newDivInnerPlaying = document.createElement("DIV");
newDivInnerPlaying.className = "ebookPlayingButtonInner";
newDivInnerPlaying.id = "playingButton_" + mp3Item[0] + "_' . $idList . '";
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").innerHTML = "";
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").onmouseover = function() {
document.getElementById("visited_" + mp3Item[0] + "_' . $idList . '").onmouseover();
};
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").onmouseout = function() {
document.getElementById("visited_" + mp3Item[0] + "_' . $idList . '").onmouseout();
};
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").appendChild(newDivInnerPlaying);
document.getElementById("playing_" + mp3Item[0] + "_' . $idList . '").style.display = "inline-flex";
}
})(mp3List[i]);
}
}
function ebookMeccaCreateAudioList() {
var listDiv = document.getElementById("ebookDivTableList' . $idList . '"), mp3ListJson = ' . json_encode($mp3List) . ', i, newRow = [], newCell = [], newDivOuterPlaying = [], newDivTextNode = [], newAudio = [];
console.log(mp3ListJson);
var mp3List = Object.keys(mp3ListJson).map((key) => [key, mp3ListJson[key]]);
for(i=0;i<mp3List.length;i++) {
(function(mp3Item) {
newRow[i] = document.createElement("DIV");
newCell[i] = document.createElement("DIV");
newDivOuterPlaying[i] = document.createElement("DIV");
newDivTextNode[i] = document.createTextNode(mp3Item[1][1]);
newDivOuterPlaying[i].style.display = "none";
newDivOuterPlaying[i].className = "ebookPlayingButtonOuter";
newDivOuterPlaying[i].id = "playing_" + mp3Item[0] + "_' . $idList . '";
newCell[i].appendChild(newDivOuterPlaying[i]);
newRow[i].className = "ebookDivRow";
newCell[i].className = "ebookDivCellLink";
newCell[i].appendChild(newDivTextNode[i]);
newCell[i].onmouseover = function() {
if (this.className != "ebookDivCellOnclick")
this.className = "ebookDivCellMouseover";
else
this.className = "ebookDivCellClickMouseover";
};
newCell[i].onmouseout = function() {
if (document.getElementById("ebookMeccaAudioContainer' . $idList . '").firstChild && document.getElementById("ebookMeccaAudioContainer' . $idList . '").firstChild.src == mp3Item[1][0]) {
this.className = "ebookDivCellOnclick";
}
else if (this.id)
this.className = "ebookDivCellLinkVisited";
else
this.className = "ebookDivCellLink";

};
newCell[i].onclick = function() {
var changemp3 = false, audioTags = document.getElementsByTagName("AUDIO");
for(var x=0;x<audioTags.length;x++) {
if (audioTags[x].id != "audioTag_" + mp3Item[0] + "_' . $idList . '") {
changemp3 = true;
break;
}

if(!audioTags[x].paused && audioTags[x].id != "audioTag_" + mp3Item[0] + "_' . $idList . '"){
audioTags[x].pause();
document.getElementById("playingButton_" + mp3Item[0] + "_' . $idList . '").className = "ebookPausedButtonInner";
}
else if (audioTags[x].paused && audioTags[x].id == "audioTag_" + mp3Item[0] + "_' . $idList . '") {
audioTags[x].play();
document.getElementById("playingButton_" + mp3Item[0] + "_' . $idList . '").className = "ebookPlayingButtonInner";
}
else if (!audioTags[x].paused && audioTags[x].id == "audioTag_" + mp3Item[0] + "_' . $idList . '") {
audioTags[x].pause();
document.getElementById("playingButton_" + mp3Item[0] + "_' . $idList . '").className = "ebookPausedButtonInner";
}
}
if (!document.getElementById("audioTag_" + mp3Item[0] + "_' . $idList . '"))
{
this.className = "ebookDivCellOnclickActivate";
document.getElementById("ebookMeccaList' . $idList . '").style.display = "block";
document.getElementById("ebookMeccaListMessage' . $idList . '").style.display = "none";
var offClick = this;
setTimeout(function(){
ebookMeccaPlayAudioBook(mp3Item[1][0], mp3Item[0]);
offClick.className = "ebookDivCellOnclick";
offClick.id = "visited_" + mp3Item[0] + "_' . $idList . '";
ebookMeccaAudioVisitedLink(mp3Item[0]);
}, 200);
}
};
newRow[i].appendChild(newCell[i]);
listDiv.appendChild(newRow[i]);
})(mp3List[i]);
}
}
if (window.addEventListener)
window.addEventListener("load", ebookMeccaCreateAudioList, false);
else if (window.attachEvent)
window.attachEvent("onload", ebookMeccaCreateAudioList);
else
window.onload = ebookMeccaCreateAudioList();
</script>';
}






I converted the above to 100% HTML/javascript for testing although the ID has to be manually edited at the the top of the script & in the HTML tags for multiple posts/usage which is why PHP implementation above is more practical.
HTML code example:

<script type="text/javascript">
var mp3ListAudioBooksId = 0, mp3ListObj = {};

mp3ListObj["ebook1"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_beforebreakfast_oneill.mp3", 1:"Before Breakfast by Eugene O\'Neill (1888 - 1953) 20:17"};
mp3ListObj["ebook2"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_bullerpodingtoncompact_stockton.mp3", 1:"The Buller-Podington Compact by Frank R. Stockton (1834 - 1902) 37:42"};
mp3ListObj["ebook3"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_darkladyofsonnets_shaw.mp3", 1:"The Dark Lady of the Sonnets by George Bernard Shaw (1856 - 1950) 32:11"};
mp3ListObj["ebook4"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_firstandlast_galsworthy.mp3", 1:"The First and the Last by John Galsworthy (1867 - 1933)  47:57"};
mp3ListObj["ebook5"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_howheliedtoherhusband_shaw.mp3", 1:"How He Lied to Her Husband by George Bernard Shaw (1856 - 1950)  38:02"};
mp3ListObj["ebook6"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_outside_glaspell.mp3", 1:"The Outside by Susan Glaspell (1876 - 1948) 23:29"};
mp3ListObj["ebook7"] = {0:"http://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_parlorcar_howells.mp3", 1:"The Parlor Car by William Dean Howells (1837 - 1920) 40:57"};
mp3ListObj["ebook8"] = {0:"http://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_riderstosea_synge.mp3", 1:"Riders to the Sea by John Millington Synge (1871 - 1909) 21:29"};

var mp3ListAudioBooks = Object.keys(mp3ListObj).map((key) => [key, mp3ListObj[key]]);
</script>
<div class="EbookWrapper">
<div class="ebookDivTable">
<div class="ebookDivRow">
<div class="ebookDivCell">
<div class ="ebookDivTitle">
<div class="ebookDivInlineTitle">One Act Play Collections</div>
<div> by various authors</div>
</div>
</div>
</div>
<div class="ebookDivRow">
<div class="ebookDivCell">
<div class="ebookPlayerMessage" id="ebookMeccaListMessage0" title="Audio Player">Click/tap title to open audio player.</div>
<div class="ebookMeccaPlayerToggle" id="ebookMeccaList0" style="display: none;">
<div class="ebookMeccaPlayerContainer">
<div id="ebookMeccaAudioContainer0" class="ebookMeccaPlayerDivAudio"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ebookDivTableList" id="ebookDivTableList0">
</div>
</div>
<script type="text/javascript">
function ebookMeccaPlayAudioBook(bookUrl, mp3ItemId) {
document.getElementById("ebookMeccaAudioContainer" + mp3ListAudioBooksId).innerHTML = "";
var audioDiv = document.getElementById("ebookMeccaAudioContainer" + mp3ListAudioBooksId);
var audioPlayer = document.createElement("AUDIO");
audioPlayer.src = bookUrl;
audioPlayer.type = "audio/mp3";
audioPlayer.controls = "controls";
audioPlayer.className = "ebookAudioTag";
audioPlayer.allow = "autoplay";
audioPlayer.autoplay = true;
audioPlayer.id = "audioTag_" + mp3ItemId + "_" + mp3ListAudioBooksId;
document.getElementById("ebookMeccaAudioContainer" + mp3ListAudioBooksId).appendChild(audioPlayer);
}
function ebookMeccaAudioVisitedLink(ignore) {
var i, newRow = [], newCell = [], newAudio = [];
for(i=0;i<mp3ListAudioBooks.length;i++) {
(function(mp3Item) {
if (document.getElementById("visited_" + mp3Item[0] + "_" + mp3ListAudioBooksId) && ignore != mp3Item[0]) {
document.getElementById("visited_" + mp3Item[0] + "_" + mp3ListAudioBooksId).className = "ebookDivCellLinkVisited";
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).style.display = "none";
}
else if (ignore == mp3Item[0]) {
var newDivInnerPlaying = document.createElement("DIV");
newDivInnerPlaying.className = "ebookPlayingButtonInner";
newDivInnerPlaying.id = "playingButton_" + mp3Item[0] + "_" + mp3ListAudioBooksId;
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).innerHTML = "";
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).onmouseover = function() {
document.getElementById("visited_" + mp3Item[0] + "_" + mp3ListAudioBooksId).onmouseover();
};
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).onmouseout = function() {
document.getElementById("visited_" + mp3Item[0] + "_" + mp3ListAudioBooksId).onmouseout();
};
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).appendChild(newDivInnerPlaying);
document.getElementById("playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId).style.display = "inline-flex";
}
})(mp3ListAudioBooks[i]);
}
}
function ebookMeccaCreateAudioList() {
var listDiv = document.getElementById("ebookDivTableList" + mp3ListAudioBooksId), i, newRow = [], newCell = [], newDivOuterPlaying = [], newDivTextNode = [], newAudio = [];
for(i=0;i<mp3ListAudioBooks.length;i++) {
(function(mp3Item) {
newRow[i] = document.createElement("DIV");
newCell[i] = document.createElement("DIV");
newDivOuterPlaying[i] = document.createElement("DIV");
newDivTextNode[i] = document.createTextNode(mp3Item[1][1]);
newDivOuterPlaying[i].style.display = "none";
newDivOuterPlaying[i].className = "ebookPlayingButtonOuter";
newDivOuterPlaying[i].id = "playing_" + mp3Item[0] + "_" + mp3ListAudioBooksId;
newCell[i].appendChild(newDivOuterPlaying[i]);
newRow[i].className = "ebookDivRow";
newCell[i].className = "ebookDivCellLink";
newCell[i].appendChild(newDivTextNode[i]);
newCell[i].onmouseover = function() {
if (this.className != "ebookDivCellOnclick")
this.className = "ebookDivCellMouseover";
else
this.className = "ebookDivCellClickMouseover";
};
newCell[i].onmouseout = function() {
if (document.getElementById("ebookMeccaAudioContainer" + mp3ListAudioBooksId).firstChild && document.getElementById("ebookMeccaAudioContainer" + mp3ListAudioBooksId).firstChild.src == mp3Item[1][0]) {
this.className = "ebookDivCellOnclick";
}
else if (this.id)
this.className = "ebookDivCellLinkVisited";
else
this.className = "ebookDivCellLink";

};
newCell[i].onclick = function() {
var changemp3 = false, audioTags = document.getElementsByTagName("AUDIO");
for(var x=0;x<audioTags.length;x++) {
if (audioTags[x].id != "audioTag_" + mp3Item[0] + "_" + mp3ListAudioBooksId) {
changemp3 = true;
break;
}

if(!audioTags[x].paused && audioTags[x].id != "audioTag_" + mp3Item[0] + "_" + mp3ListAudioBooksId){
audioTags[x].pause();
document.getElementById("playingButton_" + mp3Item[0] + "_" + mp3ListAudioBooksId).className = "ebookPausedButtonInner";
}
else if (audioTags[x].paused && audioTags[x].id == "audioTag_" + mp3Item[0] + "_" + mp3ListAudioBooksId) {
audioTags[x].play();
document.getElementById("playingButton_" + mp3Item[0] + "_" + mp3ListAudioBooksId).className = "ebookPlayingButtonInner";
}
else if (!audioTags[x].paused && audioTags[x].id == "audioTag_" + mp3Item[0] + "_" + mp3ListAudioBooksId) {
audioTags[x].pause();
document.getElementById("playingButton_" + mp3Item[0] + "_" + mp3ListAudioBooksId).className = "ebookPausedButtonInner";
}
}
if (!document.getElementById("audioTag_" + mp3Item[0] + "_" + mp3ListAudioBooksId) || changemp3)
{
this.className = "ebookDivCellOnclickActivate";
document.getElementById("ebookMeccaList" + mp3ListAudioBooksId).style.display = "block";
document.getElementById("ebookMeccaListMessage" + mp3ListAudioBooksId).style.display = "none";
var offClick = this;
setTimeout(function(){
ebookMeccaPlayAudioBook(mp3Item[1][0], mp3Item[0]);
offClick.className = "ebookDivCellOnclick";
offClick.id = "visited_" + mp3Item[0] + "_" + mp3ListAudioBooksId;
ebookMeccaAudioVisitedLink(mp3Item[0]);
}, 200);
}
};
newRow[i].appendChild(newCell[i]);
listDiv.appendChild(newRow[i]);
})(mp3ListAudioBooks[i]);
}
}
if (window.addEventListener)
window.addEventListener("load", ebookMeccaCreateAudioList, false);
else if (window.attachEvent)
window.attachEvent("onload", ebookMeccaCreateAudioList);
else
window.onload = ebookMeccaCreateAudioList();
</script>






It's all divs.. no literal tables, hyperlinks, iframe, etc.
I added some pure css play/pause in the list itself and made it autoplay as soon as a mp3 is clicked on, although you can change any of it.
Javascript & css allow you to spice it up however you want.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Sir Osis of Liver

Thanks, Chen, I'll try that.  We're using straight html/js in [html][/html] tags in posts, there's no ACP front end, that's consistent with the way the forum was originally set up.  Client has no problem working with code.  I've rebuilt the thing around Looking's suggestion to target the players to a div instead of iframe (thanks to stackoverflow), it's much simpler and everything's in one file so it's easier to manage.  Think I can make a custom bbc tag with the mod I've used on other forums.  Just getting to the menu highlight problem tonight, that's really the last bit I want to get working before I fine tune the thing.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Chen Zhen

Try the HTML code above.

Even though I'm supposed to be working on the arcade I might update my premuimbeat mod to use the HTML5 audio tag. Imo that mod is exactly what you need but not in its current state. It also has a bbcode option for mp3 playlists.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

Oh ya forgot to mention add the CSS code to the custom template index.css file. Clear the browser history for the CSS to take effect. I suspect you know all this but I mention it in case you forget that part.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

Just one more thing... I reversed the last 2 css classes by mistake.
Here is the css again which fixes the pause/play buttons to be in sync with the player:


/* Ebook Player style sheet */
.ebookWrapper {
background: #557EA0;
}

.ebookDivTable {
display: table;
width: 95%;
margin: 20px 20px 0px 20px;
}
.ebookDivTableList {
display: table;
width: 95%;
margin: 0px 20px 20px 20px;
}
.ebookDivRow {
display: table-row;
}

.ebookDivCell {
display: table-cell;
color: white;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivTitle {
text-align: center;
margin: 10px 0 10px 0;
}

.ebookDivInlineTitle {
display: inline;
font-size: 14px;
font-weight: bold;
}

.ebookPlayerMessage {
background: #000;
text-align: center;
background: #A6C3D9;
color:#534444;
border: 3px #557EA0 solid;
border-radius: 10px;
padding: 20px 0 0px 0;
margin: 12px auto 0 auto;
width: 90%;
height: 60%;
}
.ebookMeccaPlayerToggle {
background: #000;
}
.ebookMeccaContainer {
width: 90%;
margin: auto;
}
.ebookMeccaPlayerDivAudio {
text-align: center;
background: #A6C3D9;
color:#534444;
border: 3px #557EA0 solid;
border-radius: 10px;
padding: 2em 0 0.6em 0;
margin:12px 0 0 0;
}
.ebookDivCellLink {
color: white !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivCellLinkVisited {
color: purple !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookDivCellMouseover {
color: blue !important;
text-decoration: none;
cursor: pointer;
}
.ebookDivCellClickMouseover {
color: blue !important;
text-decoration: none;
cursor: pointer;
font-style: oblique;
font-weight: 700;
}
.ebookDivCellOnclickActivate {
color: red !important;
text-decoration: none;
}
.ebookDivCellOnclick {
color: blue !important;
text-decoration: none;
padding-left: 20px;
display: table-cell;
font-size: 10pt;
font-family: arial;
border: 1px black solid;
background: grey;
border-radius: 3px;
}
.ebookAudioTag {
height: 60px;
width: 90%;
margin-top: -20px;
}
.ebookPlayingButtonOuter {
padding-right: 1em;
}
.ebookPausedButtonInner {
display: inline-flex;
position: relative;
top: 1px;
left: 3px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #222;
}
.ebookPlayingButtonInner {
display: inline-flex;
position: relative;
margin-top:0.3em;
    margin-left:0.25em;
    border-left:3px solid #222;
    border-right:3px solid #222;
    width: 0.75em;
    height: 0.8em;
}

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Sir Osis of Liver

Hey, Chen, just getting around to trying this.  Have the html code running here.  Tinkered with css a bit, but it's basically what you posted.  Works the same as iframe version (running here), but without the frames.  Should be pretty easy to make them look the same.  Two problems:  it's not responsive (iframe version is), and the playlist isn't displayed in IE11.  Will look into that soon as I have time.  Coding the playlist titles & mp3 links manually has been a bit ragged up to this point, but hopefully with practice that'll improve.  Don't want to get into an admin frontend. 

Thanks for the code.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Chen Zhen

No problem, glad it works for you.

Play around with the css so you can get it looking the way you want.
Imo the pause button should be adjusted a bit because the gap is too large.. just decrease its width in the css until it looks proper (change: width: 0.75em;).

You should be able to get it looking good on mobile with some adjustment to the css and possibly some javascript dom manipulation.
There are options for how you go about that.

I will test IE11 although normally I just test with MS Edge. I suppose people that still have Windows 7 or 8 use IE11.




My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

You can change the top script that contains the mp3 object list to this:

<script type="text/javascript">
var mp3ListAudioBooksId = 0, mp3ListObj = {}, mp3List = [], mp3ListAudioBooks = [], i = 0;
mp3ListObj["ebook1"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_beforebreakfast_oneill.mp3", 1:"Before Breakfast by Eugene O\'Neill (1888 - 1953) 20:17"};
mp3ListObj["ebook2"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_bullerpodingtoncompact_stockton.mp3", 1:"The Buller-Podington Compact by Frank R. Stockton (1834 - 1902) 37:42"};
mp3ListObj["ebook3"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_darkladyofsonnets_shaw.mp3", 1:"The Dark Lady of the Sonnets by George Bernard Shaw (1856 - 1950) 32:11"};
mp3ListObj["ebook4"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_firstandlast_galsworthy.mp3", 1:"The First and the Last by John Galsworthy (1867 - 1933)  47:57"};
mp3ListObj["ebook5"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_howheliedtoherhusband_shaw.mp3", 1:"How He Lied to Her Husband by George Bernard Shaw (1856 - 1950)  38:02"};
mp3ListObj["ebook6"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_outside_glaspell.mp3", 1:"The Outside by Susan Glaspell (1876 - 1948) 23:29"};
mp3ListObj["ebook7"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_parlorcar_howells.mp3", 1:"The Parlor Car by William Dean Howells (1837 - 1920) 40:57"};
mp3ListObj["ebook8"] = {0:"https://www.archive.org/download/oneactplays002_1110_librivox/oneactplays002_riderstosea_synge.mp3", 1:"Riders to the Sea by John Millington Synge (1871 - 1909) 21:29"};
mp3List = Object.keys(mp3ListObj).map(function(key) {mp3ListAudioBooks[i] = [key, mp3ListObj[key]];i++;});
</script>


.. which works on IE and other browsers I tested. 
Also remember that mp3ListAudioBooksId should increment for every mp3list you display on the page so that id values are unique.
This example list has an id of 0 ... the next list displayed on the same page should be 1, then 2, etc...
Other than that you just swap out mp3 url's and their titles.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Sir Osis of Liver

Will play with it tonight.  I'm running the php version, having a problem including the mp3 list from separate file (so she doesn't have to mess with main code).  Other thing I'd like to do is have the playlist jump to the the player up top when an item is selected so user doesn't have to scroll up on long playlists.  Works on iframe version, haven't tried it yet with this code.  I can make a bbc tag for the post text, but it's just a few lines and easy to just copy it and change the url, that hasn't been a problem.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: