|
|
(97 intermediate revisions not shown) |
Line 1: |
Line 1: |
| + | {{Template:UCSF/JixedbarStyle}} |
| + | |
| <html> | | <html> |
- | <style>
| |
- | #content{
| |
- | z-index:0;
| |
- | }
| |
- | </style>
| |
- |
| |
| <!-- jixedbar starts here --> | | <!-- jixedbar starts here --> |
- | <style>
| |
- | /**
| |
- | * Default theme for jixedbar
| |
- | * written by Ryan Yonzon, http://ryan.rawswift.com/
| |
- | * Last update: August 13, 2010
| |
- | */
| |
- |
| |
- | /*----- bar style -----*/
| |
- | .jx-bar {
| |
- | z-index:100;
| |
- | height:33px;
| |
- | padding:0px;
| |
- | width:1000px;
| |
- | background-color:#AFFBA2;
| |
- | border:#b5b5b5 solid 1px;
| |
- | }
| |
- |
| |
- | /* rounded top-left corner */
| |
- | .jx-bar-rounded-tl {
| |
- | z-index:100;
| |
- | -webkit-border-top-left-radius:5px;
| |
- | -khtml-border-radius-topleft:5px;
| |
- | -moz-border-radius-topleft:5px;
| |
- | border-top-left-radius:5px;
| |
- | }
| |
- |
| |
- | /* rounded bottom-left corner */
| |
- | .jx-bar-rounded-bl {
| |
- | z-index:100;
| |
- | -webkit-border-bottom-left-radius:5px;
| |
- | -khtml-border-radius-bottomleft:5px;
| |
- | -moz-border-radius-bottomleft:5px;
| |
- | border-bottom-left-radius:5px;
| |
- | }
| |
- |
| |
- | /* rounded top-right corner */
| |
- | .jx-bar-rounded-tr {
| |
- | z-index:100;
| |
- | -webkit-border-top-right-radius:5px;
| |
- | -khtml-border-radius-topright:5px;
| |
- | -moz-border-radius-topright:5px;
| |
- | border-top-right-radius:5x;
| |
- | }
| |
- |
| |
- | /* rounded bottom-right corner */
| |
- | .jx-bar-rounded-br {
| |
- | z-index:100;
| |
- | -webkit-border-bottom-right-radius:5px;
| |
- | -khtml-border-radius-bottomright:5px;
| |
- | -moz-border-radius-bottomright:5px;
| |
- | border-bottom-right-radius:5x;
| |
- | }
| |
- |
| |
- | /*----- bar separator -----*/
| |
- | .jx-bar span {
| |
- | z-index:100;
| |
- | width:1px;
| |
- | height:100%;
| |
- | background-color:#ccc;
| |
- | }
| |
- |
| |
- | .jx-separator-left {
| |
- | z-index:100;
| |
- | float:left;
| |
- | }
| |
- |
| |
- | .jx-separator-right {
| |
- | z-index:100;
| |
- | float:right;
| |
- | }
| |
- |
| |
- | /*----- bar button -----*/
| |
- | .jx-bar-button ul {
| |
- | z-index:100;
| |
- | margin:0px;
| |
- | padding:0px;
| |
- | }
| |
- |
| |
- | .jx-bar-button li {
| |
- | z-index:100;
| |
- | float:left;
| |
- | list-style:none;
| |
- | }
| |
- |
| |
- | .jx-bar-button-right li {
| |
- | z-index:100;
| |
- | float:right;
| |
- | list-style:none;
| |
- | }
| |
- |
| |
- | .jx-bar-button li {
| |
- | z-index:100;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | cursor:pointer;
| |
- | padding:4px 8px 4px 8px;
| |
- | border:white solid 1px;
| |
- | margin:2px;
| |
- | }
| |
- |
| |
- | /* button hover effect */
| |
- | .jx-bar-button li:hover {
| |
- | z-index:100;
| |
- | background-color:white;
| |
- | border:white solid 1px;
| |
- | padding:4px 8px 4px 8px;
| |
- | margin:2px;
| |
- | }
| |
- |
| |
- | /* rounded button corners */
| |
- | .jx-bar-button-rounded li:hover {
| |
- | z-index:100;
| |
- | -webkit-border-radius:3px;
| |
- | -khtml-border-radius:3px;
| |
- | -moz-border-radius:3px;
| |
- | border-radius:3px;
| |
- | }
| |
- |
| |
- | /* default button's anchor text style */
| |
- | .jx-bar-button li a:link, .jx-bar-button li a:visited {
| |
- | z-index:100;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | color:#666;
| |
- | text-decoration:none;
| |
- | padding:1px;
| |
- | }
| |
- |
| |
- | .jx-bar-button li a:hover {
| |
- | z-index:100;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | color:#333;
| |
- | text-decoration:none;
| |
- | }
| |
- |
| |
- | /*----- bar text container and button arrow indicator -----*/
| |
- | .jx-bar div, .jx-bar iframe {
| |
- | float:left;
| |
- | }
| |
- |
| |
- | .jx-bar div {
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | color:#666;
| |
- | padding:4px 8px 4px 8px;
| |
- | margin:4px 0px 4px 0px;
| |
- | }
| |
- |
| |
- | .jx-bar iframe {
| |
- | margin:4px 0px 4px 10px;
| |
- | }
| |
- |
| |
- | .jx-bar div a:link, .jx-bar div a:visited {
| |
- | color:#666;
| |
- | text-decoration:none;
| |
- | }
| |
- |
| |
- | .jx-bar div a:hover {
| |
- | color:#0099FF;
| |
- | text-decoration:none;
| |
- | }
| |
- |
| |
- | /*----- button tooltip -----*/
| |
- | .jx-bar-button-tooltip {
| |
- | z-index:100;
| |
- | height:auto;
| |
- | padding:5px 10px 5px 10px;
| |
- | color:#fff;
| |
- | background-color:#36393D;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | }
| |
- |
| |
- | /* rounded tooltip */
| |
- | .jx-bar-button-tooltip {
| |
- | z-index:100;
| |
- | -moz-border-radius: 3px;
| |
- | -webkit-border-radius:3px;
| |
- | }
| |
- |
| |
- | /*----- nav menu -----*/
| |
- | .jx-nav-menu {
| |
- | z-index:100;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | padding:2px;
| |
- | background-color:#AFFBA2;
| |
- | border:#AFFBA2 solid 1px;
| |
- | }
| |
- |
| |
- | .jx-nav-menu-rounded {
| |
- | z-index:100;
| |
- | -webkit-border-radius:3px;
| |
- | -khtml-border-radius:3px;
| |
- | -moz-border-radius:3px;
| |
- | border-radius:3px;
| |
- | }
| |
- |
| |
- | .jx-nav-menu ul {
| |
- | z-index:100;
| |
- | margin:0;
| |
- | padding:0;
| |
- | list-style:none;
| |
- | width:150px; /* width of menu items */
| |
- | }
| |
- |
| |
- | .jx-nav-menu a:hover {
| |
- | z-index:100;
| |
- | background-color:#9F9FFF;
| |
- | color:#fff;
| |
- | text-decoration:none;
| |
- | }
| |
- |
| |
- | /* styles for menu items */
| |
- | .jx-nav-menu ul li a {
| |
- | z-index:100;
| |
- | display:block;
| |
- | text-decoration:none;
| |
- | color:#777;
| |
- | background:#fff; /* IE6 Bug */
| |
- | padding:8px;
| |
- | border:1px solid #eee; /* IE6 Bug */
| |
- | border-bottom:0px;
| |
- | }
| |
- |
| |
- | /* active menu button */
| |
- | .jx-nav-menu-active {
| |
- | z-index:100;
| |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| |
- | font-size:11px;
| |
- | cursor:pointer;
| |
- | background-color:white;
| |
- | padding:4px 8px 4px 8px;
| |
- | margin:2px;
| |
- | }
| |
- |
| |
- | /* active menu button (rounded) */
| |
- | .jx-nav-menu-active-rounded {
| |
- | z-index:100;
| |
- | -webkit-border-radius:3px;
| |
- | -khtml-border-radius:3px;
| |
- | -moz-border-radius:3px;
| |
- | border-radius:3px;
| |
- | }
| |
- |
| |
- | /* menu indicator UP state */
| |
- | .jx-arrow-up {
| |
- | z-index:100;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/3/35/Jixedbar_Up.gif');
| |
- | background-repeat:no-repeat;
| |
- | background-position:center;
| |
- | }
| |
- |
| |
- | /* menu indicator DOWN state */
| |
- | .jx-arrow-down {
| |
- | z-index:100;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/d/d1/Jixedbar_Dn.gif');
| |
- | background-repeat:no-repeat;
| |
- | background-position:center;
| |
- | }
| |
- |
| |
- | /* tooltip point direction */
| |
- | .jx-tool-point-dir-down {
| |
- | z-index:100;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/5/5c/Jixedbar_Ttd.gif');
| |
- | background-repeat:no-repeat;
| |
- | background-position:center bottom;
| |
- | height:5px;
| |
- | width:auto;
| |
- | }
| |
- |
| |
- | .jx-tool-point-dir-up {
| |
- | z-index:100;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/8/86/Jixedbar_Ttu.gif');
| |
- | background-repeat:no-repeat;
| |
- | background-position:center bottom;
| |
- | height:5px;
| |
- | width:auto;
| |
- | }
| |
- |
| |
- | /* hide and show/unhide item */
| |
- | .jx-hide {
| |
- | z-index:100;
| |
- | float:right;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/b/ba/Jixedbar_Hide.gif');
| |
- | background-repeat:no-repeat;
| |
- | height:16px;
| |
- | width:16px;
| |
- | }
| |
- |
| |
- | /* if showOnTop is TRUE, use "https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif" instead of "" */
| |
- | .jx-hide-top {
| |
- | z-index:100;
| |
- | float:right;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif');
| |
- | background-repeat:no-repeat;
| |
- | height:16px;
| |
- | width:16px;
| |
- | }
| |
- |
| |
- | .jx-show {
| |
- | z-index:100;
| |
- | height:30px;
| |
- | padding:0px;
| |
- | width:40px;
| |
- | background-color:#AFFBA2;
| |
- | border:#b5b5b5 solid 1px;
| |
- | }
| |
- |
| |
- | .jx-show-button {
| |
- | z-index:100;
| |
- | float:right;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif');
| |
- | background-repeat:no-repeat;
| |
- | height:16px;
| |
- | width:16px;
| |
- | }
| |
- |
| |
- | /* if showOnTop is TRUE, use "hide.gif" instead of "show.gif" */
| |
- | .jx-show-button-top {
| |
- | z-index:100;
| |
- | float:right;
| |
- | background-image:url('https://static.igem.org/mediawiki/2010/b/ba/Jixedbar_Hide.gif');
| |
- | background-repeat:no-repeat;
| |
- | height:16px;
| |
- | width:16px;
| |
- | }
| |
- |
| |
- | .jx-hide-separator {
| |
- | z-index:100;
| |
- | width:1px;
| |
- | height:100%;
| |
- | background-color:#ccc;
| |
- | float:right;
| |
- | }
| |
- | </style>
| |
| <script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/jquery-1.4.2.min.js"></script> | | <script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/jquery-1.4.2.min.js"></script> |
| <script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/src/jquery.jixedbar.min.js"></script> | | <script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/src/jquery.jixedbar.min.js"></script> |
- | <script type="text/javascript"> | + | <script> |
- | $(document).ready(function() {
| + | function writeHref(){ |
- | $("#demo-bar").jixedbar({opacity: 1});
| + | var PageURL = document.URL; |
- | });
| + | var RightURL = PageURL.substr(21); |
| + | var EditIt="https://2010.igem.org/wiki/index.php?title="+RightURL+"&action=edit"; |
| + | document.write("<li><a href="+EditIt+"><img src=https://static.igem.org/mediawiki/2010/e/e7/Ucsf_edit.png alt=Edit /></a></li>"); |
| + | } |
| </script> | | </script> |
- |
| |
- |
| |
- |
| |
- |
| |
| <div id="demo-bar"> | | <div id="demo-bar"> |
| <div class="text-container"><img src="https://static.igem.org/mediawiki/2010/e/eb/UCSF_2010_iGEM.png"></div> | | <div class="text-container"><img src="https://static.igem.org/mediawiki/2010/e/eb/UCSF_2010_iGEM.png"></div> |
Line 387: |
Line 45: |
| <li title="NoteBook"><a href="#"><img src="https://static.igem.org/mediawiki/2010/5/51/UCSF_2010_NoteBook.png" alt="NoteBook" /></a> | | <li title="NoteBook"><a href="#"><img src="https://static.igem.org/mediawiki/2010/5/51/UCSF_2010_NoteBook.png" alt="NoteBook" /></a> |
| <ul> | | <ul> |
- | <li><a href="http://www.facebook.com/ryanyonzon"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li> | + | <li><a href="https://2010.igem.org/Team:UCSF/Notebook/RLiang"><img src="icons/facebook.png" title="RyanLiang" /> Ryan Liang</a></li> |
- | <li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" /> Twitter</a></li> | + | <li><a href="https://2010.igem.org/Team:UCSF/Notebook/JElam"><img src="icons/facebook.png" title="RyanLiang" /> John Elam</a></li> |
- | <li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" /> Flickr</a></li>
| + | <li><a href="https://2010.igem.org/Team:UCSF/Notebook/CLiu"><img src="icons/facebook.png" title="RyanLiang" /> Crystal Liu</a></li> |
- | <li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" /> Linkedin</a></li>
| + | <li><a href="https://2010.igem.org/Team:UCSF/Notebook/SZorn"><img src="icons/facebook.png" title="RyanLiang" /> Sam Zorn</a></li> |
| + | <li><a href="https://2010.igem.org/Team:UCSF/Notebook/CZhou"><img src="icons/facebook.png" title="RyanLiang" /> Carmen Zhou</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
Line 405: |
Line 64: |
| </ul> | | </ul> |
| </li> | | </li> |
| + | <script>writeHref();</script> |
| </ul> | | </ul> |
| </div> | | </div> |
| <!-- jixedbar ends here --> | | <!-- jixedbar ends here --> |
- | </body> | + | |
| + | <script type="text/javascript"> |
| + | $(document).ready(function() { |
| + | $("#demo-bar").jixedbar({showOnTop: true,opacity:0.93,transparent:true}); |
| + | }); |
| + | </script> |
| + | |
| + | |
| </html> | | </html> |