Revision as of 08:44, 13 October 2014

Page Headline Project Overview

Two column layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.

Description of Image — Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Two column layout with one figure underneath

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.

Two column layout with two figures underneath

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.

Figure with image width set to 400px

Figure with image width set to 400px and centered

Figure set to 400px and centered

Figure with image width set to original resolution and centered

One figure two images

One figure two images, width both images max-width 400px

Parts Popup

Just add the partlink class to your link.

Tooltips

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero asperiores cum dignissimos porro, sed. Cumque harum quisquam nam, veritatis nulla.

List item with tooltip
List item with tooltip
List item with tooltip afterwards !

Figure Borders

Highlights

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!

Arrows

List of things and stuff e.g. Literature

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!
Aliquam impedit cupiditate et necessitatibus recusandae, qui nostrum accusantium aut.
Modi quia fugit quisquam placeat porro! Debitis esse numquam dolorum.
Quo aspernatur debitis adipisci reiciendis quidem maxime nesciunt, fugit nam?
Ad dolorem impedit quis aliquid iusto nisi earum odit explicabo!
Voluptatibus sapiente sunt alias nam, aspernatur dolorum libero, fugit nemo.
Nesciunt temporibus dicta iusto dignissimos illum facilis porro quidem nemo!
Enim illo, assumenda possimus. Commodi autem adipisci qui hic sunt.
Assumenda commodi soluta sit! Voluptas voluptatem possimus amet nemo molestiae.
Magni laborum voluptatem commodi, repellat quas ex omnis recusandae animi!

@@ Line 60: / Line 60: @@
 <script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
 <link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" />
+<script>
+$('.partlink').qtip({
+      content: {
+        text: function(event, api) {
+          $.ajax({
+            url: this.attr('href'), // Use data-url attribute for the URL
+          })
+          .then(function(content) {
+            // Set the tooltip content upon successful retrieval
+            // Append the parsed HTML of the retrieved page to a dummy <div/>, and find all <h1> elements
+            var elements = $("<div />").append( $.parseHTML(content) ).find('h1');
+            // Set the content of the tooltip to the selected element(s)
+            api.set('content.text', elements);
+          }, function(xhr, status, error) {
+            // Upon failure... set the tooltip content to the status and error value
+            api.set('content.text', status + ': ' + error);
+          });
+          return 'Loading...'; // Set some initial text
+        }
+      },
+      modal: true
+    });
+</script>
 </html>

Team:Freiburg/Templates/Projectpage

From 2014.igem.org