From: jprocter Date: Wed, 7 Nov 2012 15:11:16 +0000 (+0000) Subject: JAL-1201 update pages to use new website design X-Git-Tag: Release_2_8~2^2~24 X-Git-Url: http://source.jalview.org/gitweb/?a=commitdiff_plain;ds=sidebyside;h=92d3ddd8e9cf6f34759557f3ed85a12a1dd91c34;p=jalview.git JAL-1201 update pages to use new website design --- diff --git a/examples/appletParameters.html b/examples/appletParameters.html index ff41cb6..286c26d 100644 --- a/examples/appletParameters.html +++ b/examples/appletParameters.html @@ -1,4 +1,4 @@ - + - + - Applet Parameters - - - - - + - - - -

- - - - -

- - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Discussion Mailing List

Please send problems
and - bug reports to the discussion list.

+ + + + + + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

Quick Links:

Download the applet jar file from here @@ -571,10 +578,23 @@ pageTracker._trackPageview();

Multiple sequences aligment scores file. Currently is supported only the T-Coffee score_ascii file format

- - - +

+ + - + diff --git a/examples/applets.html b/examples/applets.html index 2af2591..2ab29a3 100755 --- a/examples/applets.html +++ b/examples/applets.html @@ -1,4 +1,4 @@ - + - + - Jalview - Applets - - - - - + - - - -

- - - - -

- - - - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Discussion Mailing List

Please send problems
and - bug reports to the discussion list.

+ -

Jalview comes in two distinct flavours.
-
- The main application allows connection to multiple web services provided - at the University of Dundee as well as a host of additional useful features - such as printing, making images from your alignment and annotating your - alignment. You need to download and install this software.

The applet version runs in web browsers and is a useful interactive + +

+ + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

JalviewLite is a web based version of Jalview, which runs as a Java applet in or on a web page. It's one of the easiest ways of providing an interactive display for precalculated alignments, features and annotations files. - It does not have the full functionality of the main application, such - as making images, saving files, running web service jobs due to security + It lacks some functionality available in the Jalview Desktop, however, such + as making images, saving files, and running web service jobs. This is mostly due to security restrictions imposed on applets.

For more information on how to use the applet in your website, see full list of applet @@ -321,9 +321,24 @@ pageTracker._trackPageview();

use Javascript to make two jalviewLite instances talk to each other

configure JalviewLite to talk to a Jmol applet on the page.
-

