#376 ✓ staged
Enric

Problems with the webpage plugin and MediaWiki anchors

Reported by Enric | February 28th, 2011 @ 10:34 PM | in 0.5

Hi,

The case is that whenever using MediaWiki anchors for loading wiki pages with the webpage plugin, it only works with the first case. The rest of URLS declared with the # anchor only load the wiki page.

An example here: http://www.mozilla.cat/drumbeat/stonesoup/index.html

Where only https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite#... gets opened correctly. The rest of links stay at https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite showing the top of the page.

It happens in Firefox. With Chrome it works better, although bypassing a little bit the anchors...

Thank you very much in advance!

Enric

Comments and changes to this ticket

  • Enric
  • Scott Downe

    Scott Downe March 1st, 2011 @ 12:13 PM

    • State changed from “new” to “assigned”
    • Milestone set to 0.4
    • Assigned user set to “Scott Downe”
    • Milestone order changed from “40” to “0”
  • Scott Downe

    Scott Downe March 1st, 2011 @ 12:32 PM

    I can confirm the anchors are no working in Firefox 3.6, but in FireFox 4.0 it works perfectly.

    I will reduce this to see if it is a us or the iframe itself.

    I can also confirm that chrome works but is bypassing a bit of the anchor.

    I am not, however, getting this first anchor to work in FireFox 3.6, no anchors work at all in FireFox 3.6.

  • Scott Downe

    Scott Downe March 1st, 2011 @ 12:42 PM

    I am pretty sure this is in fact us, and not FireFox.

    I ran this in FireFox 3.6

    <iframe width="100%" height="300" src="https://wiki.mozilla.org/Drumbeat/StoneSoup"></iframe>
    <iframe width="100%" height="300" src="https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite#Summary"></iframe>
    

    and I got the anchors correctly.

    So yeah, I'll be tracking this down.

  • Scott Downe

    Scott Downe March 1st, 2011 @ 01:23 PM

    I have reproduced this behaviour with this page:

    <div id="target"></div>
    <script>
    
      document.addEventListener( "DOMContentLoaded", function () {
          var options = {};
    
          options._iframe  = document.createElement( 'iframe' ),
          options._iframe.setAttribute('width', "100%");
          options._iframe.setAttribute('height', "100%");
          options._iframe.src = "https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite"
          options._iframe.style.display = 'inline';
          document.getElementById( "target" ).appendChild(options._iframe);
          var options2 = {};
    
          options2._iframe  = document.createElement( 'iframe' ),
          options2._iframe.setAttribute('width', "100%");
          options2._iframe.setAttribute('height', "100%");
          options2._iframe.src = "https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite#Summary"
          options2._iframe.style.display = 'inline';
          document.getElementById( "target" ).appendChild(options2._iframe);
      }, false );
    
    </script>
    

    I think it has to do with caching the source in the iframe generated via javascript in FireFox 3.6.

    Scratch all the above, it is wrong. It is now working as expect all of a sudden.

  • Enric

    Enric March 1st, 2011 @ 02:06 PM

    Ok, for the purpose of the presentation and the pilot we're doing it's great to know it works with Firefox 4 (it behaves perfectly there :)

    If I can help with other tests tell me so please.

    Enric

  • Scott Downe

    Scott Downe March 1st, 2011 @ 02:14 PM

    I think I have it narrowed down.

    <div id="target"></div>
    <script>
    
      document.addEventListener( "DOMContentLoaded", function () {
          var options = {};
    
          options._iframe  = document.createElement( 'iframe' );
          options._iframe.setAttribute('width', "100%");
          options._iframe.setAttribute('height', "300");
          options._iframe.id  = "first";
          options._iframe.src = "https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite"
          //options._iframe.style.display = 'none';
          document.getElementById( "target" ).appendChild(options._iframe);
          var options2 = {};
    
          options2._iframe  = document.createElement( 'iframe' );
          options2._iframe.setAttribute('width', "100%");
          options2._iframe.setAttribute('height', "300");
          options2._iframe.id  = "second";
          options2._iframe.src = "https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite#Summary"
          options2._iframe.style.display = 'none';
          document.getElementById( "target" ).appendChild(options2._iframe);
    
          setTimeout(function() {
            //options2._iframe.src = "https://wiki.mozilla.org/Drumbeat/StoneSoup/Write_with_a_satellite#Summary"
            options2._iframe.style.display = 'inline';
          }, 10000);
    
      }, false );
    
    </script>
    

    Is broken as intended. This is an issue in FireFox 3.6, but the commented out line inside the timeout will work around this, so I will add that fix, and push a patch.

  • Scott Downe

    Scott Downe March 1st, 2011 @ 02:24 PM

    I have a temporary workaround here: https://github.com/ScottDowne/popcorn-js/commits/376

    Fore some reason, Firefox 3.6 fudges the anchor if you are changing the display too late after you set the source. If you update the source just before you change the display, everything should update.

    But... I think I would fail my own fix because I do not like this much overhead for such a use case. If this was broken in 4.0 and chrome, maybe, but for this fix to matter you need ff 3.6 and be using anchors. Doesn't seem worth it to me.

    What do others think?

    This gives Enric two options. Either use FireFox 4.0, or use my one line addition for now, while we sort out if this overhead is acceptable.

  • Enric

    Enric March 1st, 2011 @ 05:41 PM

    • Milestone order changed from “34” to “0”

    Hi Scott, thanks for this! I'm happy using FireFox 4.0 while you see how to sort this out :)

    Enric

  • Scott Downe

    Scott Downe March 14th, 2011 @ 12:05 PM

    • Milestone changed from 0.4 to 0.5
    • Milestone order changed from “35” to “0”
  • Enric

    Enric March 14th, 2011 @ 01:30 PM

    Hi Scott,

    Just wanted to know if you think this behaviour could be solved in further versions of popcorn.js

    For some purposes is fine that it works in Firefox4 but in general I think is an important issue for making it work fine with MediaWiki but also other very common HTML pages...

    Thanks again,

    Enric

  • Scott Downe

    Scott Downe March 24th, 2011 @ 05:57 PM

    • State changed from “assigned” to “peer-review-requested”

    You know what, I think I am going to give my patch to the review process and see what comes of it.

    https://github.com/ScottDowne/popcorn-js/commits/376

  • Rick

    Rick March 24th, 2011 @ 06:09 PM

    • State changed from “peer-review-requested” to “super-review-requested”

    There is actually no way that this could break anything... ever. PR+

  • annasob

    annasob March 31st, 2011 @ 10:31 PM

    Enric can you weigh in on this. Does your demo work now on all browsers with this fix?

  • annasob

    annasob March 31st, 2011 @ 10:44 PM

    • State changed from “super-review-requested” to “staged”

    SR+ i used enric's url to test this. Looks good to me. If anything else is wrong another ticket can be opened.

    Staged in annasob/popcorn-js commit

  • Enric

    Enric April 10th, 2011 @ 07:13 PM

    Hi, sorry for the delay in answering...

    From http://www.mozilla.cat/drumbeat/stonesoup/ using another browser rather than Firefox4 still doesn't work apparently :(

    I tried with the latest version of popcorn.webpage.js and popcorn.js, as downloaded from https://github.com/webmademovies/popcorn-js/zipball/master but still does not call the HTML anchors correctly.

    Please confirm if I'm doing something wrong or need to open a new ticket.

    Thank you very much,

    Enric

  • Scott Downe

    Scott Downe April 10th, 2011 @ 08:38 PM

    I took a look at the source in https://github.com/webmademovies/popcorn-js/zipball/master, and the fix needed is not there.

    That link is giving you an older version. you need 0.5.

    I am not familiar with github, looking at this https://github.com/annasob/popcorn-js/downloads does not show 0.5 in the list of downloadable files, and even worse, going to https://github.com/annasob/popcorn-js/zipball/0.5 is actually giving a copy of 0.4.1. No clue how to fix this. Anna? is this something we tell github to do? or is this an auto generated link?

    I can confirm the fix exists in 0.5, and does work.

  • annasob

    annasob April 10th, 2011 @ 09:54 PM

    Enric,
    You have to go to https://github.com/annasob/popcorn-js and press the download button. Just download the source as oppose to picking a package.

  • Scott Downe

    Scott Downe April 11th, 2011 @ 09:22 AM

    The source in the download button gives you this link: https://github.com/annasob/popcorn-js/zipball/0.5

    The filename of the file that link gives you is not correct: annasob-popcorn-js-v0.4.1-25-ga79f2af-1.zip it SAYS it is 0.4.1, but don't believe it, it is a 0.5. I open it and verified the source and it has the media anchor fix. It fooled me once.

  • Enric

    Enric April 11th, 2011 @ 10:15 AM

    Yuhuu, finally works with the .js inside https://github.com/annasob/popcorn-js/zipball/0.5 :)

    http://www.mozilla.cat/drumbeat/stonesoup/

    With Firefox3.6 some of the links open for a sec the top of the page first and then jump to the anchor, but it's fine...

    Thank you very mucho!

    Enric

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Pages