Team:TU-Delft/Team/General
From 2011.igem.org
(Difference between revisions)
(20 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{TU-header3}} | {{TU-header3}} | ||
__NOTOC__ | __NOTOC__ | ||
- | <html | + | <html> |
- | + | <script type='text/javascript' src='http://mycraft.gr/wp-content/plugins/mc-booklet/js/jquery.easing.1.3.js?ver=3.0.3'></script> | |
- | + | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/cufon-yui.js" type="text/javascript"></script> | |
- | + | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/ChunkFive_400.font.js" type="text/javascript"></script> | |
- | + | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/Note_this_400.font.js" type="text/javascript"></script> | |
- | + | <script type='text/javascript' src='http://mycraft.gr/wp-content/plugins/mc-booklet/js/jquery.booklet.1.1.0.min.js?ver=3.0.3'></script> | |
- | + | <script type="text/javascript"> | |
- | + | Cufon.replace('h1,p,.b-counter'); | |
- | + | Cufon.replace('.book_wrapper a', {hover:true}); | |
- | + | Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'}); | |
- | + | Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'}); | |
- | + | Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'}); | |
- | + | </script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<div class="book_wrapper"> | <div class="book_wrapper"> | ||
Line 33: | Line 26: | ||
<div> | <div> | ||
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/1.jpg" alt=""/> | <img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/1.jpg" alt=""/> | ||
- | < | + | <h3>Week 24</h3> |
- | <p> | + | <p>What we did in week 24</p> |
<a href="#" class="article">Article</a> | <a href="#" class="article">Article</a> | ||
<a href="#" class="demo">Demo</a> | <a href="#" class="demo">Demo</a> | ||
Line 40: | Line 33: | ||
<div> | <div> | ||
- | + | ... | |
</div> | </div> | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 48: | Line 41: | ||
- | + | <style type="text/css"> | |
+ | .booklet { | ||
+ | width:900px; | ||
+ | height:607px; | ||
+ | position:relative; | ||
+ | margin:0 auto 10px; | ||
+ | -moz-box-shadow:0px 0px 1px #fff; | ||
+ | -webkit-box-shadow:0px 0px 1px #fff; | ||
+ | box-shadow:0px 0px 1px #fff; | ||
+ | -moz-border-radius:10px; | ||
+ | -webkit-border-radius:10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | .booklet .b-wrap-left { | ||
+ | background:#fff url(../images/left_bg.jpg) no-repeat top left; | ||
+ | -webkit-border-top-left-radius: 10px; | ||
+ | -webkit-border-bottom-left-radius: 10px; | ||
+ | -moz-border-radius-topleft:10px; | ||
+ | -moz-border-radius-bottomleft: 10px; | ||
+ | border-top-left-radius: 10px; | ||
+ | border-bottom-left-radius: 10px; | ||
+ | } | ||
+ | .booklet .b-wrap-right { | ||
+ | background:#efefef url(../images/right_bg.jpg) no-repeat top left; | ||
+ | -webkit-border-top-right-radius: 10px; | ||
+ | -webkit-border-bottom-right-radius: 10px; | ||
+ | -moz-border-radius-topright: 10px; | ||
+ | -moz-border-radius-bottomright: 10px; | ||
+ | border-top-right-radius: 10px; | ||
+ | border-bottom-right-radius: 10px; | ||
+ | } | ||
+ | .booklet .b-counter { | ||
+ | bottom:10px; | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:90%; | ||
+ | height:20px; | ||
+ | border-top:1px solid #ddd; | ||
+ | color:#222; | ||
+ | text-align:center; | ||
+ | font-size:12px; | ||
+ | padding:5px 0 0; | ||
+ | background:transparent; | ||
+ | -moz-box-shadow:0px -1px 1px #fff; | ||
+ | -webkit-box-shadow:0px -1px 1px #fff; | ||
+ | box-shadow:0px -1px 1px #fff; | ||
+ | opacity:0.8; | ||
+ | } | ||
+ | .book_wrapper{ | ||
+ | margin:0 auto; | ||
+ | padding-top:50px; | ||
+ | width:1000px; | ||
+ | height:540px; | ||
+ | position:relative; | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/bg.png) no-repeat 9px 27px; | ||
+ | } | ||
+ | .book_wrapper h3{ | ||
+ | color:#13386a; | ||
+ | margin:5px 5px 5px 50px; | ||
+ | font-size:26px; | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/h1.png) no-repeat bottom left; | ||
+ | width:1000px; | ||
+ | padding-bottom:7px; | ||
+ | } | ||
+ | .book_wrapper p{ | ||
+ | font-size:16px; | ||
+ | margin:5px 5px 5px 50px; | ||
+ | } | ||
+ | .book_wrapper a.article, | ||
+ | .book_wrapper a.demo{ | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/circle.png) no-repeat 50% 0px; | ||
+ | display:block; | ||
+ | width:95px; | ||
+ | height:41px; | ||
+ | text-decoration:none; | ||
+ | outline:none; | ||
+ | font-size:16px; | ||
+ | color:#555; | ||
+ | float:left; | ||
+ | line-height:41px; | ||
+ | padding-left:47px; | ||
+ | } | ||
+ | .book_wrapper a.demo{ | ||
+ | margin-left:50px; | ||
+ | } | ||
+ | .book_wrapper a.article:hover, | ||
+ | .book_wrapper a.demo:hover{ | ||
+ | background-position:50% -41px; | ||
+ | color:#13386a; | ||
+ | } | ||
+ | .book_wrapper img{ | ||
+ | margin:10px 0px 5px 50px; | ||
+ | width:300px; | ||
+ | padding:4px; | ||
+ | border:1px solid #ddd; | ||
+ | -moz-box-shadow:1px 1px 1px #fff; | ||
+ | -webkit-box-shadow:1px 1px 1px #fff; | ||
+ | box-shadow:1px 1px 1px #fff; | ||
+ | } | ||
+ | .booklet .b-wrap-right img{ | ||
+ | border:1px solid #E6E3C2; | ||
+ | } | ||
+ | a#next_page_button, | ||
+ | a#prev_page_button{ | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | width:41px; | ||
+ | height:40px; | ||
+ | cursor:pointer; | ||
+ | margin-top:-20px; | ||
+ | top:50%; | ||
+ | background:transparent url(../images/buttons.png) no-repeat 0px -40px; | ||
+ | } | ||
+ | a#prev_page_button{ | ||
+ | left:-30px; | ||
+ | } | ||
+ | a#next_page_button{ | ||
+ | right:-30px; | ||
+ | background-position:-41px -40px; | ||
+ | } | ||
+ | a#next_page_button:hover{ | ||
+ | background-position:-41px 0px; | ||
+ | } | ||
+ | a#prev_page_button:hover{ | ||
+ | background-position:0px 0px; | ||
+ | } | ||
+ | .loading{ | ||
+ | width:160px; | ||
+ | height:56px; | ||
+ | position: absolute; | ||
+ | top:50%; | ||
+ | margin-top:-28px; | ||
+ | right:135px; | ||
+ | line-height:56px; | ||
+ | color:#fff; | ||
+ | padding-left:60px; | ||
+ | font-size:15px; | ||
+ | background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%; | ||
+ | opacity: 0.7; | ||
+ | z-index:9999; | ||
+ | -moz-border-radius:20px; | ||
+ | -webkit-border-radius:20px; | ||
+ | border-radius:20px; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); | ||
+ | } | ||
- | + | </style> | |
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | var $mybook = $('#mybook'); | |
- | + | var $bttn_next = $('#next_page_button'); | |
- | + | var $bttn_prev = $('#prev_page_button'); | |
- | + | var $loading = $('#loading'); | |
- | + | var $mybook_images = $mybook.find('img'); | |
- | + | var cnt_images = $mybook_images.length; | |
- | + | var loaded = 0; | |
- | + | //preload all the images in the book, | |
- | + | //and then call the booklet plugin | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $mybook_images.each(function(){ | |
- | + | var $img = $(this); | |
- | + | var source = $img.attr('src'); | |
- | + | $('<img/>').load(function(){ | |
- | + | ++loaded; | |
- | + | if(loaded == cnt_images){ | |
+ | $loading.hide(); | ||
+ | $bttn_next.show(); | ||
+ | $bttn_prev.show(); | ||
+ | $mybook.show().booklet({ | ||
+ | name: null, | ||
+ | // name of the booklet to display in the document title bar | ||
+ | width: 800, | ||
+ | // container width | ||
+ | height: 500, | ||
+ | // container height | ||
+ | speed: 600, | ||
+ | // speed of the transition between pages | ||
+ | direction: 'LTR', | ||
+ | // direction of the overall content | ||
+ | // organization, default LTR, left to right, can be | ||
+ | // RTL for languages which read right to left | ||
+ | startingPage: 0, | ||
+ | // index of the first page to be displayed | ||
+ | easing: 'easeInOutQuad', | ||
+ | // easing method for complete transition | ||
+ | easeIn: 'easeInQuad', | ||
+ | // easing method for first half of transition | ||
+ | easeOut: 'easeOutQuad', | ||
+ | // easing method for second half of transition | ||
- | + | closed: true, | |
- | + | // start with the book "closed", will add empty | |
+ | // pages to beginning and end of book | ||
+ | closedFrontTitle: null, | ||
+ | // used with "closed", "menu" and "pageSelector", | ||
+ | // determines title of blank starting page | ||
+ | closedFrontChapter: null, | ||
+ | // used with "closed", "menu" and "chapterSelector", | ||
+ | // determines chapter name of blank starting page | ||
+ | closedBackTitle: null, | ||
+ | // used with "closed", "menu" and "pageSelector", | ||
+ | // determines chapter name of blank ending page | ||
+ | closedBackChapter: null, | ||
+ | // used with "closed", "menu" and "chapterSelector", | ||
+ | // determines chapter name of blank ending page | ||
+ | covers: false, | ||
+ | // used with "closed", makes first and last pages | ||
+ | //into covers, without page numbers (if enabled) | ||
- | + | pagePadding: 10, | |
- | + | // padding for each page wrapper | |
- | + | pageNumbers: true, | |
- | + | // display page numbers on each page | |
- | + | ||
- | + | ||
- | + | ||
- | + | hovers: false, | |
- | + | // enables preview pageturn hover animation, | |
- | + | // shows a small preview of previous or next page on hover | |
- | + | overlays: false, | |
+ | // enables navigation using a page sized overlay, | ||
+ | // when enabled links inside the content will | ||
+ | // not be clickable | ||
+ | tabs: false, | ||
+ | // adds tabs along the top of the pages | ||
+ | tabWidth: 60, | ||
+ | // set the width of the tabs | ||
+ | tabHeight: 20, | ||
+ | // set the height of the tabs | ||
+ | arrows: false, | ||
+ | // adds arrows overlayed over the book edges | ||
+ | cursor: 'pointer', | ||
+ | // cursor css setting for side bar areas | ||
- | + | hash: false, | |
- | + | // enables navigation using a hash string, | |
- | + | // ex: #/page/1 for page 1, will affect | |
+ | // all booklets with 'hash' enabled | ||
+ | keyboard: true, | ||
+ | // enables navigation with arrow keys | ||
+ | // (left: previous, right: next) | ||
+ | next: $bttn_next, | ||
+ | // selector for element to use as click | ||
+ | // trigger for next page | ||
+ | prev: $bttn_prev, | ||
+ | // selector for element to use as click | ||
+ | // trigger for previous page | ||
- | + | menu: null, | |
- | + | // selector for element to use as the menu area, | |
- | + | // required for 'pageSelector' | |
- | + | pageSelector: false, | |
+ | // enables navigation with a dropdown menu of pages, | ||
+ | // requires 'menu' | ||
+ | chapterSelector: false, | ||
+ | // enables navigation with a dropdown menu of chapters, | ||
+ | // determined by the "rel" attribute, requires 'menu' | ||
- | + | shadows: true, | |
- | + | // display shadows on page animations | |
- | + | shadowTopFwdWidth: 166, | |
- | + | // shadow width for top forward anim | |
- | + | shadowTopBackWidth: 166, | |
- | + | // shadow width for top back anim | |
- | + | shadowBtmWidth: 50, | |
- | + | // shadow width for bottom shadow | |
+ | |||
+ | before: function(){}, | ||
+ | // callback invoked before each page turn animation | ||
+ | after: function(){} | ||
+ | // callback invoked after each page turn animation | ||
}); | }); | ||
- | + | Cufon.refresh(); // if you want to use cufon | |
- | + | } | |
- | </ | + | }).attr('src',source); |
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
</html> | </html> | ||
{{TU-footer}} | {{TU-footer}} |
Latest revision as of 13:45, 16 June 2011