+ + - + + \ No newline at end of file diff --git a/examples/css/ie6.css b/examples/css/ie6.css new file mode 100644 index 0000000..3640d98 --- /dev/null +++ b/examples/css/ie6.css @@ -0,0 +1,73 @@ +#nav #navInner +{ +margin-top:0x; +} + + +#sddm +{ + position:relative; + top:0; +} + + +#sddm li a.download-right +{ +position:absolute; +top:28px; +left:270px; +} + +#sddm li +{ +padding-top:30px; +padding-bottom:30px; +} + +#sddm div +{ position: absolute; + visibility: hidden; + margin: 0; + padding: 0; + top:80px; + z-index:9999; + width:0; + display:none; +} + + + #sddm div a + { position: relative; + display: block; + margin: 0; + padding:8px; + width: 200px; + white-space: nowrap; + text-align: left; + text-decoration: none; + background: #555; + color: #fff; + border: 1px solid #000000; + background: #555; + z-index:100; + left:-1100px; + } + + +#nav +{ +position:relative; +z-index:2; + clear:both; + float:left; + width:100%; /* width of whole page */ +} + +#content +{ +position:relative; +z-index:2; + clear:both; + float:left; + width:100%; /* width of whole page */ +} diff --git a/examples/css/ie7.css b/examples/css/ie7.css new file mode 100644 index 0000000..251303c --- /dev/null +++ b/examples/css/ie7.css @@ -0,0 +1,67 @@ +#sddm +{ + position:relative; + top:0; +} + + +#sddm li a.download-right +{ +position:relative; +left:0; +} + +#sddm li +{ +padding-top:30px; +padding-bottom:30px; +} + +#sddm div +{ position: absolute; + visibility: hidden; + margin: 0; + padding: 0; + background: #555; + border: 1px solid #000000; + top:80px; + z-index:9999; + width:120px; +} + + + #sddm div a + { position: relative; + display: block; + margin: 0; + padding:8px; + width: 200px; + white-space: nowrap; + text-align: left; + text-decoration: none; + background: #555; + color: #fff; + border: 1px solid #000000; + background: #555; + z-index:100; + left:-80px; + } + + +#nav +{ +position:relative; +z-index:2; + clear:both; + float:left; + width:100%; /* width of whole page */ +} + +#content +{ +position:relative; +z-index:2; + clear:both; + float:left; + width:100%; /* width of whole page */ +} diff --git a/examples/css/reset.css b/examples/css/reset.css new file mode 100644 index 0000000..c9cdbf1 --- /dev/null +++ b/examples/css/reset.css @@ -0,0 +1,95 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + + v2.0 | 20110126 + + License: none (public domain) + +*/ + + + +html, body, div, span, applet, object, iframe, + +h1, h2, h3, h4, h5, h6, p, blockquote, pre, + +a, abbr, acronym, address, big, cite, code, + +del, dfn, em, img, ins, kbd, q, s, samp, + +small, strike, strong, sub, sup, tt, var, + +b, u, i, center, + +dl, dt, dd, ol, ul, li, + +fieldset, form, label, legend, + +table, caption, tbody, tfoot, thead, tr, th, td, + +article, aside, canvas, details, embed, + +figure, figcaption, footer, header, hgroup, + +menu, nav, output, ruby, section, summary, + +time, mark, audio, video { + + margin: 0; + + padding: 0; + + border: 0; + + font-size: 100%; + + font: inherit; + + vertical-align: baseline; + +} + +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, + +footer, header, hgroup, menu, nav, section { + + display: block; + +} + +body { + + line-height: 1; + +} + +ol, ul { + + list-style: none; + +} + +blockquote, q { + + quotes: none; + +} + +blockquote:before, blockquote:after, + +q:before, q:after { + + content: ''; + + content: none; + +} + +table { + + border-collapse: collapse; + + border-spacing: 0; + +} \ No newline at end of file diff --git a/examples/css/style.css b/examples/css/style.css new file mode 100644 index 0000000..7550b31 --- /dev/null +++ b/examples/css/style.css @@ -0,0 +1,391 @@ +@import url(http://fonts.googleapis.com/css?family=Lato); +@import url(http://fonts.googleapis.com/css?family=Oswald); + +/***************** +HTML 5 Elements +******************/ +new + + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section +{ + display: block; +} + + +.clearfix:after + { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} + + +/**************** +Body +****************/ + +body + +{ + font: 76% arial,Helvetica,sans-serif; + text-align:left; + background:#fff; + color:#000; + border-top: 20px solid #555555; +} + + + +/********************* +Page Wrapper +********************/ + +#pageWrap + +{ + width: 960px; + margin: 0 auto; + position:relative; +} + +/********************** +HEADER +************************/ + +#header +{ + display: block; + height: 180px; + margin: 0 auto 8px; + width: 960px; + position:relative; +} + +#logo a +{ + background-image: url("../images/logo.jpg"); + background-repeat: no-repeat; + height: 87px; + left: 0; + position: absolute; + top: 50px; + width: 361px; + margin-bottom:50px; +} + +#buttons +{ +height:88px; +width:252px; +float:right; + right: 0; + position: absolute; + top: 50px; +} + +#buttons li +{ +margin-bottom:10px; +} + +#buttons #applet a +{ + background-image: url("../images/applet.jpg"); + background-repeat: no-repeat; + height:50px; + width:250px; + position: absolute; + opacity: 1; + transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; + -webkit-transition: opacity .25s ease-in-out; + text-shadow: 2px 2px 10px #000000; +} + +#buttons #desktop a +{ + background-image: url("../images/desk.jpg"); + background-repeat: no-repeat; + height:50px; + width:250px; + position: absolute; + top:45px; + opacity: 1; + transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; + -webkit-transition: opacity .25s ease-in-out; + text-shadow: 2px 2px 10px #000000; +} + +#buttons #applet a:hover +{ + opacity: 0.8; +} + +#buttons #desktop a:hover +{ + opacity: 0.8; +} + +/***************************** +NAV +*********************************/ +#nav +{ +width:100%; +max-width:100%; +color:#fff; +background:#555; +height:80px; +} + +#navInner +{ +width:960px; +margin:0 auto; +position:relative; +} + + +#sddm +{ margin: 0; + padding: 0; + z-index: 30; + position:relative; + top:27px; +} + +#sddm li +{ margin: 0; + padding:0; + list-style: none; + float: left; +} + +#sddm li a +{ + color: #FFFFFF; + font-size: 13pt; + padding: 27px 15px 25px; + text-align: center; + text-decoration: none; + font-family: 'Lato',sans-serif; +} + +#sddm li a.community:hover +{ +background:#F78E1E; +} + +#sddm li a.development:hover +{ +background:#AEBF45; +} + +#sddm li a.training:hover +{ +background:#009DDC; +} + +#sddm li a.download-right +{ +float:right; +position:relative; +left:345px; +display:block; +clear:left; + margin-top: -27px; + padding: 27px 15px 25px; +} + + +ul#sddm li a:hover +{ + text-decoration: none; + background:#0083A9; +} + +#sddm div +{ position: absolute; + visibility: hidden; + margin: 0; + padding: 0; + background: #555; + border: 1px solid #000000; + top:50px; +} + + #sddm div a + { position: relative; + display: block; + margin: 0; + padding:8px; + width: 200px; + white-space: nowrap; + text-align: center; + text-decoration: none; + background: #555; + color: #fff; + border: 1px solid #000000; + background: #555; + } + + + +/***************************** +CONTENT +*****************************/ + +#content +{ + font-size: 10pt; + height: auto; + width: 710px; + padding-top:23px; + padding-bottom:23px; + overflow-x:auto; + overflow-y:hidden; +} + +#sideNav +{ +width:200px; +float:left; +padding-top:29px; +margin-right:50px; +} + + + +#sideNav li +{ + height: 40px; + list-style-image: none; + list-style-type: none; + margin-bottom: 20px; +} + +#sideNav a +{ + color: #555555; + display: block; + font-size: 13pt; + padding: 8px 0 0 15px; + text-decoration: none; +} + +#sideNav a:hover +{ + text-decoration: underline; +} +#sideNav .about-nav-title +{ +background: url("../images/normal-arrow-3-normal.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 5px; +} + +#sideNav .jvlite-nav-title +{ +background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 5px; +} + +#sideNav .jvlite-nav-small +{ +background: url("../images/jvlite-arrow-3-small.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 0px; +} + +#sideNav .com-nav-title +{ +background: url("../images/com-arrow-3-small.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 5px; +} + +#sideNav .dev-nav-title +{ +background: url("../images/dev-arrow-3-normal.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 5px; +} + +#sideNav .train-nav-title +{ +background: url("../images/train-arrow-3-normal.png") no-repeat scroll 0 0 transparent; + color: #FFFFFF; + font-family: 'Lato',sans-serif; + font-size: 18pt; + font-weight: normal; + height: 40px; + margin-bottom: 20px; + padding-left: 5px; +} + +/******************************** +FOOTER +***********************************/ + +#footer +{ +max-width:100%; +width:100%; +color:#fff; +background:#555; +height:140px; +padding-top:10px; +clear:both; +} + +#innerFooter +{ +width:960px; +margin:0 auto; +height:140px; +padding-top:10px; +} + + +#copyright +{ +float:left; +} + +#cite +{ +float:right; +width:555px; +} \ No newline at end of file diff --git a/examples/embedded.html b/examples/embedded.html index 415e77b..1450a8b 100644 --- a/examples/embedded.html +++ b/examples/embedded.html @@ -1,4 +1,4 @@ - + - -Embedded viewing of Alignments +<head>Embedded viewing of Alignments + + + + + + + + + + + + + + + + + + + + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

