position: fixed;
top: 0;
left: 0;
- height: 50px;
+ height: 40px;
padding: 0;
width: 100%;
z-index: 100;
color: #999;
}
#BRtoolbar a {
- color: #ccc!important;
+ color: #ccc;
text-decoration: underline;
}
-
+#BRtoolbarbuttons {
+ float: right;
+}
#BRcontainer {
top:5px;
bottom:5px;
font-size: 12px;
font-weight: 700;
}
-
+#BRreturn {
+ display: block;
+ float: left;
+ margin: 5px 10px 0 5px;
+ font-family: "Lucida Grande","Arial",sans-serif;
+ color: #333;
+}
+#BRreturn span {
+ font-size: 10px;
+ display: block;
+}
+#BRreturn a {
+ font-size: 13px;
+ display: block;
+ color: #036daa;
+}
.BRicon {
display: block;
float: left;
- width: 50px;
- height: 50px;
+ width: 40px;
+ height: 40px;
padding: 0;
margin: 0;
vertical-align: middle;
}
.BRicon.logo {background-position:0 0;}
-.BRicon.fit {background-position:-50px 0;}
-.BRicon.fit:hover {background-position:-100px 0;}
-.BRicon.glass {background-position:-150px 0;cursor:default;}
-/*.BRicon.glass:hover {background-position:-200px 0;}*/
-.BRicon.bookmark {background-position:-250px 0;}
-.BRicon.bookmark:hover {background-position:-300px 0;}
-.BRicon.print {background-position:-350px 0;}
-.BRicon.print:hover {background-position:-400px 0;}
-.BRicon.link {background-position:-450px 0;}
-.BRicon.link:hover {background-position:-500px 0;}
-.BRicon.embed {background-position:-550px;}
-.BRicon.embed:hover {background-position:-600px 0;}
-.BRicon.read {background-position:-650px 0;}
-.BRicon.read:hover {background-position:-700px 0;}
-.BRicon.full {background-position:-750px 0;}
-.BRicon.full:hover {background-position:-800px 0;}
-.BRicon.thumb {background-position:-850px 0;}
-.BRicon.thumb:hover {background-position:-900px 0;}
-.BRicon.twopg {background-position:-950px 0;display:none;}
-.BRicon.twopg:hover {background-position:-1000px 0;}
+.BRicon.info {background-position:-40px 0;}
+.BRicon.info:hover {background-position:-80px 0;}
+.BRicon.share {background-position:-120px 0;}
+.BRicon.share:hover {background-position:-160px 0;}
+.BRicon.read {background-position:-200px 0;}
+.BRicon.read:hover {background-position:-240px 0;}
+.BRicon.unread {background-position:-280px 0;}
+.BRicon.unread:hover {background-position:-320px 0;}
+.BRicon.full {background-position:-360px 0;}
+.BRicon.full:hover {background-position:-400px 0;}
+.BRicon.book_left {background-position:-440px 0;}
+.BRicon.book_left:hover {background-position:-480px 0;}
+.BRicon.book_right {background-position:-520px 0;}
+.BRicon.book_right:hover {background-position:-560px 0;}
+.BRicon.zoom_out {background-position:-606px 0;}
+.BRicon.zoom_out:hover {background-position:-646px 0;}
+.BRicon.zoom_in {background-position:-686px 0;}
+.BRicon.zoom_in:hover {background-position:-726px 0;}
+
/* NOT CURRENTLY IN USE
-.BRicon.zoom_out {background-position:;}
-.BRicon.zoom_out:hover {background-position:;}
-.BRicon.zoom_in {background-position:;}
-.BRicon.zoom_in:hover {background-position:;}
+.BRicon.embed {background-position:-440px;}
+.BRicon.embed:hover {background-position:-480px 0;}
+.BRicon.read {background-position:-520px 0;}
+.BRicon.read:hover {background-position:-560px 0;}
+.BRicon.full {background-position:-600px 0;}
+.BRicon.full:hover {background-position:-640px 0;}
+.BRicon.thumb {background-position:-680px 0;}
+.BRicon.thumb:hover {background-position:-720px 0;}
+.BRicon.twopg {background-position:-760px 0;display:none;}
+.BRicon.twopg:hover {background-position:-800px 0;}
.BRicon.one_page_mode {background-position:;}
.BRicon.two_page_mode {background-position:;}
.BRicon.thumbnail_mode {background-position:;}
-.BRicon.book_left {background-position:;}
-.BRicon.book_right {background-position:;}
.BRicon.book_up {background-position:;}
.BRicon.book_down {background-position:;}
.BRicon.book_leftmost {background-position:;}
a.logo {
display: block;
float: left;
- width: 57px;
- height: 46px;
+ width: 40px;
+ height: 40px;
background: transparent url(images/icon_home.png) no-repeat 0 0;
- margin: 12px 10px 0 10px;
}
a.popOff {
position: absolute;
form#booksearch {
float: left;
- margin-right: 40px;
+ margin-right: 10px;
}
form#booksearch input[type=search] {
- width: 216px;
- height: 24px;
- line-height: 24px;
+ width: 280px;
+ height: 22px;
+ line-height: 22px;
font-family: "Arial", sans-serif;
- font-size: 12px;
+ font-size: 13px;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: field;
- margin-top: 13px;
+ margin: 9px 0 0 0;
+ padding: 0;
+ border: 1px inset #ccc;
}
form#booksearch button {
width: 30px;
#cboxClose{position:absolute;top:20px;right:20px;display:block;width:32px;height:32px;background-image:url(/images/icons/icon_close-pop.png);background-position:0 0;background-repeat:no-repeat;}
#cboxClose:hover{background-position:0 -32px;}
+div#BRpage {
+ float: right;
+ width: 80px;
+ padding-left:12px;
+ text-align: right;
+}
div#BRnav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
- height: 50px;
+ height: 40px;
overflow: visible;
z-index: 100;
background-color: #e2dcc5;
}
div#BRnavpos {
position: relative;
- width: 100%;
- height: 50px;
+ margin-right: 80px;
+ height: 40px;
+}
+div#BRpager {
+ position: relative;
+ margin-left: -10px;
+ height: 40px;
+}
+div#BRslider {
+ position: absolute;
+ top: 13px;
+ height: 27px;
+}
+div#BRfiller {
+ position: absolute;
+ height: 40px;
+ width: 10px;
+ background-color: #e2dcc5;
+ top: 0;
+ left: 0;
+ z-index: 102;
+}
+div#slider {
+ position: absolute;
+ width: 2500px;
+ height: 27px;
+ top: 0;
+ left: -2478px;
+ background-color: #000;
+ opacity: .1;
+ z-index: 101;
+}
+div#pager {
+ position: absolute;
+ width: 23px;
+ height: 27px;
+ top: 0;
+ left: 8px;
+ background: url(images/slider.png);
+ z-index: 103;
+}
+div#pagenum {
+ display: none;
+ position: absolute;
+ left: 24px;
+ top: 4px;
+ color: #999;
+ font-size: 11px;
+ line-height: 19px;
+ font-weight: 700;
+ padding: 0 5px;
+ width: 80px;
+ text-align: right;
+ background-color: #000;
+ font-family: "Lucida Grande", "Arial", sans-serif;
+}
+div#pagenum span {
+ color: #ffa337;
+ font-style: italic;
}
div#BRnavline {
position: relative;
- margin: 0 20px;
height: 2px;
width: auto;
background-color: #000;
- top: 24px;
+ top: -29px;
+ margin: 0 10px;
+}
+.BRnavend {
+ position: absolute;
+ top: -2px;
+ width: 1px;
+ height: 6px;
+ background-color: #000;
+}
+#BRnavleft {
+ left: 0;
+}
+#BRnavright {
+ right: 0;
}
div.chapter {
position: absolute;
- top: 0;
+ top: -13px;
width: 18px;
height: 27px;
background: transparent url(images/marker_chap.png) no-repeat;
}
div.search {
position: absolute;
- top: 0;
+ top: -13px;
width: 18px;
height: 27px;
background-color: transparent;
}
div.searchChap {
position: absolute;
- top: 0;
+ top: -13px;
width: 18px;
height: 27px;
background-color: transparent;
#BRnav .front {
z-index: 10001;
}
-div#pager {
+div#BRzoomer {
+ position: fixed;
+ bottom: 40px;
+ right: 0;
+ width: 26px;
+ height: 190px;
+ z-index: 100;
+}
+div#BRzoompos {
+ position: relative;
+ width: 26px;
+ height: 190px;
+ top: 0;
+ left: 0;
+}
+div#BRzoomer button {
position: absolute;
- top: 11px;
- left: 5px;
- width: 30px;
- height: 30px;
- background: transparent url(images/focus_chap.png) no-repeat 0 0;
- cursor: e-resize;
+ left: 0;
+ background-color: #e2dcc5;
+ width: 26px;
+}
+div#BRzoomer button:hover {
+ background-color: #000;
+}
+div#BRzoomer .zoom_out {
+ top: 0;
+ -webkit-border-top-left-radius: 6px;
+ -webkit-border-bottom-left-radius: 6px;
+ -moz-border-radius-topleft: 6px;
+ -moz-border-radius-bottomleft: 6px;
+ border-top-left-radius: 6px;
+ border-bottom-left-radius: 6px;
+ -webkit-box-shadow: 2px 2px 2px #333;
+ -moz-box-shadow: 2px 2px 2px #333;
+ box-shadow: 2px 2px 2px #333;
+}
+div#BRzoomer .zoom_in {
+ bottom: 0;
+ -webkit-border-top-left-radius: 6px;
+ -moz-border-radius-topleft: 6px;
+ border-top-left-radius: 6px;
+}
+div#BRzoomcontrol {
+ position: relative;
+ top: 40px;
+ left:3px;
+ width: 23px;
+ height: 110px;
}
+div#BRzoomstrip {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 23px;
+ height: 110px;
+ background-color: #000;
+ opacity: .1;
+}
+div#BRzoombtn {
+ position: absolute;
+ width: 23px;
+ height: 23px;
+ top: 0;
+ left: 0;
+ background: url("images/icon_zoomer.png");
+}
+
// $$$ should make this work inside the BookReader div (self-contained), rather than after
$('#BookReader').after(
- '<div id="BRnav"><div id="BRnavpos"><div id="pager"></div><div id="BRnavline"></div></div></div>'
+ '<div id="BRnav">'
+ + '<div id="BRpage">'
+ + '<button class="BRicon book_left"></button>'
+ + '<button class="BRicon book_right"></button>'
+ + '</div>'
+ + '<div id="BRnavpos">'
+ + '<div id="BRfiller"></div>'
+ + '<div id="BRpager">'
+ + '<div id="BRslider">'
+ + '<div id="slider"></div>'
+ + '<div id="pager"></div>'
+ // XXXmang update code to update pagenum
+ + '<div id="pagenum"><span>n141</span> / 325</div>'
+ + '</div>'
+ + '</div>'
+ + '<div id="BRnavline">'
+ + '<div class="BRnavend" id="BRnavleft"></div>'
+ + '<div class="BRnavend" id="BRnavright"></div>'
+ + '</div>'
+ + '</div>'
+ + '</div>'
);
/*
});
});
*/
-
- $("#pager").draggable({axis:'x',containment:'parent'});
}
BookReader.prototype.addSearchResult = function(queryString, pageNumber, pageIndex) {
if (pageIndex) {
this.addChapter(tocEntryObject['title'], tocEntryObject['pagenum'], pageIndex);
}
+ $('.chapter').each(function(){
+ $(this).hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ });
+ });
+ $('.search').each(function(){
+ $(this).hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ });
+ });
+ $('.searchChap').each(function(){
+ $(this).hover(function(){
+ $(this).addClass('front');
+ },function(){
+ $(this).removeClass('front');
+ });
+ });
+ $("#BRslider").draggable({axis:'x',containment:'parent'});
+ $("#BRzoombtn").draggable({axis:'y',containment:'parent'});
+ $("#BRslider").hover(
+ function(){
+ $("#pagenum").show();
+ },function(){
+ $("#pagenum").hide();
+ });
}
BookReader.prototype.initToolbar = function(mode, ui) {
// $$$mang should be contained within the BookReader div instead of body
$("body").append("<div id='BRtoolbar'>"
- + "<span id='BRtoolbarbuttons' style='float:right;'>"
- + "<button class='BRicon bookmark modal'></button>"
- + "<button class='BRicon link modal'></button>"
- + "<button class='BRicon embed modal'></button>"
+ + "<span id='BRtoolbarbuttons'>"
+ /* XXXmang integrate search */
+ + "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search inside'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
+ // XXXmang icons incorrect or handlers wrong
+ + "<button class='BRicon info' onclick='br.switchMode(3); return false;'></button>"
+ + "<button class='BRicon share' onclick='br.switchMode(2); return false;'></button>"
+ "<button class='BRicon read modal'></button>"
+ "<button class='BRicon full'></button>"
-// + "<div class='BRtoolbarmode2' style='display: none'><button class='BRicon book_leftmost'></button><button class='BRicon book_left'></button><button class='BRicon book_right'></button><button class='BRicon book_rightmost'></button></div>"
-// + "<div class='BRtoolbarmode1' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
-// + "<div class='BRtoolbarmode3' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
-// + "<button class='BRicon play'></button><button class='BRicon pause' style='display: none'></button>"
+ "</span>"
+ "<span>"
+ "<a class='logo' href='" + this.logoURL + "'></a>"
- + "<button class='BRicon glass'></button>"
- /* XXXmang integrate search */
- + "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
- + "<button class='BRicon fit'></button>"
- + "<button class='BRicon thumb' onclick='br.switchMode(3); return false;'></button>"
- + "<button class='BRicon twopg' onclick='br.switchMode(2); return false;'></button>"
+ // XXXmang update
+ + "<div id='BRreturn'><span>Back to</span><a href='BOOK URL'>Book Title</a></div>"
+ "</span>"
+ + "</div>"
+ + "<div id='BRzoomer'>"
+ + "<div id='BRzoompos'>"
+ + "<button class='BRicon zoom_out'></button>"
+ + "<div id='BRzoomcontrol'>"
+ + "<div id='BRzoomstrip'></div>"
+ + "<div id='BRzoombtn'></div>"
+ + "</div>"
+ + "<button class='BRicon zoom_in'></button>"
+ + "</div>"
+ "</div>");
this.updateToolbarZoom(this.reduce); // Pretty format
// $$$ don't hardcode height
$('#BRtoolbar').animate({top:-60});
$('#BRnav').animate({bottom:-60});
+ $('#BRzoomer').animate({right:-26});
}
}
if (!this.navigationIsVisible()) {
$('#BRtoolbar').animate({top:0});
$('#BRnav').animate({bottom:0});
+ $('#BRzoomer').animate({right:0});
}
}
--- /dev/null
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <title>In the wake of the war canoe : a stirring record of forty years' successful labour, peril & adventure amongst the savage Indian tribes of the Pacific coast, and the piratical head-hunting Haidas of the Queen Charlotte Islands, B. C</title>
+<!--[if lte IE 6]>
+ <meta http-equiv="refresh" content="2; URL=/bookreader/browserunsupported.php?id=wakewarcanoe00collrich">
+<![endif]-->
+ <script src="http://www-testflip.archive.org/includes/jquery-1.4.2.min.js" type="text/javascript"></script>
+ <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery-ui-1.8.5.custom.min.js"></script>
+ <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/dragscrollable.js"></script>
+ <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery.colorbox-min.js"></script>
+ <!-- THIS ALLOWS BEAUTYTIPS TO WORK ON IE -->
+ <!--[if lt IE 9]>
+ <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/excanvas.compiled.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery.bt.min.js"></script>
+ <script type="text/javascript" src="BookReader.js"></script>
+ <link rel="stylesheet" type="text/css" href="BookReader.css">
+</head>
+<body style="background-color: ##939598;">
+
+
+<div id="BookReader">Internet Archive BookReader <noscript>requires JavaScript to be enabled.</noscript></div>
+
+<div id="BRnav">
+ <div id="BRpage">
+ <button class="BRicon book_left"></button>
+ <button class="BRicon book_right"></button>
+ </div>
+ <div id="BRnavpos">
+ <div id="BRfiller"></div>
+ <div id="BRpager">
+ <div id="BRslider">
+ <div id="slider"></div>
+ <div id="pager"></div>
+ <div id="pagenum"><span>n141</span> / 325</div>
+ </div>
+ </div>
+ <div id="BRnavline">
+ <div class="BRnavend" id="BRnavleft"></div>
+ <div class="BRnavend" id="BRnavright"></div>
+ </div>
+<!-- LOAD SEARCH RESULTS FIRST SO CHAPTER INDICATORS CAN APPEAR IN FRONT -->
+ <div class="search" style="left:80%;" title="Search result">
+ <div class="query">The Kingdom of the Future, for instance, though interesting in a Caley Robinson way, with its cold, mystical colour relieved by touches of warm reddish browns, and its big draped figures, was a composition in the past, and did not stimulate the <strong><a href="">emotional</a></strong> powers of the observer with a suggestion of coming ages or a prophecy of progress. <span>Page 26</span></div>
+ </div>
+
+ <div class="search" style="left:22%;" title="Search result">
+ <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div>
+ </div>
+
+ <div class="search" style="left:75%;" title="Search result">
+ <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div>
+ </div>
+
+ <div class="chapter" style="left:1%;">
+ <div class="title">I. The Minotaur <span>|</span> Page 1</div>
+ </div>
+
+ <div class="chapter" style="left:17%;">
+ <div class="title">II. The Griffon <span>|</span> Page 44</div>
+ </div>
+
+ <div class="chapter" style="left:30%;">
+ <div class="title">III. The Firedrake <span>|</span> Page 129</div>
+ </div>
+
+ <div class="chapter" style="left:67.5%;">
+ <div class="title">V. The Pegasus <span>|</span> Page 201</div>
+ </div>
+
+ <div class="chapter" style="left:90%;">
+ <div class="title">VI. The Goblin <span>|</span> Page 255</div>
+ </div>
+
+ <div class="searchChap" style="left:49%;" title="Search result">
+ <div class="query">
+ A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 163</span>
+ <div class="queryChap">IV. The Witch <span>|</span> Page 163</div>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+
+<script type="text/javascript">
+ // Set some config variables -- $$$ NB: Config object format has not been finalized
+ var brConfig = {};
+ brConfig["mode"] = 2;
+</script>
+<!-- The script included below is dynamically generated JavaScript that includes the book metadata and page image access functions -->
+<script type="text/javascript" src="http://ia331435.us.archive.org/~testflip/BookReader/BookReaderJSIA.php?id=wakewarcanoe00collrich&itemPath=/0/items/wakewarcanoe00collrich&server=ia331435.us.archive.org&subPrefix=wakewarcanoe00collrich"></script>
+
+<script type="text/javascript">
+ // $$$ hack to workaround sizing bug when starting in two-up mode
+ $(document).ready(function() {
+ $(window).trigger('resize');
+ });
+</script>
+
projects / bookreader.git / commitdiff
