Biomod/2011/IITM/AcidArtists

From OpenWetWare

< Biomod | 2011(Difference between revisions)
Jump to: navigation, search
Current revision (22:41, 25 May 2012) (view source)
(Undo revision 604268 by Nikhil Srinivasan (Talk))
 
(47 intermediate revisions not shown.)
Line 9: Line 9:
ul.polaroids li { display: inline; }
ul.polaroids li { display: inline; }
ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px;  -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px;  -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
-
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
+
ul.polaroids img { display: block; width: 220px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
#content{
#content{
Line 29: Line 29:
-
body{
 
-
background:url('http://openwetware.org/images/2/23/Grunge_Backgrounds.png');
 
-
color:#333;;
 
-
}
 
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
Line 101: Line 97:
}
}
-
.picture{width:150px;}
+
.picture{width:200px;}
ul.polaroids a:after {
ul.polaroids a:after {
Line 157: Line 153:
     }
     }
 +
.stuff_contents{
 +
position:fixed;
 +
top:8%; left:13%;
 +
display:none;
 +
width:80%;
 +
color:white;
 +
z-index:101;
 +
}
</style>
</style>
Line 167: Line 171:
     var closespeed = 300;   
     var closespeed = 300;   
     $('.stack>img').toggle(function(){   
     $('.stack>img').toggle(function(){   
 +
        //reverse above 
 +
        var $el=$(this); 
 +
        $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); 
 +
        $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed); 
 +
        $el.animate({paddingTop: '35'}); 
 +
    },function(){ 
         var vertical = 0;   
         var vertical = 0;   
         var horizontal = 0;   
         var horizontal = 0;   
Line 178: Line 188:
           .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);   
           .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);   
         $el.animate({paddingTop: '0'});   
         $el.animate({paddingTop: '0'});   
-
    }, function(){ 
+
     });  
-
        //reverse above 
+
-
        var $el=$(this); 
+
-
        $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); 
+
-
        $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed); 
+
-
        $el.animate({paddingTop: '35'}); 
+
-
     });
+
    
    
     // Stacks additional animation   
     // Stacks additional animation   
Line 201: Line 205:
var vertical = 0;   
var vertical = 0;   
         var horizontal = 0;   
         var horizontal = 0;   
-
         var $el=$(this);   
+
         var $el=$('.stack>img');   
         $el.next().children().each(function(){   
         $el.next().children().each(function(){   
             $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);   
             $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);   
-
             vertical = vertical + 55;   
+
             vertical = vertical + 75;   
             horizontal = (horizontal+.75)*2;   
             horizontal = (horizontal+.75)*2;   
         });   
         });   
Line 213: Line 217:
jQuery(document).ready(function(){
jQuery(document).ready(function(){
-
 
+
var name;
$(".picture").click(function(){
$(".picture").click(function(){
 +
name="#"+$(this).attr("title");
$("#data_container").fadeIn();
$("#data_container").fadeIn();
-
$("#video").fadeOut();
+
$(name).fadeIn();
});
});
$("#close_dialog").click(function(){
$("#close_dialog").click(function(){
$("#data_container").fadeOut();
$("#data_container").fadeOut();
 +
$(name).fadeOut();
});
});
Line 230: Line 236:
<body onload="open_menu()">
<body onload="open_menu()">
-
<div id="pics" style="float:left;" align=center>
+
<img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/>
-
<ul class="polaroids" style="list-style:none;" align=center>
+
<br/><br/>
-
<li><a href="#"><img class="picture" src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" title="Image1"/></a></li>
+
-
<li><a href="#"><img class="picture" src="http://openwetware.org/images/6/67/Play_icon.png" title="Image1"/></a></li>
+
-
<li><a href="#"><img class="picture" src="http://openwetware.org/images/9/97/Project_iitm.png" title="Image1"/></a></li>
+
-
<br/>
+
-
<li style="position:relative; top:280px; left:-474px;"><a href="#"><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="Image1"/></a></li>
+
-
<li ><a href="#"><img class="picture" src="http://openwetware.org/images/c/c9/Blank-polaroid.png" title="Image1"/></a></li>
+
-
</ul>
+
-
</div>
+
Line 245: Line 243:
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack">   
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack">   
<ul id="stack">   
<ul id="stack">   
-
<li><a href=""><span>Reference Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li>
+
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Sponsors"><span>Sponsors</span><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="sponsors"/></a></li>
-
<li><a href=""><span>Brain Stroming</span><img src="http://openwetware.org/images/3/3f/Brain.png" alt="Brain Storming"></a></li>   
+
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Reference_papers"><span>Reference_Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li>   
-
<li><a href=""><span>Work Diary</span><img src="http://openwetware.org/images/2/2a/Diary.png" alt="Work diary"></a></li>   
+
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Team"><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li>   
-
<li><a href=""><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li>   
+
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Project"><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li>   
-
<li><a href=""><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li>   
+
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/DNA_Nanotech"><span>Introduction</span><img src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" alt="Introduction"></a></li>   
</ul>   
</ul>   
</div>   
</div>   
 +
Line 257: Line 256:
<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div>
<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div>
-
<div id="data_container" style="border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; position:fixed; width:80%; left:10%; height:90%; top:5%; background:black; opacity:0.95; z-index:100; display:none;" >
+
<iframe width="800" height="450" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>
-
<div id="close_dialog" style="position:absolute; top:7px; right:15px; cursor:pointer; color:white;">close <b>X</b></div>
+
-
</div>
+
-
<iframe style="display:none;" id="video" width="640" height="360" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>
 
</body>
</body>
</html>
</html>

Current revision



stack

Retrieved from "http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists"
Personal tools