Embedded viewing of Alignments

The alignment below was generated from the following files:

Embedded JalviewLite talking to externally managed Jmol

- - - - -

- - - - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Discussion Mailing List

Please send problems
and - bug reports to the discussion list.

- + + + + + + + + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

+ + - - + diff --git a/examples/formComplete.html b/examples/formComplete.html index ab9b853..aebffc02 100644 --- a/examples/formComplete.html +++ b/examples/formComplete.html @@ -1,4 +1,4 @@ - + - + - JalviewLite Applet API and Form Complete Example - - - - - - + - - - -

- - - - -

- - - - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Discussion Mailing List

Please send problems
and - bug reports to the discussion list.

+ + + + + + + + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

Using the JalviewLite API to fill out forms using data from JalviewLite
Click the Javascript buttons below to interact with the Applet instance on the page.
@@ -192,10 +201,24 @@ pageTracker._trackPageview(); onClick="document.applets.Jalview.setFeatureGroupState(document.forms.groupForm.groups.value, false)" value="Hide groups" />

- -

+ + - + + \ No newline at end of file diff --git a/examples/images/applet.jpg b/examples/images/applet.jpg new file mode 100644 index 0000000..2b4eb7e Binary files /dev/null and b/examples/images/applet.jpg differ diff --git a/examples/images/com-arrow-3-small.png b/examples/images/com-arrow-3-small.png new file mode 100644 index 0000000..e11ea15 Binary files /dev/null and b/examples/images/com-arrow-3-small.png differ diff --git a/examples/images/desk.jpg b/examples/images/desk.jpg new file mode 100644 index 0000000..cf8daff Binary files /dev/null and b/examples/images/desk.jpg differ diff --git a/examples/images/dev-arrow-3-normal.png b/examples/images/dev-arrow-3-normal.png new file mode 100644 index 0000000..f1ec24e Binary files /dev/null and b/examples/images/dev-arrow-3-normal.png differ diff --git a/examples/images/jvlite-arrow-3-small.png b/examples/images/jvlite-arrow-3-small.png new file mode 100644 index 0000000..cde23b3 Binary files /dev/null and b/examples/images/jvlite-arrow-3-small.png differ diff --git a/examples/images/logo.jpg b/examples/images/logo.jpg new file mode 100644 index 0000000..06c7cdd Binary files /dev/null and b/examples/images/logo.jpg differ diff --git a/examples/images/normal-arrow-3-normal.png b/examples/images/normal-arrow-3-normal.png new file mode 100644 index 0000000..03c836d Binary files /dev/null and b/examples/images/normal-arrow-3-normal.png differ diff --git a/examples/images/train-arrow-3-normal.png b/examples/images/train-arrow-3-normal.png new file mode 100644 index 0000000..ea8ad5c Binary files /dev/null and b/examples/images/train-arrow-3-normal.png differ diff --git a/examples/jalviewLiteJs.html b/examples/jalviewLiteJs.html index 2580a69..d0691b6 100644 --- a/examples/jalviewLiteJs.html +++ b/examples/jalviewLiteJs.html @@ -1,4 +1,4 @@ - + - + - -JalviewLite API documentation - - - - - - + - - - -

