|
|
(8 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
- | <meta charset="UTF-8">
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
- | <title>Creating "Next Level" Search Form Using jQuery & CSS3 | Webstuffshare.com</title>
| + | <link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.css"><!--nav logo demo css--> |
- | <meta name="description" content="Tutorial : Creating Next Level Search Form Using jQuery & CSS3">
| + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
- | <meta name="author" content="Webstuffshare">
| + | <!--person CSS --> |
- | <link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-footer-demo.css?v=2"> | + | <link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css"> |
- | </head> | + | <!-- jQuery for Hover Box --> |
- | <body> | + | <script> |
| + | $(document).ready(function(){ |
| + | $("img.static").hover( |
| + | function() { |
| + | $(this).stop().animate({"opacity": "0"}, "350"); |
| + | }, |
| + | function() { |
| + | $(this).stop().animate({"opacity": "1"}, "350"); |
| + | }); |
| + | }); |
| + | </script> |
| + | |
| + | <!-- CSS --> |
| + | <style> |
| + | /************** Code for Demo **************/ |
| | | |
- | <h1>Creating "Next Level" Search Form Using jQuery & CSS3</h1>
| + | /* Containing Element */ |
- | <br/>
| + | #blur { |
- | <div id="example">
| + | position:relative; |
- | <h1>Simpe Style</h1> | + | margin-left: 60px; |
- | <div class="arrow2">hit the button <img src="images/arrow-right.png" /></div> | + | } |
- | <div class="wrapper-simple"> | + | |
- | <input type="text" placeholder="Type and enter..." />
| + | /* Static Image Shown Before Hover */ |
- | <input type="submit" value="" />
| + | #blur img.static { |
- | <img src="images/search-icon-big.png" />
| + | position:absolute; |
- | </div> | + | left:0; |
- | </div>
| + | top:0; |
| + | z-index:1; |
| + | } |
| + | |
| + | /* Image Shown Upon Hover */ |
| + | #blur img.blur { |
| + | position:absolute; |
| + | left:0; |
| + | top:0; |
| + | } |
| + | #ouc-footer{ |
| + | text-align:center; |
| + | margin-top:-25px; |
| + | |
| | | |
- | <h1><span class="alert">Both following demo works only on Safari & Firefox. Tested only on Safari 5+ & Firefox 11.0 (both Mac)</span></h1>
| + | } |
| + | #footer-box{ |
| + | height: 50px; |
| + | |
| + | width:1349px; |
| + | margin-top:10px; |
| + | margin-bottom:-10px; |
| + | background-color:#1487DF; |
| + | border:none; |
| + | padding-left:0; |
| + | padding-right:0; |
| + | } |
| + | #top-section{ |
| + | width:99%; |
| + | } |
| + | #footer a |
| + | { |
| + | color:#ffffff; |
| | | |
- | <div id="example1">
| + | } |
- | <h1>Cube Style </h1> | + | |
- | <div class="wrapper1">
| + | #ouc-tools ul li{ |
- | <div class="content-wrapper1">
| + | display: inline-block; |
- | <div class="search-button1">
| + | margin-right: 20px; |
- | <span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png" /></span>
| + | vertical-align: middle; |
- | </div>
| + | |
- | <div class="search-box1">
| + | |
- | <input type="text" placeholder="Type your keyword..." />
| + | } |
- | <img src="https://static.igem.org/mediawiki/2012/d/db/Ouc-footer-close.png" />
| + | input.searchButton { |
- | </div>
| + | |
- | </div>
| + | font-size: 100%; |
| + | background: none; |
| + | border: none; |
| + | color: #45b8ef; |
| + | font-weight: bold; |
| + | |
| + | margin-right:10px; |
| + | margin-bottom:0; |
| + | magin-left:10px; |
| + | } |
| + | input.searchButton:hover { |
| + | color: #2d7ca3; |
| + | |
| + | } |
| + | </style> |
| + | </style> |
| + | </head> |
| + | <body> |
| + | <div id="menu-wrapper"> |
| + | <div id="logo"> |
| </div> | | </div> |
- | </div> | + | <ul class="menu"> |
- | | + | <li> <a href="https://2012.igem.org/Team:OUC-China">Index</a> </li> |
- | <div id="example2"> | + | <li> <a href="https://2012.igem.org/Team:OUC-China/Project/Overview">Project</a> </li> |
- | <h1>Cube Style With Animate</h1>
| + | <li> <a href="https://2012.igem.org/Team:OUC-China/Modeling/Overview">Modeling</a> </li> |
- | <div class="wrapper2">
| + | <li> <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Overview">Human Practice</a> </li> |
- | <div class="content-wrapper2">
| + | <li> <a href="https://2012.igem.org/Team:OUC-China/Team/members">Team</a> </li> |
- | <div class="search-button2"> | + | <li> <a href="https://2012.igem.org/Team:OUC-China/Parts">Parts</a> </li> |
- | <span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png"" /></span>
| + | <li> <a href="https://2012.igem.org/Team:OUC-China/Safety">Safety</a> </li> |
- | </div>
| + | <li> <a href="https://2012.igem.org/Team:OUC-China/labnote">Note</a> </li> |
- | <div class="search-box2"> | + | </ul> |
- | <input type="text" placeholder="Type your keyword..." />
| + | |
- | <img src="https://static.igem.org/mediawiki/2012/d/db/Ouc-footer-close.png"" />
| + | |
- | </div>
| + | |
- | </div> | + | |
| </div> | | </div> |
- | <div class="arrow"><img src="images/arrow.png" /> make a click</div> | + | <div id="submenu-wrapper"> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China"> |
| + | <img src="https://static.igem.org/mediawiki/2012/a/af/Projectoverview.jpg" /> |
| + | Home |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China#hmo"> |
| + | <img src="https://static.igem.org/mediawiki/2012/4/49/Humanpracticeoverview.jpg" /> |
| + | HumanPractice index |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Judgingform"> |
| + | <img src="https://static.igem.org/mediawiki/2012/6/6e/Juding-form.jpg" /> |
| + | JudgingForm |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/contactus"> |
| + | <img src="https://static.igem.org/mediawiki/2012/1/1e/Contact-us.jpg" /> |
| + | Contact Us |
| + | </a> |
| + | |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Project/Overview"> |
| + | <img src="https://static.igem.org/mediawiki/2012/5/59/Ouc-nav-project-overview.jpg" /> |
| + | Project Overview |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Project/Sensor/AbstractandBackground"> |
| + | <img src="https://static.igem.org/mediawiki/2012/1/15/Ouc-nav-project-secsor.jpg" /> |
| + | Sensor |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Project/DesignMaking/Abstract"> |
| + | <img src="https://static.igem.org/mediawiki/2012/3/34/Ouc-nav-device.jpg" /> |
| + | Decision-making Device |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Project/GVP/GasandBackground"> |
| + | <img src="https://static.igem.org/mediawiki/2012/5/57/Ouc-nav-project-gvp.jpg" /> |
| + | Gas vesicle |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Modeling/ODEModel"> |
| + | <img src="https://static.igem.org/mediawiki/2012/f/f6/Ouc-nav-modeling-ode.jpg" /> |
| + | ODEModel |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Modeling/ParameterSensitivityAnalysis"> |
| + | <img src="https://static.igem.org/mediawiki/2012/c/cf/Ouc-nav-modeling-sensertitive.jpg" /> |
| + | Parameter Sensitivity Analysis |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Modeling/ParameterSweep"> |
| + | <img src="https://static.igem.org/mediawiki/2012/0/07/Ouc-nav-modeling-sweep.jpg" /> |
| + | Parameter Sweep |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Modeling/NoiseAnalysis"> |
| + | <img src="https://static.igem.org/mediawiki/2012/0/04/Ouc-nav-modeling-noise.jpg" /> |
| + | Noise Analysis |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Overview"> |
| + | <img src="https://static.igem.org/mediawiki/2012/6/61/Ouc-nav-humanoverview.jpg" /> |
| + | HumanPractice Overview |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Communication"> |
| + | <img src="https://static.igem.org/mediawiki/2012/c/cc/Ouc-nav-Communication.jpg" /> |
| + | Meeting and Academic Communication |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Camps"> |
| + | <img src="https://static.igem.org/mediawiki/2012/8/8d/Ouc-nav-humcamp.jpg" /> |
| + | Camps, Class and Lectures |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/SpecialHM"> |
| + | <img src="https://static.igem.org/mediawiki/2012/b/b7/Ouc-nav-hmspcial.jpg" /> |
| + | Special HP |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Team/members"> |
| + | <img src="https://static.igem.org/mediawiki/2012/6/6d/Ouc-nav-team.jpg" /> |
| + | Team Members |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Team/instructor"> |
| + | <img src="https://static.igem.org/mediawiki/2012/3/35/Ouc-nav-instructor.jpg" /> |
| + | Instructors |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Team/AcknowledgementandCooperation"> |
| + | <img src="https://static.igem.org/mediawiki/2012/a/a6/Ouc-nav-co.jpg" /> |
| + | Acknowledgement&Cooperation |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Team/Lab"> |
| + | <img src="https://static.igem.org/mediawiki/2012/a/a7/Ouc-nav-lab.jpg" /> |
| + | Lab |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Parts"> |
| + | <img src="https://static.igem.org/mediawiki/2012/f/f9/Ouc-nav-parts.jpg" /> |
| + | Parts |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/Safety"> |
| + | <img src="https://static.igem.org/mediawiki/2012/5/5d/Ouc-nav-safety.jpg" /> |
| + | Safety |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul class="submenu"> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/labnote"> |
| + | <img src="https://static.igem.org/mediawiki/2012/8/8b/Ouc-nav-labnote.jpg" /> |
| + | Labnote |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://skydrive.live.com/redir?resid=6A13E80E2A176A23!249&authkey=!AGsNOi9excznIt8"> |
| + | <img src="https://static.igem.org/mediawiki/2012/4/4e/Ouc-nav-modelingnote.jpg" /> |
| + | Modeling Note |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/protocol"> |
| + | <img src="https://static.igem.org/mediawiki/2012/7/7d/Ouc-pro.png" /> |
| + | Protocols |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | <section id="wrapper"> |
| + | <article id="main"> |
| + | <h2>BaoYingying</h2> |
| + | <p>Wiki programmer</p> |
| + | |
| + | <!-- Code for jQuery Hover Box --> |
| + | <div id="blur"> |
| + | <a> |
| + | <img src="https://static.igem.org/mediawiki/2012/8/8b/Ouc-person-baoyingying1.jpg" class="static"> |
| + | </a> |
| + | <img src="https://static.igem.org/mediawiki/2012/b/b0/Ouc-person-baoyingying2.jpg" class="blur"> |
| + | <div id="person-intro"> |
| + | <p>Hi, I am Bao Yingying, a junior student in college of information science and engineering. My major is computer science and technology. It is a challenge and great honor to me to be the design assistant in OUC-China team. I have the passion for web development, meanwhile, I am now learning. Although it is not my major, I like molecular biology. I hope I can make my team's overview better. Making a great show about our project is the goal of all members. </p> |
| </div> | | </div> |
- | | + | </div> |
- |
| + | <!-- Code for jQuery Hover Box --> |
- | <script>!window.jQuery && document.write(unescape('%3Cscript src="http://1.oucigem.sinaapp.com/ouc-footer-jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
| + | |
- | <script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-modernizr.js"></script> | + | |
- | <script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-demo.js"></script>
| + | </article> |
- |
| + | </section> |
- | <!-- GA -->
| + | </body> |
| + | <script type="text/javascript" src="http://1.oucigem.sinaapp.com/OUC-nav.js"></script><!--nav js--> |
| + | <!-- GA --> |
| <script type="text/javascript"> | | <script type="text/javascript"> |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); | | var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
Line 68: |
Line 310: |
| var pageTracker = _gat._getTracker("UA-2260508-2"); | | var pageTracker = _gat._getTracker("UA-2260508-2"); |
| pageTracker._trackPageview(); | | pageTracker._trackPageview(); |
- | } catch(err) {}</script> | + | } catch(err) {} |
- | <!-- GA -->
| + | </script> |
- | </body> | + | |
- | </html> | + | |
| + | |
| + | <div id="ouc-footer"> |
| + | <div id="ouc-tools"> |
| + | |
| + | <ul> |
| + | <li id="ouc-clustrmaps-wrapper"> |
| + | <div id="clustrmaps-widget"></div><script type="text/javascript">var _clustrmaps = {'url' : 'https://2012.igem.org/Team:OUC-China', 'user' : 1034709, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2012-09-22', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www4.clustrmaps.com/user/c56fc9d5"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2012.igem.org-Team-OUC-China-thumb.jpg" alt="Locations of visitors to this page" /></a></noscript> |
| + | </li> |
| + | <li> |
| + | <a href="http://www.renren.com/296396903/profile?ref=opensearch_normal"><img src="https://static.igem.org/mediawiki/2012/d/d2/Ouc-footer-cmlsast.jpg" alt="OUC CMLS AST" border="0"></a> |
| + | </li> |
| + | <li> |
| + | <a href="https://2012.igem.org/Team:OUC-China/contactus"><img src="https://static.igem.org/mediawiki/2012/5/5e/OUC-footer-contact.jpg" alt="Contact Us" border="0"></a> |
| + | </li> |
| + | <li style="width:160px;"> |
| + | <form action="/Special:Search" id="searchform" style=" border-color:#000;"> |
| + | <input id="searchInput" name="search" type="text" title="Search 2011.igem.org [f]" accesskey="f" value=""> |
| + | <input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" /> |
| + | <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" /> |
| + | </form> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | |
| + | </div></html> |