|
|
| Line 1: |
Line 1: |
| - | {{CSS/Grid16}}
| |
| | <html> | | <html> |
| | <style type="text/css"> | | <style type="text/css"> |
| - | | + | #button { |
| - | #contentSub, .firstHeading, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | + | padding: .5em 1em; |
| - | | + | text-decoration: none; |
| - | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover {color: #ccc; background-color: transparent;} /*-- styling for default menu bar links (edit, page, history, etc.) --*/
| + | |
| - | | + | |
| - | | + | |
| - | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
| + | |
| - | background-color: #ccc;
| + | |
| - | border: 0 none;
| + | |
| - | display: block;
| + | |
| - | height: 14px;
| + | |
| - | position: fixed;
| + | |
| - | top: 0;
| + | |
| - | width: 100%;
| + | |
| - | z-index: 10;
| + | |
| | } | | } |
| - | | + | #effect { |
| - | body { background-color: #fff;}
| + | position: relative; |
| - | | + | width: 240px; |
| - | #globalWrapper, #content { /*-- changes default wiki settings --*/
| + | height: 135px; |
| - | width: 100%;
| + | padding: 0.4em; |
| - | height: 100%;
| + | |
| - | border: 0px;
| + | |
| - | background-color: transparent;
| + | |
| - | margin: 0px;
| + | |
| - | padding: 0px;
| + | |
| | } | | } |
| - | | + | #effect h3 { |
| - | html, body, .wrapper { /*-- changes default wiki settings --*/
| + | margin: 0; |
| - | width: 100%;
| + | padding: 0.4em; |
| - | height: 100%;
| + | text-align: center; |
| - | background-color: transparent;
| + | |
| | } | | } |
| - |
| |
| - | #contentcontainer { /*-- creates container for all content on page --*/
| |
| - | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
| |
| - | font-weight: 200;
| |
| - | font-size: 16px;
| |
| - | color: #000;
| |
| - | width: 960px;
| |
| - | margin-left: auto;
| |
| - | margin-right: auto;
| |
| - | background-color: #transparent;
| |
| - | margin-top: 70px;
| |
| - | padding-bottom: 100px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | #loginBarContainer {
| |
| - | width: 100%;
| |
| - | position: fixed;
| |
| - | top: 16px;
| |
| - | height: 19px;
| |
| - | background-color: #383838;
| |
| - | border-bottom: 1px solid #ccc;
| |
| - | z-index: 1000;
| |
| - | }
| |
| - | #loginBar {
| |
| - | width: 960px;
| |
| - | height: 100%;
| |
| - | margin: 0px auto;
| |
| - | }
| |
| - | #loginBar ul {position:relative;font-weight:900;}
| |
| - | #loginBar ul li {position:relative;list-style:none;cursor:pointer; display: table-cell;}
| |
| - | #loginBar ul li ul {position:absolute;left:0;right:0;}
| |
| - | #loginBar ul .dropToggle {position:relative;color:#FFF;}
| |
| - | #loginBar ul .dropToggle:hover, #loginBar ul .active {background:#ccc;}
| |
| - | #loginBar ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
| |
| - | -moz-transition:background-color 0.2s ease-in-out;display:block;color:#333;text-decoration:none;}
| |
| - | #loginBar ul li a:hover {background:#ccc;}
| |
| - |
| |
| | </style> | | </style> |
| | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| | + | <script> |
| | + | $(function() { |
| | + | // run the currently selected effect |
| | + | function runEffect() { |
| | + | // get effect type from |
| | + | var selectedEffect = $( "#effectTypes" ).val(); |
| | + | // most effect types need no options passed by default |
| | + | var options = {}; |
| | + | // some effects have required parameters |
| | + | if ( selectedEffect === "scale" ) { |
| | + | options = { percent: 0 }; |
| | + | } else if ( selectedEffect === "size" ) { |
| | + | options = { to: { width: 200, height: 60 } }; |
| | + | } |
| | + | // run the effect |
| | + | $( "#effect" ).toggle( selectedEffect, options, 500 ); |
| | + | }; |
| | + | // set effect from select menu value |
| | + | $( "#button" ).click(function() { |
| | + | runEffect(); |
| | + | return false; |
| | + | }); |
| | + | }); |
| | + | </script> |
| | | | |
| - | <div id="loginBarContainer"> | + | <div class="toggler"> |
| - | <div id="loginBar"> | + | <div id="effect" class="ui-widget-content ui-corner-all"> |
| - | <ul class="no-js">
| + | <h3 class="ui-widget-header ui-corner-all">Toggle</h3> |
| - | <li>
| + | <p> |
| - | <a href="#" class="dropToggle">iGEM 2014</a>
| + | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. |
| - | <ul>
| + | </p> |
| - | <li><a href="#">Dashboard</a></li>
| + | |
| - | <li><a href="#">Settings</a></li>
| + | |
| - | <li><a href="#">Privacy</a></li>
| + | |
| - | <li><a href="#">Help</a></li>
| + | |
| - | <li><a href="#">Sign out</a></li>
| + | |
| - | </ul>
| + | |
| - | </li>
| + | |
| - | <li>
| + | |
| - | <a href="#" class="dropToggle">wiki tools</a>
| + | |
| - | <ul>
| + | |
| - | <li><a href="#">Dashboard</a></li>
| + | |
| - | <li><a href="#">Help</a></li>
| + | |
| - | <li><a href="#">Sign out</a></li>
| + | |
| - | </ul>
| + | |
| - | </li>
| + | |
| - | </ul>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| - |
| |
| - |
| |
| - | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
| |
| - | <script>
| |
| - | $(function () {
| |
| - | $('#loginBar > ul').toggleClass('no-js js');
| |
| - | $('loginBar .js ul').hide();
| |
| - | $(document).on("click", function(e) {
| |
| - | var $elem = $(e.target);
| |
| - | if ($elem.hasClass('dropToggle')) {
| |
| - | $('#loginBar .js ul').not($elem.next('ul')).hide();
| |
| - | $elem.next("ul").slideToggle();
| |
| - | } else {
| |
| - | $('#loginBar .js ul').hide();
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - | </body>
| |
| | </html> | | </html> |
"
