Resetting / reloading new Book

brandonbatie commented 11 years ago

I am new to this but I have Monocle working well, but what I want to do is to load a new book in the page without having to change pages. I am using JQuery/Ajax to load the first book: jQuery.get('book1.html', function(data) { $("#reader").html(data); Monocle.Reader('reader'); });

Then I want to load book2.html but if I use the same code it only loads the first page of it. Is there a way to reset or soemthing to load the full book?

Thanks

nirmaala commented 11 years ago

$.get("reader.html", function(data) { $('#reader').html(data); });

brandonbatie commented 11 years ago

@nirmaala Thanks, but it does the same thing and only loads the first page of text, the rest of the pages come up blank.

nirmaala commented 11 years ago

reader.html file should be as follows:

<!doctype html>

``` ```

brandonbatie commented 11 years ago

Thanks but I still cant get it, it seems like it should be an easy thing just using the same as the original call. Anyway, I will just use a new page or a different library.

Thank you for your help though.

nirmaala commented 11 years ago

I have used this and its working fine.

nirmaala commented 11 years ago

If location of your main file and reader file is different, make sure path provided ( in getComponents & in getContents function ) in reader.html file must be correct and init function doesn't work in this case . So change your function name in reader.html file as i have changed here as demo().

My last comment was not posted correctly so i m again posting in parts .Hope it will help u reader.html file should be as follows:

Inside head tag you have to import reqired monacle js and css files

and then inside body tag, you need to write following code:

brandonbatie commented 11 years ago

I think my problem is mine is a lot more basic. I have two short stories both contained in separate HTML files with formatted text. I have the one loading fine on start up. I just need a function that will load the next story into the same container. It's frustrating as it seems like it should be easy since I don't need a toc or chapters or anything just the new file.

Sent from my iPhone http://cincyplanet.com http://batiesphotography.com

On Apr 16, 2013, at 5:46 AM, Nirmala Maurya notifications@github.com wrote:

reader.html file should be as follows:

<!doctype html>

(function () { var bookData = { getComponents: function () { return [ 'title.html', 'epubbooksinfo.html', 'chapter-001.html', 'chapter-002.html', 'chapter-003.html', 'chapter-004.html', 'chapter-005.html', ]; }, getContents: function () { return [ { title: "Title Page", src: "title.html", }, { title: "epubBooks Information", src: "epubbooksinfo.html", }, { title: "CHAPTER I", src: "chapter-001.html", }, { title: "CHAPTER II", src: "chapter-002.html", }, { title: "CHAPTER III", src: "chapter-003.html", }, { title: "CHAPTER IV", src: "chapter-004.html", }, { title: "CHAPTER V", src: "chapter-005.html", }, ]; }, getComponent: function (componentId) { return this.getViaAjax(componentId); }, getMetaData: function(key) { return { title: "Book Name", creator: "James Joyce" }[key]; }, getViaAjax: function (path) { var ajReq = new XMLHttpRequest(); ajReq.open("GET", path, false); ajReq.send(null); return ajReq.responseText; } } function demo(){ var bkTitle = bookData.getMetaData('title'); window.placeSaver = new Monocle.Controls.PlaceSaver(bkTitle); var options = { place: placeSaver.savedPlace(), stylesheet: 'body {}', panels: Monocle.Browser.on.Kindle3 ? Monocle.Panels.eInk : Monocle.Panels.Marginal } window.reader = Monocle.Reader('reader', bookData, options, prep); } function prep(rdr) { rdr.addControl(placeSaver, 'invisible'); oldBookSpinner(reader); oldBookMagnifier(reader); oldBookTitle(reader); var chT = oldBookChapterTitle(reader); var pgN = oldBookPageNumber(reader); oldBookScrubber(reader, chT, pgN); Monocle.Events.listen(window, 'resize', onResize); } function onResize() { window.reader.resized(); } Monocle.Events.listen(window, 'load',demo()); })(); — Reply to this email directly or view it on GitHub.

nirmaala commented 11 years ago

i have faced this issue many times . some times the problem is related to path and many times it is related to the order in which js files were imported.

Check these may be it can help.

can u show your reader.html file?

brandonbatie commented 11 years ago

I don't have a reader file. I was using the example of loading the info from a div tag. I'm thinking this might be the problem. But to load separate stories would I need two reader files and the load each one or is there a way to do one and load both stories?

Sent from my iPhone http://cincyplanet.com http://batiesphotography.com

On Apr 16, 2013, at 7:48 AM, Nirmala Maurya notifications@github.com wrote:

i have faced this issue many times . some times the problem is related to path and many times it is related to the order in which js files were imported.

Check these may be it can help.

can u show your reader.html file?

— Reply to this email directly or view it on GitHub.

