With HTML embedded Musescore sheet does not work properly when inside a Spoiler tag

• Aug 2, 2015 - 14:11

Take a look at this forum post: http://kylelandry.com/forums/viewtopic.php?f=2&t=10#p27 (It's in the second spoiler)
When I embed musescore without a spoiler tag, it works as expected. But when I use a spoiler tag to hide it, it does show up with incorrect width and when you press Play and the sound starts to play, the score does not follow the sound. If you try to scroll down yourself, the score automatically scrolls up again to the first measure.
The HTML equivalent of the (important part of the) post would be:

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none;"><iframe width="100%" height="394" src="https://musescore.com/user/156119/scores/159260/embed" frameborder="0"></iframe><a href="https://musescore.com/user/156119/scores/159260">View this sheet on musescore.com</a></div></div></div>

As I said, when I post the sheet without a spoiler, it works, but inside a spoiler there is this bug. Any workaround possible?


Comments

Hi,
Good job on the integration!

I will check if I can find a solution regarding the spoiler.

On a more general note, I'm not sure how you implemented the BBCode filter but hardcoding the embed code is not necessarly the best way, since it could change. Also it's not really convenient for user to find the score id. You might want to take a look to Oembed and MuseScore.com Oembed API http://developers.musescore.com/#/oembed

An example https://musescore.com/oembed/endpoint?url=https://musescore.com/user/15…

In reply to by [DELETED] 5

Hi,
Thanks for fixing it! Btw nice job of the plugin developer team, the plugin looks really neat and has nice animations like the automatic scrolling, but it still is light such that the plugin loads almost instantly (unlike YouTube plugin).

As for the correct embedding: I just realized how important this is, when I noticed that scores from users like ClassicMan do not have an id like for example this one: https://musescore.com/classicman/scores/109789 (normally, instead of the user name, there is "users/[id]" )
Which means, they cannot be embedded with my implementation. So, I will have to rely on oembed then. I originally implemented it with phpBB's Custom BBCode system , which means that I did not have to add or edit files on the server. However, I guess with oembed there need to be added the oembed files, right?

Do you still have an unanswered question? Please log in first to post your question.