User:Lucas.schirmer

From 2009.igem.org

(Difference between revisions)

Latest revision as of 23:42, 18 June 2010

Menu Idea

more ideas

our twitter box

AddThis

| More

count down - without flash ^^

okay a few coverflow ideas http://folio.vndv.com/jcoverflow/ http://www.classycode.co.uk/CoverFlow/rwmCoverFlow%20-%20demo.htm http://finnrudolph.de/ImageFlow/Examples#Default

@@ Line 1: / Line 1: @@
 <html>
 <head>
-<style type="text/css">
-.wrapper{
-	margin:0;
-	padding:0;
-	font-size:13px;
-	font-family:verdana, Arial, Helvetica, sans-serif;
-	color:#333333;
-	background-color:#FFFFFF;
-	}
+<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jquery.min.js"></script>
+<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/cloud-carousel.js"></script>
+<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/js/slimbox2.js"></script>
+<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.js"></script>
-.clear{clear: both;}
+<link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/css/slimbox2.css" rel="stylesheet">
-br.clear{clear:both; margin-top:-15px;}
+<link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.css" rel="stylesheet">
-a{
-	color:#B2C629;
-	background-color:#FFFFFF;
-	outline:none;
-	text-decoration:none;
-	}
-#topnav li {
+<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=siDS6nUKbSBnppf0uONMA&v=1"></script>
-float:left;
+<script type="text/javascript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jtwett/jtweetsanywhere.min.js"></script>
-list-style:none outside none;
+<link rel="stylesheet" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/jtwett/jtweetsanywhere.css" />
-margin:0;
-padding:0;
-}
-div.header{
-text-align:left;
-}
-.col1{
-color:#CCCCCC;
-background-color:#000000;
-}
-</style>
-<style type="text/css">
-/**
- *********************************************
- * Prototype of styles for horizontal CSS-menu
- * @data 30.06.2009
- *********************************************
- * (X)HTML-scheme:
- *  <div id="menu">
- *      <ul class="menu">
- *          <li><a href="#" class="parent"><span>level 1</span></a>
- *              <div><ul>
- *                  <li><a href="#" class="parent"><span>level 2</span></a>
- *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
- *                  </li>
- *              </ul></div>
- *          </li>
- *          <li class="last"><a href="#"><span>level 1</span></a></li>
- *      </ul>
- *  </div>
- *********************************************
- */
-/* menu::base */
+<script src="http://endo.bio.tu-dresden.de/igem/scripthost/countdown/kk_countdown.min.js" type="text/javascript"></script>
-div#menu {
+<link rel="stylesheet" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/countdown/rrclock.css" />
-    height:55px;
-    background:url(images/nav-bg.png) repeat-x;
-    _background:url(images/nav-bg.gif) repeat-x;
-}
-div#menu ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    float: left;
-}
-div#menu ul.menu {
-    padding-left: 30px;
-}
-div#menu li {
+<script  type="text/JavaScript">
-    position: relative;
+$(document).ready(function(){
-    z-index: 9;
+	// This initialises carousels on the container elements specified, in this case, carousel1.
-    margin: 0;
+	$("#carousel1").CloudCarousel(
-    padding: 0;
+		{
-    display: block;
+			xPos: 400,
-    float: left;
+			xRadius:300,
-}
+			yPos: 120,
+			buttonLeft: $("#left-but"),
-div#menu li:hover>ul {
+			buttonRight: $("#right-but"),
-    left: -2px;
+			altBox: $("#alt-text"),
-}
+			titleBox: $("#title-text")
+		}
+	);
+});
-div#menu li div {
+$(document).ready(function(){
-    list-style: none;
+     $('#tweetsFeed').jTweetsAnywhere({
-    float: left;
+        username: 'igem_biotec',
-    position: absolute;
+        count: 10,
-    top: 50px;
+        showFollowButton: true
-    left: 0;
-    width: 208px;
-    z-index: 11;
-    visibility: hidden;
-    padding: 0 0 9px 7px;
-    _padding: 0 0 9px 3px;
-    background: url(images/submenu-bottom.png) no-repeat 7px bottom;
-     _background-image: url(images/submenu-bottom.gif);
-    margin: 0 0 0 -9px;
-}
-div#menu li:hover>div {
-    visibility: visible;
-}
-div#menu li.current a {}
+    });
+});
+</script>
+</head>
+    <body>
+    	<!-- This is the container for the carousel. -->
+         <div id = "carousel1" style="width:800px; height:500px;background:#000;overflow:scroll;">
+			<!-- Define left and right buttons. -->
+        <input id="left-but"  type="button" value="Left" />
+        <input id="right-but" type="button" value="Right" />
+		<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
+            <!-- You can place links around these images -->
+				<a href="https://static.igem.org/mediawiki/igem.org/8/8e/BiotecDresden_Circle_Adi.jpg" rel="lightbox" title="Image of Adi"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/8/8e/BiotecDresden_Circle_Adi.jpg/300px-BiotecDresden_Circle_Adi.jpg" alt="Image of Adi" title="Image of Adi" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/b/bf/BiotecDresden_Circle_Svea.jpg" rel="lightbox" title="Image of Svea"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/b/bf/BiotecDresden_Circle_Svea.jpg/300px-BiotecDresden_Circle_Svea.jpg" alt="Image of Svea" title="Image of Svea" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/5/54/BiotecDresden_Circle_Sarah.jpg" rel="lightbox" title="Image ofSarah"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/54/BiotecDresden_Circle_Sarah.jpg/300px-BiotecDresden_Circle_Sarah.jpg" alt="Image of Sarah" title="Image of Sarah" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/a/a4/BiotecDresden_Circle_Mareike.jpg" rel="lightbox" title="Image of Mareike"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/BiotecDresden_Circle_Mareike.jpg/300px-BiotecDresden_Circle_Mareike.jpg" alt="Image of Mareike" title="Image of Mareike" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/f/f0/BiotecDresden_Circle_Habib.jpg" rel="lightbox" title="Image of Habib"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/f/f0/BiotecDresden_Circle_Habib.jpg/300px-BiotecDresden_Circle_Habib.jpg" alt="Image of Habib" title="Image of Habib" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/0/07/BiotecDresden_Circle_Jon.jpg" rel="lightbox" title="Image of Jon"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/0/07/BiotecDresden_Circle_Jon.jpg/300px-BiotecDresden_Circle_Jon.jpg" alt="Image of Jon" title="Image of Jon" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/e/e8/BiotecDresden_Circle_Charanya.jpg" rel="lightbox" title="Image of Charanya"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/e/e8/BiotecDresden_Circle_Charanya.jpg/300px-BiotecDresden_Circle_Charanya.jpg" alt="Image of Charanya" title="Image o Charanya" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/5/51/BiotecDresden_Circle_Rahul.jpg" rel="lightbox" title="Image of Rahul"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/51/BiotecDresden_Circle_Rahul.jpg/300px-BiotecDresden_Circle_Rahul.jpg" alt="Image of Rahul" title="Image of Rahul" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/3/35/BiotecDresden_Circle_Viktor.jpg" rel="lightbox" title="Image of Viktor"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/3/35/BiotecDresden_Circle_Viktor.jpg/300px-BiotecDresden_Circle_Viktor.jpg" alt="Image of Victor" title="Image of Victor" /></a>
+				<a href="https://static.igem.org/mediawiki/igem.org/2/27/BiotecDresden_Circle_Lucas.jpg" rel="lightbox" title="Image of Lucas"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/2/27/BiotecDresden_Circle_Lucas.jpg/300px-BiotecDresden_Circle_Lucas.jpg" alt="Image of Lucas" title="Image of Lucas" /></a>
+			</div>
+        <!-- Define elements to accept the alt and title text from the images. -->
+        <p id="title-text"></p>
+        <p id="alt-text"></p>
+		<h2>Menu Idea</h2>
+		<a href="http://apycom.com/menus/1-dim-gray.html">more ideas</a>
+		<div id="menu">
+    <ul class="menu">
+        <li><a href="#" class="parent"><span>Home</span></a>
+            <div><ul>
+                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
+                    <div><ul>
+                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
+                            <div><ul>
+                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
+                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
+                            </ul></div>
+                        </li>
+                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
+                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
+                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
+                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
+                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
+                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
+                            <div><ul>
+                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
+                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
+                            </ul></div>
+                        </li>
+                    </ul></div>
+                </li>
+                <li><a href="#"><span>Sub Item 2</span></a></li>
+                <li><a href="#"><span>Sub Item 3</span></a></li>
+            </ul></div>
+        </li>
+        <li><a href="#"><span>Product Info</span></a>
+            <div><ul>
+                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
+                    <div><ul>
+                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
+                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
+                    </ul></div>
+                </li>
+                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
+                    <div><ul>
+                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
+                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
+                    </ul></div>
+                </li>
+                <li><a href="#"><span>Sub Item 3</span></a></li>
+                <li><a href="#"><span>Sub Item 4</span></a></li>
+                <li><a href="#"><span>Sub Item 5</span></a></li>
+                <li><a href="#"><span>Sub Item 6</span></a></li>
+                <li><a href="#"><span>Sub Item 7</span></a></li>
+            </ul></div>
+        </li>
+        <li><a href="#"><span>Help</span></a></li>
+        <li class="last"><a href="#"><span>Contacts</span></a></li>
+    </ul>
+</div>
-/* menu::level1 */
+<h2>our twitter box</h2>
-div#menu a {
+ <div id="tweetsFeed"></div>
-    position: relative;
-    z-index: 10;
-    height: 55px;
-    display: block;
-    float: left;
-    padding: 0 10px 0 10px;
-    line-height: 55px;
-    text-decoration: none;
-}
-div#menu span {
-    font: normal 12px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
-    padding-top: 18px;
-    color: #dbff92;
-    font-weight:bold;
-    text-transform:uppercase;
-    display: block;
-    cursor: pointer;
-    background-repeat: no-repeat;
-}
-div#menu ul a:hover span {
-    color: #455821;
-}
-div#menu li { background: url(images/nav_separator.png) top left no-repeat; }
+<h2>AddThis</h2>
-div#menu li.last span{
+<!-- AddThis Button BEGIN -->
-    background: url(images/nav_separator.png) top right no-repeat;
+<div class="addthis_toolbox addthis_default_style">
-    padding: 18px 10px 16px 0;
+<a class="addthis_button_favorites"></a>
-}
+<a class="addthis_button_email"></a>
+<a class="addthis_button_print"></a>
+<span class="addthis_separator">|</span>
+<a class="addthis_button_facebook"></a>
+<a class="addthis_button_twitter"></a>
+<a class="addthis_button_stumbleupon"></a>
+<span class="addthis_separator"> </span>
+<a class="addthis_button_facebook_like"></a>
-/* menu::level2 */
+<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=igembiotec" class="addthis_button_expanded">More</a>
-div#menu ul ul li {
+</div>
-    background: url(images/nav_dropdown_sep.gif) left bottom repeat-x;
+<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=igembiotec"></script>
-    padding: 4px 0;
+<!-- AddThis Button END -->
-    z-index: 9;
+<h2>count down - without flash ^^</h2>
-}
+        <script type="text/javascript">
-div#menu ul ul {
+            $(document).ready(function(){
-    z-index: 12;
+                $("body").kkCountDown();
-    padding: 0;
+            });
-    background: rgb(102,136,35) url(images/nav_dropdown_grad.png) right top no-repeat;
+        </script>
-    margin-top:0px;
-    margin-left:4px;
-    margin-right:5px;
-}
-div#menu ul ul a {
-  	width: 184px;
-	  padding: 0px 7px 3px 8px;
-    height: auto;
-    float: none;
-    display: block;
-    background:none;
-    margin-bottom: 2px;
-    z-index: -1;
-}
-div#menu ul ul a span {
-	  padding: 0 10px 0px 10px;
-    line-height: 20px;
-    color: #364619;
-    font-weight:normal;
-    text-transform: none;
-    background:none;
-}
-div#menu ul ul a:hover {
-    background: url(images/submenu-selected-bottom.gif) no-repeat 8px bottom;
-}
-div#menu ul ul a:hover span {
-    background: url(images/submenu-selected-top.gif) no-repeat 0px 0px;
-    color: #fff;
-}
-div#menu ul ul li.last { background: none; }
+        <div id="content">
-div#menu ul ul li {
+            <div id="count-box">
-    width: 100%;
+                <span time="1288915200" class="kkcount-down"></span>
-}
+            </div>
+        </div>
-/* menu::level3 */
+  okay a few coverflow ideas
-div#menu ul ul div {
-    width: 208px;
-    margin: -50px 0 0 190px !important;
-    height: auto;
-    _padding: 0 0 9px 3px;
-}
-div#menu ul ul ul {
-	_padding-right:1px;
-}
-/* lava lamp */
+http://folio.vndv.com/jcoverflow/
-div#menu li.back {
+http://www.classycode.co.uk/CoverFlow/rwmCoverFlow%20-%20demo.htm
-}
+http://finnrudolph.de/ImageFlow/Examples#Default
-div#menu li.back .left {
-}
-</style>
-<script language="javascript" src="http://apycom.com/ssc-data/themes/default/scripts/jquery.js"></script>
-<script language="javascript" src="http://apycom.com/ssc-data/themes/default/scripts/menu.js"></script>
-</head>
-<!-- ############################# BODY!!!!! #################################### -->
+    </body>
-<body>
+</html>
-<div class="wrapper col1">
-  <div id="header">
-    <div id="logo">
-      <h1><a href="#">+Business</a></h1>
-      <p>Free Open Source CSS Website Template</p>
-    </div>
-    <div id="topnav">
-      <ul>
-        <li class="active"><a href="index.html">Home</a></li>
-        <li><a href="style-demo.html">Style Demo</a></li>
-        <li><a href="full-width.html">Full Width</a></li>
-        <li><a href="#">DropDown</a>
-          <ul>
-            <li><a href="#">Link 1</a></li>
-            <li><a href="#">Link 2</a></li>
-            <li><a href="#">Link 3</a></li>
-          </ul>
-        </li>
-        <li class="last"><a href="#">A Long Link Text</a></li>
-      </ul>
-    </div>
-    <br class="clear" />
-  </div>
-</div>
-</body></html>