Question

I Integrated a Book reader tool Monoscle written in javascript to get the node.tpl content in the book reader format. I tested it on my php document and it was working great, i am able to get the content from the database in the monoscle tool.

However, im unable to do the same in Drupal i.e., i want the content of node.tpl in the TOOL!

I followed these steps to itegrate the tool.

1. I added JavaScripts and css in Bartic.info file under themes
2. Initiated some JavaScript in node.tpl [Because its not initiating/working when placed in Bartic.info]

3. Placed the rendered content inside the div in node.tpl, which is initiated by JavaScript

   <div id="rabbit"><?php print render($content); ?></div>

   Now the thing is am getting the Monoscle framework but not the content – neither from $content nor any paragraph.

Answer 1

I have gone through book flipping tool Monoscle and Also implemented this tool successfully on drupal system..

1] copy all files css and javascripts in seperate directory

2] Now Initilize some javascript path on you theme.info and as you mention its bartik.info file and these paths should be in order

3] First create a directory in scripts of bartik theme directory with book where you can place all file on monoscle file into seperate.. and even for CSS file.

4] below is the order

stylesheets[all][] = css/book/styles/monocore.css
stylesheets[all][] = css/book/styles/monoctrl.css
stylesheets[all][] = css/book/styles/rabbit_css.css

    scripts[] = scripts/jquery.js
    `this is the jquery library you need to added up`

scripts[] = scripts/book/scripts/monocore.js
scripts[] = scripts/book/scripts/core/monocle.js
scripts[] = scripts/book/scripts/compat/env.js
scripts[] = scripts/book/scripts/compat/css.js
scripts[] = scripts/book/scripts/compat/stubs.js
scripts[] = scripts/book/scripts/compat/browser.js

scripts[] = scripts/book/scripts/core/events.js
scripts[] = scripts/book/scripts/core/factory.js
scripts[] = scripts/book/scripts/core/styles.js
scripts[] = scripts/book/scripts/core/reader.js
scripts[] = scripts/book/scripts/core/book.js
scripts[] = scripts/book/scripts/core/component.js
scripts[] = scripts/book/scripts/core/place.js

scripts[] = scripts/book/scripts/controls/panel.js
scripts[] = scripts/book/scripts/panels/twopane.js
scripts[] = scripts/book/scripts/panels/eink.js

scripts[] = scripts/book/scripts/dimensions/columns.js
scripts[] = scripts/book/scripts/flippers/slider.js
scripts[] = scripts/book/scripts/flippers/instant.js
scripts[] = scripts/book/scripts/dimensions/vert.js
scripts[] = scripts/book/scripts/flippers/legacy.js

scripts[] = scripts/book/rabbit_start.js

And this scripts[] = scripts/book/rabbit_start.js is custom made script file where it contains the monoscle code

   Monocle.DEBUG = true;

      // Initialize the reader element.
      Monocle.Events.listen(
        window,
        'load',
        function () { window.reader = Monocle.Reader('rabbit'); }
      );

And also with stylesheets[all][] = css/book/styles/rabbit_css.css

We need to add #rabbit infront of every selector style in rabbit_css.css and below is the css code

#rabbit {
        width: 300px;
        height: 420px;
        border: 1px solid #000;
        background-color: #CCC;
        overflow: hidden;
}

#rabbit p {
        line-height: 130%;
      }
#rabbit      img {
        max-width: 98%;
        max-height: 98%;
        -webkit-column-break-before: always;
      }
#rabbit      .dedication {
        text-align: center;
        font-style: italic;
        margin: 16em 0 10em;
      }
 #rabbit    .center {
        text-align: center;
      }
#rabbit      h1, h2, h3 {
        text-align: center;
      }
#rabbit      h1 small {
        font-size: 85%;
        font-variant: small-caps;
      }
 #rabbit     h2 {
        margin-bottom: 3em;
        font-weight: normal;
      }
 #rabbit     h2 small {
        font-size: 85%;
        font-style: italic;
      }

5] Select which content type need to work with for example, you have articles as content type… then copy a node.tpl.php and paste it & rename with node--articles.tpl.php

6] Open node--articles.tpl.php and search for <?php print render($content); ?>.. this code display the content of article type.

7] Now edit that code… with your desired fileds in content type

<div id="rabbit"><?php print render($content); ?></div>

or

<div id="rabbit"><?php print render($content['field_name']); ?></div>

8] Save all file and go Configuration->Performance->Clear cache

9] Now open your desired article and it will display in monoscle book reader format..