RealBook - Advanced example

Welcome to the

RealBook

advanced example

What's done in this example ?

  • First thing, we fixed the size in the parameters. It is also possible to define it in the stylesheet.
  • We decided to use the "notes" predefined theme.
  • As you can see it in the CSS part, each page can be styled. As giving another background to the cover.
  • In the next pages, we will add media as an embeded video or a contact form.

Let's begin !

This div has an absolute positionning.

Here we have internal links.

It can be usefull for a summary.


Let's go to the next page

Or go to page 6


To create an internal link, let it refere to the ID of the page and add data-rel="realbook".


Naturally, you can create links to an other web page.

Do not hesitate to visit my page at InDaCloud

Add some pictures

A form is easy too.


For this example, we have added onClick="window.alert('Message sent !'); return false;" to prevent the refresh.It's up to you to bind your function.

A page with jQuery inside.



This could be a FAQ.

Right here the anwser for the first question.
Of course it works !
This could be the right anwser but not sure it is.

Another rich content.

some embeded content from anywhere like a YouTube video

© 2013 RealBook / InDaCloud

How it's done

Each page is defined by a <div> inside the #content. The IDs are required for the navigation. The .page class is used for the styling. The destination container is #book

<div id="book"></div>
<div id="content">
    <div id="cover" class="page">
        <h3>Welcome to the</h3>
        <h1>RealBook</h1>
        <h3>advanced example</h3>
    </div>
    <div id="page1" class="page">
        <h3>What\'s done in this example ?</h3>
        <ul>
            <li>First thing, we fixed the size in the parameters. It is also possible to define it in the stylesheet.;</li>
            <li>We decided to use the "notes" predefined theme.;</li>
            <li>As you can see it in the CSS part, each page can be styled. As giving another background to the cover.;</li>
            <li>In the next pages, we will add media as an embeded video or a contact form.;</li>
        </ul>
        <p>Let\'s begin !;</p>
        <div class="to-the-bottom">
            <p>This <code>div</code> has an absolute positionning.</p>
        </div>
    </div>
    <div id="page2" class="page">
        <h3>Here we have internal links.;</h3>
        <p> It can be usefull for a summary.;</p>
        <br />
        <p><a href="#page3" data-rel="realbook">Let\'s go to the next page;</a></p>
        <p><a href="#page6" data-rel="realbook">Or go to page 6;</a></p>
        <br />
        <p>To create an internal link, let it refere to the ID of the page and add <code>data-rel="realbook"</code>.;</p>
        <br />
        <p>Naturally, you can create links to an other web page.;</p>
        <p>Do not hesitate to visit my page at ;<a href="http://indacloud.fr" target="_blank">InDaCloud</a></p>
    </div>
    <div id="page3" class="page">
        <h3>Add some pictures;</h3>
        <img src="img/001.jpg" width="150" />
        <img src="img/002.jpg" width="150" />
        <img src="img/004.jpg" width="150" />
        <img src="img/005.jpg" width="150" />
    </div>
    <div id="page4" class="page">
        <h3>A form is easy too.</h3>
        <div id="contact-form">
            <form id="contact">
                <label for="your-name">Your name: ;</label>
                <input type="text" name="your-name" id="your-name" value="" />
                <label for="your-mail">Your email: ;</label>
                <input type="text" name="your-mail" id="your-mail" value="" />
                <label for="your-message">Your message: ;</label>
                <textarea name="your-message" id="your-message" cols="30" rows="5"></textarea>
                <br />
                <input class="btn btn-primary" type="submit" value="Submit;" onClick="window.alert('Message sent !;'); return false;" />
            </form>
        </div>
        <p>For this example, we have added <code>onClick="window.alert(\'Message sent !\'); return false;"</code> to prevent the refresh.;It\'s up to you to bind your function.;</p>
    </div>
    <div id="page5" class="page">
        <h3>A page with jQuery inside.</h3>
        <br><br>
        <p>This could be a FAQ.;</p>
        <div class="accordion" id="faq">
          <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" href="#a1">
                    Question number 1;
                </a>
            </div>
            <div id="a1" class="accordion-body collapse">
                <div class="accordion-inner">
                    Right here the anwser for the first question.;
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" href="#a2">
                    Question number 2;
                </a>
            </div>
            <div id="a2" class="accordion-body collapse">
                <div class="accordion-inner">
                    Of course it works !;
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" href="#a3">
                    A last question;
                </a>
            </div>
            <div id="a3" class="accordion-body collapse">
                <div class="accordion-inner">
                    This could be the right anwser but not sure it is.;
                </div>
            </div>
        </div>
    </div>
    </div>
    <div id="page6" class="page">
        <h3>Another rich content.</h3>
        <p>some embeded content from anywhere like a YouTube video;</p>
        <div id="video-1"></div>
    </div>
    <div id="page7" class="page">
        <div id="credits">
            <p>© 2013 RealBook / <a href="http://indacloud.fr" target="_blank">InDaCloud</a></p>
        </div>                        
    </div>
</div>
                   
<style type="text/css">

    .page{
        padding:20px;     
        height: 610px;           
    }

    .page img{
        margin: 10px 20px;
        box-shadow: 3px 2px 5px #888;

    }

    #cover{
        background: url(img/cover-bg.png) repeat;
        padding-top: 150px;
        height: 480px;                
    }
    #cover h3 {
        color: whiteSmoke;
        text-align: right;
        margin-right: 30px;
    }
    #cover h1 {
        color: steelblue;
        text-align: right;
        margin-right: 20px;
    }

    .to-the-bottom {
        position: absolute;
        bottom: 30px;
        right: 50px;
        border: 1px solid gray;
        background: lightgray;
    }

    #page4 #contact-form {
        margin: 5px auto;
        width: 300px;
    }

    #page5 .accordion {
        margin-top: 50px;
    }

    #page5 .accordion-group {
        background: whiteSmoke;
    }
    #page6 #video-1{
        width: 400px;
        height:230px;
        background: whitesmoke url(img/loader_48.gif) no-repeat;
        background-position: center center;
        border: 1px lightgray solid;
        margin-top: 50px;

    }
    #page7 {
        background: url(img/cover-bg.png) repeat;
        height: 610px; 
        color: whitesmoke;
    }
    #page7 #credits{
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

</style>
                
<script type="text/javascript">

$(document).ready(function(){
    $('#content').realbook({
        theme : 'notes',
        background : '',
        height : 650,
        width : 900,
        container : '#book',
        onPageLoad : function($odd, $even, $container){
            if($odd.is('#page5') || $even.is("#page5")){
                $("#page5 .accordion-toggle").click(function(event){
                    event.preventDefault();
                    $($(this).attr("href")).collapse('toggle');
                });
            }
            if($odd.is('#page6') || $even.is("#page6")){
                $("#page6 #video-1").html('<iframe width="400" height="230" src="http://www.youtube.com/embed/GGKs7kNyYvY?rel=0" frameborder="0" allowfullscreen></iframe>');
            }
        }
    });
});
</script>