Team:OUC-China/BaoYingying

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.css"><!--nav logo demo css-->
+
<meta charset="UTF-8">
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
<title>Creating "Next Level" Search Form Using jQuery & CSS3 | Webstuffshare.com</title>
-
<!--person CSS -->
+
<meta name="description" content="Tutorial : Creating Next Level Search Form Using jQuery & CSS3">
-
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css">
+
<meta name="author" content="Webstuffshare">
-
<!-- jQuery for Hover Box -->
+
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-footer-demo.css?v=2">
-
<script>
+
</head>
-
$(document).ready(function(){
+
<body>
-
$("img.static").hover(
+
-
function() {
+
-
$(this).stop().animate({"opacity": "0"}, "350");
+
-
},
+
-
function() {
+
-
$(this).stop().animate({"opacity": "1"}, "350");
+
-
});
+
-
});
+
-
</script>
+
-
+
-
<!-- CSS -->
+
-
<style>
+
-
/************** Code for Demo **************/
+
-
/* Containing Element */
+
<h1>Creating "Next Level" Search Form Using jQuery & CSS3</h1>
-
#blur {
+
<br/>
-
  position:relative;
+
<div id="example">
-
  margin-left: 60px;
+
<h1>Simpe Style</h1>
-
}
+
<div class="arrow2">hit the button <img src="images/arrow-right.png" /></div>
-
+
<div class="wrapper-simple">
-
/* Static Image Shown Before Hover */
+
<input type="text" placeholder="Type and enter..." />
-
#blur img.static {
+
<input type="submit" value="" />
-
  position:absolute;
+
<img src="images/search-icon-big.png" />
-
  left:0;
+
</div>
-
  top:0;
+
</div>
-
  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:100%;
+
-
margin-top:10px;
+
-
background-color:#009ad9;
+
-
border:none;
+
-
}
+
<div id="example1">
-
#footer a
+
<h1>Cube Style </h1>
-
{
+
<div class="wrapper1">
-
color:#ffffff;
+
<div class="content-wrapper1">
 +
<div class="search-button1">
 +
<span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png" /></span>
 +
</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" />
 +
</div>
 +
</div>
 +
</div>
 +
</div>
-
}
+
<div id="example2">
-
                #ouc-tools ul{
+
<h1>Cube Style With Animate</h1>
-
                 
+
<div class="wrapper2">
-
+
<div class="content-wrapper2">
-
+
<div class="search-button2">
-
                }
+
<span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png"" /></span>
-
                #ouc-tools ul li{
+
</div>
-
                    display: inline-block;
+
<div class="search-box2">
-
                    margin-right: 20px;
+
<input type="text" placeholder="Type your keyword..." />
-
                    vertical-align: middle;
+
<img src="https://static.igem.org/mediawiki/2012/d/db/Ouc-footer-close.png"" />
-
+
</div>
-
+
</div>
-
                }
+
-
                input.searchButton {
+
-
           
+
-
                    font-size: 100%;
+
-
                    background: none;
+
-
                    border: none;
+
-
                    color: #888;
+
-
                    font-weight: bold;
+
-
+
-
margin-right:10px;
+
-
margin-bottom:0;
+
-
magin-left:10px;
+
-
                }
+
-
                input.searchButton:hover {
+
-
                    color: #000;
+
-
+
-
                }
+
-
</style>
+
-
</style>
+
-
</head>
+
-
<body>
+
-
<div id="menu-wrapper">
+
-
<div id="logo">
+
</div>
</div>
-
<ul class="menu">
+
<div class="arrow"><img src="images/arrow.png" /> make a click</div>
-
<li> <a href="#">Home</a> </li>
+
</div>
-
<li> <a href="#">Project</a> </li>
+
 
-
<li> <a href="#">Modeling</a> </li>
+
-
<li> <a href="#">Human Practice</a> </li>
+
<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>
-
<li> <a href="#">Team</a> </li>
+
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-modernizr.js"></script>
-
<li> <a href="#">Parts</a> </li>
+
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-demo.js"></script>
-
<li> <a href="#">Safety</a> </li>
+
-
<li> <a href="#">Note</a> </li>
+
-
</ul>
+
-
</div>
+
-
<div id="submenu-wrapper">
+
-
<ul class="submenu">
+
-
<li>
+
-
<a href="">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul class="submenu">
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
</a>
+
<!-- GA -->
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul class="submenu">
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul class="submenu">
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="/">
+
-
<img src="" />
+
-
+
-
</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>
+
-
<!-- Code for jQuery Hover Box -->
+
-
+
-
+
-
</article>
+
-
</section>
+
-
</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 245: Line 68:
var pageTracker = _gat._getTracker("UA-2260508-2");
var pageTracker = _gat._getTracker("UA-2260508-2");
pageTracker._trackPageview();
pageTracker._trackPageview();
-
} catch(err) {}
+
} catch(err) {}</script>
-
</script>
+
<!-- GA -->
-
 
+
</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="http://www.renren.com/296396903/profile?ref=opensearch_normal"><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">
+
-
<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" />&nbsp;
+
-
                <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
+
-
</form>
+
-
                </li>
+
-
            </ul>
+
-
        </div>
+
-
     
+
-
    </div>
+
-
</div></html>
+

Revision as of 18:34, 22 September 2012

Creating "Next Level" Search Form Using jQuery & CSS3 | Webstuffshare.com

Creating "Next Level" Search Form Using jQuery & CSS3


Simpe Style

hit the button

Both following demo works only on Safari & Firefox. Tested only on Safari 5+ & Firefox 11.0 (both Mac)

Cube Style

Cube Style With Animate

make a click

Retrieved from "http://2012.igem.org/Team:OUC-China/BaoYingying"