Biomod/2011/IITM/AcidArtists/new page: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 126: Line 126:


<div class="stack">   
<div class="stack">   
<img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/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>Aperture</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/aperture.png" alt="Aperature"></a></li>   
<li><a href=""><span>Aperture</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/aperture.png" alt="Aperature"></a></li>   

Revision as of 13:55, 1 November 2011

<html> <head> <style>

  1. bodyContent{text-align:center;}
  1. content{

color:white; background:none; border:none; } .portlet .pBody { border:none; background:none; } .portlet a{color:white;} .pBody a{color:white;}

  1. footer{background:none; border:none;}
  2. footer li{color:white;}
  3. footer li a {color:white;}


body{ background:url('http://openwetware.org/images/6/68/Grunge-sky-background.jpg'); color:white; }

h1, h2, h3, h4, h5, h6, p, a, pre{color:white; font-family: 'Trebuchet MS', Helvetica, sans-serif;}

  1. menu ul{list-style:none;}
  2. menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px; cursor:pointer}
  1. content_container{width:1%;height:10px; background:#333; position:absolute; top:260px; display:none; left:495%; opacity:0.8;

border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; border:1px #AAA solid; }

  1. close_container{position:absolute;left:98.5%;top:5px;,cursor:pointer;}

.contents{float:none; position:absolute; width:89%; text-align:justify; top:280px; display:none; height:316px; overflow:auto; padding:16px;}

.slide_show_pic{ position:absolute; top:-40px; left:160px; display:none; height:400px; }

/*stack*/

.stack { position: fixed; bottom: 28px; right: 40px; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; } .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span { 

   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;  
   display:block;  
   height: 14px;  
   position:absolute;  
   top: 17px;  
   right:60px;  
   line-height: 14px;  
   border: 0;  
   background-color:#000;  
   padding: 3px 10px;  
   border-radius: 10px;  
   -webkit-border-radius: 10px;  
   -moz-border-radius: 10px;  
   color: #fcfcfc;  
   text-align: center;  
   text-shadow: #000 1px 1px 1px;  
   opacity: .85;  
   filter: alpha(opacity = 85);

}

/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; }

/*stack close*/

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script> <script>

jQuery(function () { 

   // Stack initialize  
   var openspeed = 300;  
   var closespeed = 300;  
   $('.stack>img').toggle(function(){  
       var vertical = 0;  
       var horizontal = 0;  
       var $el=$(this);  
       $el.next().children().each(function(){  
           $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);  
           vertical = vertical + 55;  
           horizontal = (horizontal+.75)*2;  
       });  
       $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')  
          .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);  
       $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: '79px', marginLeft: '0'}, closespeed);  
       $el.animate({paddingTop: '35'});  
   });  
 
   // Stacks additional animation  
   $('.stack li a').hover(function(){  
       $("img",this).animate({width: '56px'}, 100);  
       $("span",this).animate({marginRight: '30px'});  
   },function(){  
       $("img",this).animate({width: '50px'}, 100);  
       $("span",this).animate({marginRight: '0'});  
   });

});


</script> </head>

<body>

<div class="stack"> <img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack"> <ul id="stack"> <li><a href=""><span>Aperture</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/aperture.png" alt="Aperature"></a></li> <li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>All Examples</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/photoshop.png" alt="Photoshop"></a></li> <li><a href="example3.html"><span>Example 3</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/safari.png" alt="Safari"></a></li> <li><a href="example2.html"><span>Example 2</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/coda.png" alt="Coda"></a></li> <li><a href="index.html"><span>Example 1</span><img src="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/images/stacks/finder.png" alt="Finder"></a></li> </ul> </div>

</body> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2011/IITM/AcidArtists/new_page&oldid=559255"