Team:Penn/Notebook2

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <head> <link rel="stylesheet" href='/Team:Penn/css/navigation?action=raw&ctype=text/css' /> <link rel="stylesheet" href='/Team:Penn/css/layerslider?action=raw&ctyp...")
 
(6 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/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/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 14: Line 34:
<body>
<body>
 +
<div style="overflow:hidden;">
<div style="margin-bottom:0px; padding-bottom:0px;">
<div style="margin-bottom:0px; padding-bottom:0px;">
<a href="https://2012.igem.org/Team:Penn" style="padding:0px; margin:0px;">
<a href="https://2012.igem.org/Team:Penn" style="padding:0px; margin:0px;">
Line 87: Line 108:
</ul>
</ul>
-
<!----------------------------------------------------------------------------------------------------->
+
<!----------------------------------------------------------------------------->
-
 
+
<div id="accordion-container">
-
<div style="background-color:white;display:block; margin-left: auto; margin-right: auto;">
+
<h2 class="accordion-header">What is it?</h2>
-
 
+
-
<div id="options">
+
<div class="accordion-content">
-
<a href="javascript:parentAccordion.pr(1)">Exand All</a> | <a href="javascript:parentAccordion.pr(-1)">Collapse All</a>
+
<p class="first-p">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!</p>
-
</div>
+
-
<ul class="acc" id="acc">
+
<div id="tweet">
-
<li>
+
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="switchroyale">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-
<h3>About</h3>
+
</div>
-
<div class="acc-section">
+
-
<div class="acc-content">
+
<div id="like">
-
<ul class="acc" id="nested">
+
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.switchroyale.com/vallenato" layout="button_count" show_faces="false" width="450" font="verdana"></fb:like>
-
<li>
+
</div>
-
<h3>Nested One</h3>
+
-
<div class="acc-section">
+
-
<div class="acc-content">
+
-
Donec elementum lobortis lorem. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
-
</div>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<h3>Nested Two</h3>
+
-
<div class="acc-section">
+
-
<div class="acc-content">
+
-
Vestibulum blandit mauris elementum mauris.
+
-
</div>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<h3>Nested Three</h3>
+
-
<div class="acc-section">
+
-
<div class="acc-content">
+
-
Morbi felis libero, porta non, sagittis ac, consectetur in, sem.
+
-
</div>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.
+
</div>
</div>
-
</div>
+
-
</li><li>
+
<h2 class="accordion-header">Download</h2>
-
<h3>Instructions</h3>
+
-
<div class="acc-section">
+
<div class="accordion-content">
-
<div class="acc-content">
+
<p class="first-p">Download the Vallenato script here:</p>
-
To initialize an accordion use the following code:<br /><br />
+
-
<code>
+
<p class="last-p"><a href="vallenato.zip">Vallenato</a></p>
-
var accordion=new TINY.accordion.slider(&quot;accordion&quot;);<br />
+
-
accordion.init(&quot;accordion&quot;,&quot;h3&quot;,false,0,&quot;selected&quot;);
+
-
</code><br /><br />
+
-
You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).
+
-
</div>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<h3>Licensing &amp; Support</h3>
+
-
<div class="acc-section">
+
-
<div class="acc-content">
+
-
This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>
+
</div>
</div>
-
</div>
+
-
</li>
+
<h2 class="accordion-header">Installation</h2>
-
</ul>
+
 +
<div class="accordion-content">
 +
<p class="first-p">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.</p>
 +
 +
<p>In the &lt;head&gt; section of your html you will need to link to jQuery, the Vallenato script and stylesheet. You can use the following code:</p>
 +
 +
<div class="code">
 +
<code>
 +
<p class="first-p">&lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt;</p>
-
<script type="text/javascript" src='/Team:Penn/js/accordion?action=raw&amp;ctype=text/javascript'></script>
+
<p>&lt;script src="vallenato/vallenato.js" type="text/javascript"&gt;&lt;/script&gt;</p>
-
<script type="text/javascript">
+
<p class="last-p">&lt;link rel="stylesheet" href="vallenato/vallenato.css" type="text/css" media="screen"&gt;</p>
 +
</code>
 +
</div>
 +
</div>
 +
 +
<h2 class="accordion-header">Mark Up</h2>
 +
 +
<div class="accordion-content">
 +
<p class="first-p">Mark up is simple and straight forward, just use the following code as a template:</p>
 +
 +
<div class="code">
 +
<code>
 +
<p class="first-p last-p">&lt;div id="accordion-container"&gt;
 +
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class="accordion-header"&gt;Section 1&lt;/h2&gt;
-
var parentAccordion=new TINY.accordion.slider("parentAccordion");
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="accordion-content"&gt;
-
parentAccordion.init("acc","h3",1,-1);
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Section 1 Content&lt;/p&gt;
 +
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
var nestedAccordion1=new TINY.accordion.slider("nestedAccordion1");
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class="accordion-header"&gt;Section 2&lt;/h2&gt;
-
nestedAccordion1.init("nested","h3",1,-1);
+
-
var nestedAccordion2=new TINY.accordion.slider("nestedAccordion2");
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="accordion-content"&gt;
-
nestedAccordion2.init("nested2","h3",1,-1,"acc-selected");
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Section 2 Content&lt;/p&gt;
-
 
+
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
var nestedAccordion3=new TINY.accordion.slider("nestedAccordion3");
+
<br>&lt;/div&gt;</p>
-
nestedAccordion3.init("nested3", "h3",1,-1, "acc-selected");
+
</code>
-
 
+
</div>
-
</script>
+
</div>
-
 
+
</div>
-
 
+
-
</div>
+

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"