nirmaala commented 11 years ago

No for seperate stories there is no need of reader.html file , to load multiple html file in one time reader.html is required. It loaded dynamically html files.

brandonbatie commented 11 years ago

So it seems like what I am doing now should work. I will doublecheck my JavaScript order and everything else and see if it will help. Thank you very much for your help.

Sent from my iPhone http://cincyplanet.com http://batiesphotography.com

On Apr 16, 2013, at 8:14 AM, Nirmala Maurya notifications@github.com wrote:

No for seperate stories there is no need of reader.html file , to load multiple html file in one time reader.html is required. It loaded dynamically html files.

— Reply to this email directly or view it on GitHub.

brandonbatie commented 11 years ago

Still no luck. All I am trying to do is to load a file on start up: book1.html Then on the click of a button load book2.html into the same container. Ive double checked the js or and everything else. But it still only loads the very first page then the rest of the pages are blank.

Would it be better to load them like a single multipage book, I do plan to add more if I can ever get this working.

Would it be possible for me to get the files you list, so I know how to do the title.html, info html etc? Im not real skilled in this so its kind of daunting.

nirmaala commented 11 years ago

I am loadind an epub in a div, an extracted epubs have three folder , one of them is OPS all html files are place inside this folder . And i am also creating my reader.html file inside OPS folder. Lets say my OPS folder is placed at some path at "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040" , and i have following html files in OPS folder (title.html, epubbooksinfo.html,chapter-001.html,chapter-002.html, chapter-003.html,chapter-004.html,chapter-005.html)

Then in reader.html inside body tag code would be:

    <script type="text/javascript">
        (function () {

         var bookData = {
         getComponents: function () {
         return [

                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html',
                 '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html',
                 ];
         },
         getContents: function () {
         return [
                 {
                 title: "Title Page",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html",
                 },
                 {
                 title: "epubBooks Information",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html",
                 },
                 {
                 title: "CHAPTER I",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html",
                 },
                 {
                 title: "CHAPTER II",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html",
                 },
                 {
                 title: "CHAPTER III",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html",
                 },
                 {
                 title: "CHAPTER IV",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html",
                 },
                 {
                 title: "CHAPTER V",
                 src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html",
                 },
                 ];
         },
         getComponent: function (componentId) {

         var response =         this.getViaAjax(componentId).replace("<head>", "<head><base href='/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/'/>")

         return response;
         },
         getMetaData: function(key) {
         return {
         title: "A Portrait of the Artist as a Young Man",
         creator: "James Joyce"
         }[key];
         },
         getViaAjax: function (path) {
         var ajReq = new XMLHttpRequest();
         ajReq.open("GET", path, false);
         ajReq.send(null);
         return ajReq.responseText;
         }
         }

         // Initialize the reader element.
         function demo(){

         //alert("initalized");

         var bkTitle = bookData.getMetaData('title');
         window.placeSaver = new Monocle.Controls.PlaceSaver(bkTitle);
         var options = {
         place: placeSaver.savedPlace(),
         //  stylesheet: 'body {color:"+color+" , background-color:"+bg+"}',
         panels: Monocle.Browser.on.Kindle3 ?
         Monocle.Panels.eInk :
         Monocle.Panels.Marginal
         }

         window.reader = Monocle.Reader('reader', bookData, options, prep);
         }
         function prep(rdr) {
         rdr.addControl(placeSaver, 'invisible');
         oldBookSpinner(reader);
         oldBookMagnifier(reader);
         oldBookTitle(reader);
         var chT = oldBookChapterTitle(reader);
         var pgN = oldBookPageNumber(reader);
         oldBookScrubber(reader, chT, pgN);
         Monocle.Events.listen(window, 'resize', onResize);
         }

         function onResize() {
         window.reader.resized();
         }
         Monocle.Events.listen(window, 'load',demo());

         })();

        </script>

On parsing TOC.ncx file we can get order in which files are used in getComponents() and getContent() function .

brandonbatie commented 11 years ago

Thank you very much. I will do my best to get it working with this sample. The only part that really lost me was the last part about the TOC.ncx file. But I first want to get it loading and working with the different files.

Thanks again. Brandon

On Apr 19, 2013, at 12:07 AM, Nirmala Maurya notifications@github.com wrote:

I am loadind an epub in a div, an extracted epubs have three folder , one of them is OPS all html files are place inside this folder . And i am also creating my reader.html file inside OPS folder. Lets say my OPS folder is placed at some path at "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040" , and i have following html files in OPS folder (title.html, epubbooksinfo.html,chapter-001.html,chapter-002.html, chapter-003.html,chapter-004.html,chapter-005.html)

Then in reader.html inside body tag code would be:

