How do you load the Monocle reader without an iFrame?

125 views
Skip to first unread message

michael....@gmail.com

unread,
Dec 9, 2013, 1:18:05 PM12/9/13
to monoc...@googlegroups.com

Does anyone know how do you load Monocle without an iFrame?

The reason I want this is because I want to edit the contents of this iframe to be able to add Highlights, Notes, Bookmarks, etc.

Also "mouseup/click" events are not working on the contents of the iframe... they are working on the other elements monocle plugin is creating but not on the contents of the iframe.

Thanks for your help!

Mike

Joseph Pearson

unread,
Dec 12, 2013, 2:43:10 PM12/12/13
to monoc...@googlegroups.com
You mean you don't want to use an iframe to show the components? Monocle is built around this foundation — primarily because it sandboxes the component's styles from the rest of your page.

If you just want to edit the contents of the frame though, go for it. JS gives you access to the DOM of child frames, and the monocle:componentmodify event fires at the right time to make adjustments (ie, before the page sizes are calculated).

Assuming window.reader:

window.reader.listen('monocle:componentmodify', function (evt) {
   var doc = evt.m.document;
           doc.appendChild(document.createTextNode('Hello world'));
        });

As for mouse events on the iframe, make sure you use the Magic panel rather than the older iMode panel. You could also use the Marginal panel for something more like iBooks, but like iBooks, the tap targets for page turns are very small on phone-sized screens.

— 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/groups/opt_out.

michael....@gmail.com

unread,
Dec 12, 2013, 6:57:57 PM12/12/13
to monoc...@googlegroups.com, jpea...@overdrive.com
Thank you for the response and your time Joseph.

Can you tell me if there a built in method or function by which I can STORE my location... continue reading.... and then go back to that stored location... I'm thinking in terms of highlights... like how do I store the LOCATION of a highlight? I noticed that page numbers change as you resize the browser... so can't really use the page number as the location.... what can I use as the location?
Reply all
Reply to author
Forward
0 new messages