Biomod/2011/IITM/AcidArtists/new page: Difference between revisions
No edit summary |
No edit summary |
||
Line 51: | Line 51: | ||
$("#close_container").click(function(){ | $("#close_container").click(function(){ | ||
if(flag==1){ | if(flag==1){ | ||
$("#content_container"). | $("#content_container").fadeOut(); | ||
$("#close_container").hide(); | $("#close_container").hide(); | ||
flag=0; | flag=0; |
Revision as of 11:19, 27 October 2011
<html> <head> <style>
- bodyContent{text-align:center;}
- content{
color:white; background:black; border:none; } .portlet .pBody { border:none; background-color: black; } .portlet a{color:white;} .pBody a{color:white;}
- footer{background:black; border:none;}
- footer li{color:white;}
- footer li a {color:white;}
body{
background:black;
color:white;
}
h1, h2, h3, h4, h5, h6, p, a, pre{color:white;}
- menu ul{list-style:none;}
- menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px;}
- content_container{width:1%;height:10px; background:#234ade; position:absolute; top:260px; display:none; left:495%}
- close_container{position:absolute;left:100%;top:-30px;}
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script> <script type="text/javascript"> jQuery(document).ready(function($){ var flag=0;
$(".link").mouseover(function(){ if(flag==0){ $("#content_container").show().animate({"width":"95%","left":0}).animate({"height":"400px"}); $("#close_container").show(); flag=1; } });
$("#close_container").click(function(){ if(flag==1){ $("#content_container").fadeOut(); $("#close_container").hide(); flag=0; } });
}); </script>
</head> <body> <img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> <h1>Acid Artists</h1> <div id="menu"> <ul> <li id="l1" class="link">Project</li> <li id="l2" class="link">Team</li> <li id="l3" class="link">Work diary</li> <li id="l4" class="link">Brain storming</li> <li id="l5" class="link">Reference papers</li> <li id="l6" class="link">To do list</li> <li id="l7" class="link">Resources</li> </ul> </div>
<div id="content_container"><div id="close_container">close <b>X</b></div></div>
<div id="project" class="contents"></div> <div id="team" class="contents"></div> <div id="work_diary" class="contents"></div> <div id="brain_storming" class="contents"></div> <div id="ref_papers" class="contents"></div> <div id="to_do" class="contents"></div> <div id="resources" class="contents"></div>
</body>
</html>