<script type="text/javascript">
    (function () {

     var bookData = {
     getComponents: function () {
     return [

             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html',
             '/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html',
             ];
     },
     getContents: function () {
     return [
             {
             title: "Title Page",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html",
             },
             {
             title: "epubBooks Information",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html",
             },
             {
             title: "CHAPTER I",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html",
             },
             {
             title: "CHAPTER II",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html",
             },
             {
             title: "CHAPTER III",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html",
             },
             {
             title: "CHAPTER IV",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html",
             },
             {
             title: "CHAPTER V",
             src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html",
             },
             ];
     },
     getComponent: function (componentId) {

     var response =         this.getViaAjax(componentId).replace("<head>", "<head><base href='/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/'/>")

     return response;
     },
     getMetaData: function(key) {
     return {
     title: "A Portrait of the Artist as a Young Man",
     creator: "James Joyce"
     }[key];
     },
     getViaAjax: function (path) {
     var ajReq = new XMLHttpRequest();
     ajReq.open("GET", path, false);
     ajReq.send(null);
     return ajReq.responseText;
     }
     }

     // Initialize the reader element.
     function demo(){

     //alert("initalized");

     var bkTitle = bookData.getMetaData('title');
     window.placeSaver = new Monocle.Controls.PlaceSaver(bkTitle);
     var options = {
     place: placeSaver.savedPlace(),
     //  stylesheet: 'body {color:"+color+" , background-color:"+bg+"}',
     panels: Monocle.Browser.on.Kindle3 ?
     Monocle.Panels.eInk :
     Monocle.Panels.Marginal
     }

     window.reader = Monocle.Reader('reader', bookData, options, prep);
     }
     function prep(rdr) {
     rdr.addControl(placeSaver, 'invisible');
     oldBookSpinner(reader);
     oldBookMagnifier(reader);
     oldBookTitle(reader);
     var chT = oldBookChapterTitle(reader);
     var pgN = oldBookPageNumber(reader);
     oldBookScrubber(reader, chT, pgN);
     Monocle.Events.listen(window, 'resize', onResize);
     }

     function onResize() {
     window.reader.resized();
     }
     Monocle.Events.listen(window, 'load',demo());

     })();

    </script>

On parsing TOC.ncx file we can get order in which files are used in getComponents() and getContent() function .

— Reply to this email directly or view it on GitHub.

nirmaala commented 11 years ago

On parsing TOC.ncx file , we get order of file reading, in which order files will display on reading book. In your case if you know , which book has to show first (order of file reading) , you can write inside getContent() function .

brandonbatie commented 11 years ago

So will this way show a listing of the charters they can click on or is that something that has to be done separately?

Sent from my iPhone http://cincyplanet.com http://batiesphotography.com

On Apr 19, 2013, at 7:57 AM, Nirmala Maurya notifications@github.com wrote:

On parsing TOC.ncx file , we get order of file reading, in which order files will display on reading book. In your case if you know , which book has to show first (order of file reading) , you can write inside getContent() function .

— Reply to this email directly or view it on GitHub.

nirmaala commented 11 years ago

This is related to get order of html files, as i have mention below Title Page has to come first then epubBooks Information , CHAPTER I and so on ........ when any page completed , reader automatically loads page of next order

getContents: function () { return [ { title: "Title Page", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html", }, { title: "epubBooks Information", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html", }, { title: "CHAPTER I", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html", }, { title: "CHAPTER II", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html", }, { title: "CHAPTER III", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html", }, { title: "CHAPTER IV", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html", }, { title: "CHAPTER V", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html", }, ]; },

brandonbatie commented 11 years ago

Ok that makes sense. I thought maybe I had to add something else but it just uses the order they are listed in that makes it easier.

Sent from my iPhone http://cincyplanet.com http://batiesphotography.com

On Apr 19, 2013, at 8:11 AM, Nirmala Maurya notifications@github.com wrote:

This is related to get order of html files, as i have mention below Title Page has to come first then epubBooks Information , CHAPTER I and so on ........

getContents: function () { return [ { title: "Title Page", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/title.html", }, { title: "epubBooks Information", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/epubbooksinfo.html", }, { title: "CHAPTER I", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-001.html", }, { title: "CHAPTER II", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-002.html", }, { title: "CHAPTER III", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-003.html", }, { title: "CHAPTER IV", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-004.html", }, { title: "CHAPTER V", src: "/Users/mpsltd/Library/Application Support/iPhone Simulator/6.0/Applications/68989007-B1CE-4858-90F8-70255CFC0937/Documents/epubs/9789984859040/OPS/chapter-005.html", }, ]; },

— Reply to this email directly or view it on GitHub.

nirmaala commented 11 years ago

correct :)

joseph / Monocle

Resetting / reloading new Book #188