- - - - -

- - - - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Discussion Mailing List

Please send problems
and - bug reports to the discussion list.

- JalviewLite Javascript API
+ + + + + + + + +

+ +

Home
About +
+ Documentation + Publications + Credits + Screenshots +
+
FAQ
Community +
+ News Mailing List + Discussion Mailing List + Links + Community News +
+
Development +
+ Release History + Jalview Bug Tracker + Jalview Git Web + Development News +
+
Training +
+ Training Courses + Training News +
+
Download

+ +

+ + +

+ +

The jalviewLite applet's application programming interface (API) includes two components. A JalviewLite Javascript Library and the public methods on the JalviewLite applet. +

The best way to learn how to use the API is to see it in action on the demonstration pages below:

Notes

Unfortunately Javascript - Java communication is not possible using Internet Explorer or Opera on Macs. Please use Safari or @@ -170,7 +179,7 @@ pageTracker._trackPageview();

JalviewLite's Java API

JalviewLite's Javascript API

The following public methods on the jalviewLite applet are available to be called from javascript:

//get list of IDs of selected sequences
 public String getSelectedSequences()
@@ -240,11 +249,11 @@ public void loadAnnotation(String annotation)
 public void loadAnnotationFrom(AlignFrame alf, String annotation)
 
 // parse the given string as a jalview or GFF features file and optionally enable feature display on the current alignment
-// (v2.7.1)
+// (v2.8)
 public abstract void loadFeatures(String features, boolean autoenabledisplay)
 
 // parse the given string as a jalview or GFF features file and optionally enable feature display on the given alignment
-// (v2.7.1)
+// (v2.8)
 public abstract void loadFeaturesFrom(AlignFrame alf, String features, boolean autoenabledisplay)
 
 // get the sequence features in the given format (Jalview or GFF)
@@ -400,9 +409,25 @@ public static String getVersion()
 // debug flag - controls output to standard out
 public static boolean debug
 
-

+ + +

+ + - + diff --git a/examples/javascriptLaunch.html b/examples/javascriptLaunch.html index 2a0e1c6..5b6d489 100644 --- a/examples/javascriptLaunch.html +++ b/examples/javascriptLaunch.html @@ -1,4 +1,4 @@ - + + + Opening JalviewLite from Javascript + + + + + + + + + + + + - + + + + + + + + +

+ +