Commit 3dd8436b authored by Jerome Mariette's avatar Jerome Mariette
Browse files

No commit message

No commit message
parent 7fecfb8e
/* padding for in-page bookmarks and fixed navbar */
section {
padding-top: 30px;
}
section > .page-header,
section > .lead {
color: #5a5a5a;
}
section > ul li {
margin-bottom: 5px;
}
/* Social proof buttons from GitHub & Twitter */
.bs-docs-social {
padding: 15px 0;
text-align: center;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
}
/* Quick links on Home */
.bs-docs-social-buttons {
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.bs-docs-social-buttons li {
display: inline-block;
padding: 5px 8px;
line-height: 1;
*display: inline;
*zoom: 1;
}
/* Base class */
.bs-docs-example {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Echo out a label for the example */
.bs-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
margin-top: -20px;
padding-top: 15px;
}
/* Tweak examples
------------------------- */
.bs-docs-example > p:last-child {
margin-bottom: 0;
}
.bs-docs-example .table,
.bs-docs-example .progress,
.bs-docs-example .well,
.bs-docs-example .alert,
.bs-docs-example .hero-unit,
.bs-docs-example .pagination,
.bs-docs-example .navbar,
.bs-docs-example > .nav,
.bs-docs-example blockquote {
margin-bottom: 5px;
}
.bs-docs-example .pagination {
margin-top: 0;
}
.bs-navbar-top-example,
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
height: 90px;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
margin-left: 0;
margin-right: 0;
}
.bs-navbar-top-example {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.bs-navbar-top-example:after {
top: auto;
bottom: -1px;
-webkit-border-radius: 0 4px 0 4px;
-moz-border-radius: 0 4px 0 4px;
border-radius: 0 4px 0 4px;
}
.bs-navbar-bottom-example {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.bs-navbar-bottom-example .navbar {
margin-bottom: 0;
}
form.bs-docs-example {
padding-bottom: 19px;
}
/* Images */
.bs-docs-example-images img {
margin: 10px;
display: inline-block;
}
/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
.bs-docs-tooltip-examples li {
display: inline;
padding: 0 10px;
}
/* Popovers */
.bs-docs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-docs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
/* Dropdowns */
.bs-docs-example-submenus {
min-height: 180px;
}
.bs-docs-example-submenus > .pull-left + .pull-left {
margin-left: 20px;
}
.bs-docs-example-submenus .dropup > .dropdown-menu,
.bs-docs-example-submenus .dropdown > .dropdown-menu {
display: block;
position: static;
margin-bottom: 5px;
*width: 180px;
}
/* Sidenav for Docs
-------------------------------------------------- */
.bs-docs-sidenav {
width: 228px;
margin: 30px 0 0;
padding: 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
display: block;
width: 190px \9;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
position: relative;
z-index: 2;
padding: 9px 15px;
border: 0;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
background-image: url(../img/glyphicons-halflings-white.png);
opacity: 1;
}
.bs-docs-sidenav.affix {
top: 40px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
\ No newline at end of file
......@@ -7,83 +7,7 @@
<title>Jquery.venny</title>
<!-- Les styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/css/docs.css" rel="stylesheet" media="screen">
<!-- <style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
} */
.bs-docs-sidenav {
width: 258px;
}
.bs-docs-sidenav {
background-color: #FFFFFF;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 30px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
width: 228px;
}
.bs-docs-sidenav > li:first-child > a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bs-docs-sidenav > li > a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-bottom-color: #E5E5E5;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #E5E5E5;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #E5E5E5;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #E5E5E5;
border-top-style: solid;
border-top-width: 1px;
display: block;
margin-bottom: -1px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 8px;
padding-left: 14px;
padding-right: 14px;
padding-top: 8px;
}
</style> -->
<link href="css/docs.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
......@@ -118,12 +42,12 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><a href="#plugin-insertion">plugin insertion</a></li>
<li><a href="#series">series</a></li>
<li><a href="#fnClickCallback">fnClickCallback</a></li>
<li><a href="#disableClick">disableClick</a></li>
<li><a href="#useValues">useValues</a></li>
<li><a href="#exporting">exporting</a></li>
<li class="active"><a href="#plugin-insertion"><i class="icon-chevron-right"></i> plugin insertion</a></li>
<li><a href="#series"><i class="icon-chevron-right"></i> series</a></li>
<li><a href="#fnClickCallback"><i class="icon-chevron-right"></i> fnClickCallback</a></li>
<li><a href="#disableClick"><i class="icon-chevron-right"></i> disableClick</a></li>
<li><a href="#useValues"><i class="icon-chevron-right"></i> useValues</a></li>
<li><a href="#exporting"><i class="icon-chevron-right"></i> exporting</a></li>
</ul>
</div>
......
......@@ -12,7 +12,6 @@
padding-bottom: 40px;
}
</style>
<!-- <link href="http://twitter.github.io/bootstrap/assets/css/docs.css" rel="stylesheet" media="screen"> -->
<link href="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
......
<!DOCTYPE html>
<html>
<head>
<title>jQuery Venny</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/css/docs.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.venny.js"></script>
<script language="Javascript">
$(document).ready(function () {
function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n");
var table = new Array();
for (var lindex in lines) {
table.push(lines[lindex]);
}
return (table);
}
function updateVenny() {
var seriesTable = new Array();
if ($("#area1").val() != "") {
seriesTable.push({
name: $("#name1").val(),
data: getArrayFromArea("area1")
});
}
if ($("#area2").val() != "") {
seriesTable.push({
name: $("#name2").val(),
data: getArrayFromArea("area2")
});
}
if ($("#area3").val() != "") {
seriesTable.push({
name: $("#name3").val(),
data: getArrayFromArea("area3")
});
}
if ($("#area4").val() != "") {
seriesTable.push({
name: $("#name4").val(),
data: getArrayFromArea("area4")
});
}
if ($("#area5").val() != "") {
seriesTable.push({
name: $("#name5").val(),
data: getArrayFromArea("area5")
});
}
$("#venny-container").venny({
series: seriesTable,
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
$("#names").val(value);
}
});
}
$("#setexample").click(function() {
$("#name1").val("Actors");
$("#area1").val("Marilyn Monroe\nArnold Schwarzenegger\nJack Nicholson\nBarbra Streisand\nRobert de Niro\nDean Martin\nHarrison Ford");
$("#name2").val("Singers");
$("#area2").val("Freddy Mercury\nBarbra Streisand\nDean Martin\nRicky Martin\nCeline Dion\nMarilyn Monroe");
updateVenny();
});
$('[id^="clear"]').click(function() {
var index = $(this).attr("id").split("_")[1];
$("#area" + index).val("");
$("#name" + index).val("List " + index);
updateVenny();
});
// update the view when any fields change
$("[id^=name]").change(function() {
updateVenny();
});
$("[id^=area]").change(function() {
updateVenny();
});
// first init of the venny plugin
$("#venny-container").venny({ series: [] });
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">jQuery Venny</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li class="active"><a href="./example.html">Example</a></li>
<li><a href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil" target=_blank"">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="tx-venny-pi1">
<table cellspacing="8" cellpadding="0" border="0">
<tbody>
<tr>
<td id="venny-container" valign="center" height="100%" style="padding: 0px;"></td>
<td valign="bottom">
<p class="bodytext"> Paste up to <strong>five</strong> lists using one row per element, then click the numbers to see the results. <a id="setexample" href="javascript:void(0)"> example </a></p>
<br />
<dt>
<input id="name1" type="textbox" style="color: #228B22; font-weight: bold;" value="List 1" maxlength="11" size="18" />
<br />
<textarea id="area1" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_1" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name2" type="textbox" style="color: #3366BB; font-weight: bold;" value="List 2" maxlength="11" size="18" />
<br />
<textarea id="area2" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_2" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name3" type="textbox" style="color: #99334E; font-weight: bold;" value="List 3" maxlength="11" size="18" />
<br />
<textarea id="area3" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_3" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name4" type="textbox" style="color: #FFD700; font-weight: bold;" value="List 4" maxlength="11" size="18" />
<br />
<textarea id="area4" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_4" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name5" type="textbox" style="color: #FFA54F; font-weight: bold;" value="List 5" maxlength="11" size="18" />
<br />
<textarea id="area5" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_5" href="javascript:void(0)">clear</a> </dt>
</td>
</tr>
<tr>
<td valign="bottom" colspan="2">
<p> Click on a number to show the corresponding elements: </p>
<textarea id="names" wrap="off" style="width: 100%;" rows="8"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <!-- /container -->
<footer class="footer" style="background-color:#e5e5e5;">
<div class="container">
<p>Copyright &copy; 2013, INRA | Designed by GenoToul Bioinfo team.</p>
<p>Code licensed under the GNU General Public License</p>
<ul class="footer-links" style="list-style-type: none;">
<li><a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.international.inra.fr/" target="_blank">INRA</a></li>
</ul>
</div>
</footer>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment