Experiment Online Writable Book Using Jquery Plugins

January 3rd, 2013 by aditia rahman / 1 Comment  

     

Lately I’ve been playing with some jquery plugin, one of them is flipbook jquery plugin. And I have an simple idea to creating an online application that look like a book that can be edited on the fly, which mean do not need admin area to edit the content.

This example only presenting the front end, each page are editable using inline rich text editor, if the content are longer than the page height it will presented using scroller. I’m just thinking maybe this idea can be applied to became wordpress theme, and maybe good for some history writer.

Plugin & Sound Used

Turn.js a JavaScript library that make your content look like a real book or magazine using HTML5.

Aloha Editor browser HTML5 based WYSIWYG editor.

jQuery custom content scroller scrollbar plugin utilizing jquery UI fully customizable with CSS

Sound Jay

All Code

Integrating each plugins features not always easy, all the code here are using basic features on each plugins, but there is problem when creating content scroller using window load event, so I make the content are scrollable after the page are opened using turn.js event. In chrome it run smooth and a bit lagy on firefox.

Demo | Download

<!DOCTYPE html>
<html>
<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="turn.min.js"></script>
	<link href="custom-scroller/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="aloha/css/aloha.css" type="text/css">
    <script src="aloha/lib/require.js"></script>
    <script src="aloha/lib/aloha.js" data-aloha-plugins="common/format,
                                            common/list,
                                            common/link"></script>
	<style>
		#bookcontainer {
			overflow: hidden;
			padding: 50px 0;
		}
		.sample-flipbook{
			margin: 0 auto;
			-webkit-transition:margin-left 0.2s;
			-moz-transition:margin-left 0.2s;
			-ms-transition:margin-left 0.2s;
			-o-transition:margin-left 0.2s;
			transition:margin-left 0.2s;
		}

		.sample-flipbook .page{
			-webkit-box-shadow:inset 0 0 5px #666;
			-moz-box-shadow:inset 0 0 5px #666;
			-o-box-shadow:inset 0 0 5px #666;
			-ms-box-shadow:inset 0 0 5px #666;
			box-shadow:inset 0 0 5px #666;
			background-color:white;
		}

		.sample-flipbook .hard{
			background:#ccc !important;
			color:#333;
			-webkit-box-shadow:inset 0 0 5px #666;
			-moz-box-shadow:inset 0 0 5px #666;
			-o-box-shadow:inset 0 0 5px #666;
			-ms-box-shadow:inset 0 0 5px #666;
			box-shadow:inset 0 0 5px #666;
			font-weight:bold;
		}

		.page-wrapper {
			height: 440px;
			padding: 30px 0;
		}

		.page-content {
			padding: 0 0 0 35px;
			color: #666;
			line-height: 28px;
			font-size: 18px;
		}
		.cover {
			text-shadow: 2px 2px 1px #e3e3e3;
			text-align: center;
		}
		.cover div {
			font-weight: normal;
			font-style: italic;
		}
		.cover h3 a {
			color: #0066cc;
			text-decoration:none;
		}
		.cover h3 a:hover {
			text-decoration:underline;
		}
	</style>
	<script type="text/javascript">
        Aloha.ready( function() {
            Aloha.jQuery('.page-content').aloha();
        });
    </script>
	<title>JQuery Book Experiment</title>
</head>
<body>
	<audio preload="auto" id="soundpl">
		<source src="page.ogg"></source>
	</audio>
	<audio preload="auto" id="soundpl2">
		<source src="beep.ogg"></source>
	</audio>
	<div id="bookcontainer">
		<div class="sample-flipbook">
			<div class="hard cover"></div>
			<div class="hard"></div>
			<div class="page">
				<div class="page-wrapper" id="wrap1">
					<div class="page-content">
						Page 1 <br/> Lorem ipsum ...
					</div>
				</div>
			</div>
			<div class="page">
				<div class="page-wrapper" id="wrap2">
					<div class="page-content">
						Page 2 <br/> Lorem ipsum ...
					</div>
				</div>
			</div>
			<div class="page">
				<div class="page-wrapper" id="wrap3">
					<div class="page-content">
						Page 3 <br/> Lorem ipsum ...
					</div>
				</div>
			</div>
			<div class="page">
				<div class="page-wrapper" id="wrap4">
					<div class="page-content">
						Page 4 <br/> Lorem ipsum ...
					</div>
				</div>
			</div>
			<div class="hard"></div>
			<div class="hard"></div>
		</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script src="custom-scroller/jquery.mousewheel.min.js"></script>
	<script src="custom-scroller/jquery.mCustomScrollbar.min.js"></script>

	<script>
    $(".sample-flipbook").turn({
        width: 800,
        height: 500,
        autoCenter: true
    });

    (function($) {
        $(".sample-flipbook").bind("turning", function(event, page, view) {
            $("#soundpl")[0].play();
            page_left  = view[0] - 2;
            page_right = view[1] - 2;

            if (page_left > 0) {
                if (!$("#wrap"+page_left).hasClass('scrolled')) {
                    $("#wrap"+page_left).addClass('scrolled');
                    $("#wrap"+page_left).mCustomScrollbar({
                        scrollInertia:1
                    });
                }
            }

            if (page_right > 0) {
                if (!$("#wrap"+page_right).hasClass('scrolled')) {
                    $("#wrap"+page_right).addClass('scrolled');
                    $("#wrap"+page_right).mCustomScrollbar({
                        scrollInertia:1
                    });
                }
            }
        });

        $(".page-content").keypress(function() {
            $("#soundpl2")[0].play();
        });

    })(jQuery);
	</script>

</body>
</html>

Demo | Download

        submit to reddit Delicious

One Comment Leave a Comment Subscribe RSS

Leave a Comment