Link with javascript:"Skip to chapter"

[Sebastien Lucas]

Hi,

I'm using Monocle to read epub and recently a user warned me about the dead links in the TOC page

The source HTML is like that :

<div class="SOMvol">
      <a class="calibre3" href='epubfs.php?data=1509&amp;db=0&amp;comp=Text~SLASH~part0006.html#part-01'>ACTE 1</a>

      <div class="SOMpart">
        <a class="calibre3" href='epubfs.php?data=1509&amp;db=0&amp;comp=Text~SLASH~part0007_split_000.html#chap-01'>XXX</a>
      </div>

      <div class="SOMpart">
        <a class="calibre3" href='epubfs.php?data=1509&amp;db=0&amp;comp=Text~SLASH~part0009_split_000.html#chap-02'>XXX</a>
      </div>

      <div class="SOMpart">
        <a class="calibre3" href='epubfs.php?data=1509&amp;db=0&amp;comp=Text~SLASH~part0011_split_000.html#chap-03'>XXX</a>
      </div>
</div>

if I look at the rendered HTML with Firebug I see :

<a class="monelem_controls_stencil_mask" href="javascript:"Skip to chapter"" style="display: block; left: 0px; top: 1px; width: 101px; height: 19px; position: absolute;"></a>
<a class="monelem_controls_stencil_mask" href="javascript:"Skip to chapter"" style="display: block; left: 0px; top: 36px; width: 216px; height: 19px; position: absolute;"></a>
<a class="monelem_controls_stencil_mask" href="javascript:"Skip to chapter"" style="display: block; left: 16px; top: 55px; width: 253px; height: 19px; position: absolute;"></a>
<a class="monelem_controls_stencil_mask" href="javascript:"Skip to chapter"" style="display: block; left: 16px; top: 90px; width: 238px; height: 19px; position: absolute;"></a>
<a class="monelem_controls_stencil_mask" href="javascript:"Skip to chapter"" style="display: block; left: 16px; top: 125px; width: 215px; height: 19px; position: absolute;"></a>

So there is some link that are drawn on top of the TOC links. The problem is that I can no longer use the links to navigate to a specific chapter.

Did I miss something ?

Thanks in advance.

Sébastien

[Joseph Pearson]

Hi Sebastien, you're using the Stencil to lift the links above the panels that handle page interactions (swipe-to-turn, etc).

The test here shows its function:  http://test.monoclejs.com/test/stencil/index.html

Take a look at the test's source and compare it to your own implementation.

— J

--
You received this message because you are subscribed to the Google Groups "Monocle" group.
To unsubscribe from this group and stop receiving emails from it, send an email to monocle-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sebastien Lucas]

Thanks Joseph,

I've completely removed the stencil for now and it works as expected (by me). I'll add it again when I will have understood it's real use.

Thanks again.

[Joseph Pearson]

Right, fair enough.

In general if your books do have links to other chapters, I do recommend that you use the stencil, because it's the simplest way to intercept the internal link clicks and call Reader.skipToChapter().

If you don't do this, you'll find that the iframe will just follow the link directly, but Monocle does not treat the subsequent page as a component, and all sorts of weirdness ensues.

It sounds to me like the Stencil doesn't recognize your internal links as internal links for some reason. Maybe it's the encoding of the ampersands, or some other mismatch between the href and your component URLs. You could either get to the bottom of that, or you could add a componentmodify listener that scans each component for internal links and adds an onClick handler to invoke Reader.skipToChapter.

If you do want to investigate the Stencil side of things, see here:

   https://github.com/joseph/Monocle/blob/master/src/controls/stencil.js#L418-L426

Happy to take patches for URL encoding normalization or similar, especially if you can provide the test case in that Stencil test.

Cheers,

— J

[Sebastien Lucas]

Hi Joseph,

Your mail got me to think (good thing !).

I think I know why I have to problem, my link is like that :

<a class="calibre3" href='epubfs.php?data=1509&amp;db=0&amp;comp=Text~SLASH~part0007_split_000

.html#chap-01'>XXX</a>

the component declared on my book data object is just : Text~SLASH~part0007_split_000.html#chap-01

So my link should only be :

<a class="calibre3" href='Text~SLASH~part0007_split_000.html#chap-01'>XXX</a>

The stencil code will simply call getComponent with the component in the href and it should work.

I'll change my code and keep you posted.

Thanks again.


Sébastien