Team:Penn/Notebook2

From 2012.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 7: Line 7:
<link rel="stylesheet" href='/Team:Penn/css/igemsubcss?action=raw&amp;ctype=text/css' />
<link rel="stylesheet" href='/Team:Penn/css/igemsubcss?action=raw&amp;ctype=text/css' />
<link rel="stylesheet" href='/Team:Penn/css/accordion?action=raw&amp;ctype=text/css' />
<link rel="stylesheet" href='/Team:Penn/css/accordion?action=raw&amp;ctype=text/css' />
-
<script src='http://www.switchroyale.com/vallenato/js/jquery-1.5.min.js>action=raw&amp;ctype=text/javascript' type="text/javascript" charset="utf-8"></script>
+
<script src='http://www.switchroyale.com/vallenato/js/jquery-1.5.min.js?action=raw&amp;ctype=text/javascript' type="text/javascript" charset="utf-8"></script>
<script src='http://www.switchroyale.com/vallenato/vallenato/vallenato.js?action=raw&amp;ctype=text/javascript' type="text/javascript" charset="utf-8"></script>
<script src='http://www.switchroyale.com/vallenato/vallenato/vallenato.js?action=raw&amp;ctype=text/javascript' type="text/javascript" charset="utf-8"></script>
-
<link rel="stylesheet" href='http://www.switchroyale.com/vallenato/css/style.css?action=raw&amp;ctype=text/css' type="text/css" media="screen" charset="utf-8">
 
<link rel="stylesheet" href='http://www.switchroyale.com/vallenato/vallenato/vallenato.css?action=raw&amp;ctype=text/css' type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href='http://www.switchroyale.com/vallenato/vallenato/vallenato.css?action=raw&amp;ctype=text/css' type="text/css" media="screen" charset="utf-8">
<title>Penn 2012 iGEM Wiki</title>
<title>Penn 2012 iGEM Wiki</title>
 +
<script type="text/javascript">
 +
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-5390553-2']);
 +
  _gaq.push(['_trackPageview']);
 +
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 +
</script>
 +
 +
</head>
</head>
Line 20: Line 34:
<body>
<body>
 +
<div style="overflow:hidden;">
 +
<div style="margin-bottom:0px; padding-bottom:0px;">
 +
<a href="https://2012.igem.org/Team:Penn" style="padding:0px; margin:0px;">
 +
<img src="https://static.igem.org/mediawiki/2012/e/e5/Bluelogo.jpg" /></a>
 +
</div>
 +
 +
<ul class="nav">
 +
<li class="dropdown">
 +
 +
    <a href="#">Drug Delivery</a>
 +
 +
<ul>
 +
        <li><a href='/Team:Penn/DrugDeliveryOverview'>Overview</a></li>
 +
<li><a href='/Team:Penn/DrugDeliverySystem'>System</a></li>
 +
<li><a href='/Team:Penn/DrugDeliveryResults'>Results</a></li>
 +
<li><a href='/Team:Penn/DrugDeliveryParts'>Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
<li class="dropdown">
 +
 +
    <a href="#">Biofilms</a>
 +
 +
<ul>
 +
              <li><a href='/Team:Penn/BiofilmsOverview'>Overview</a></li>
 +
<li><a href='/Team:Penn/BioflmsSystem'>System</a></li>
 +
<li><a href='/Team:Penn/BiofilmsResults'>Results</a></li>
 +
<li><a href='/Team:Penn/BiofilmsParts'>Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
<li class="dropdown">
 +
 +
<a href="#">Lab Work</a>
 +
 +
<ul>
 +
 +
                                <li><a href='/Team:Penn/Notebook'>Notebook</a></li>
 +
<li><a href='/Team:Penn/Safety'>Safety</a></li>
 +
<li><a href='/Team:Penn/Protocols'>Protocols</a></li>
 +
 +
</ul>
 +
 +
        </li>
 +
 +
<li class="dropdown">
 +
 +
<a href="#">Human Practices</a>
 +
 +
<ul>
 +
 +
<li><a href='/Team:Penn/Education'>Education</a></li>
 +
<li><a href='/Team:Penn/Regulations'>Regulations</a></li>
 +
<li><a href='/Team:Penn/Registry'>The Registry</a></li>
 +
</ul>
 +
 +
</li>
 +
 +
<li class="dropdown">
 +
 +
<a href="#">About Us</a>
 +
 +
<ul>
 +
 +
<li><a href='/Team:Penn/Team'>Team</a></li>
 +
<li><a href='/Team:Penn/Advisors'>Advisors</a></li>
 +
<li><a href='/Team:Penn/Sponsors'>Sponsors</a></li>
 +
</ul>
 +
</li>
 +
 +
<div class="arrow"></div>
 +
 +
</ul>
 +
 +
<!----------------------------------------------------------------------------->
<div id="accordion-container">
<div id="accordion-container">
<h2 class="accordion-header">What is it?</h2>
<h2 class="accordion-header">What is it?</h2>

Latest revision as of 10:01, 15 September 2012

Penn 2012 iGEM Wiki

What is it?

Vallenato is a super simple jQuery based accordion script. There are plenty of other great accordion scripts out there to choose from, so why use Vallenato? Well, it's easy to implement, looks good, is flexible, and of course...it's free. This page is an example of Vallenato in action!

Download

Download the Vallenato script here:

Vallenato

Installation

First, unzip the "vallenato.zip" file and place the "vallenato" folder in the same directory as the html file(s) that will be using the script. If placed in a different folder, you will need to update the paths below.

In the <head> section of your html you will need to link to jQuery, the Vallenato script and stylesheet. You can use the following code:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="vallenato/vallenato.js" type="text/javascript"></script>

<link rel="stylesheet" href="vallenato/vallenato.css" type="text/css" media="screen">

Mark Up

Mark up is simple and straight forward, just use the following code as a template:

<div id="accordion-container">
     <h2 class="accordion-header">Section 1</h2>
     <div class="accordion-content">
          <p>Section 1 Content</p>
     </div>
     <h2 class="accordion-header">Section 2</h2>
     <div class="accordion-content">
          <p>Section 2 Content</p>
     </div>
</div>

Retrieved from "http://2012.igem.org/Team:Penn/Notebook2"