Team:UCSF/Safety

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<head>  
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<title>Sticky sidebar or box</title>  
-
<title>Untitled Document</title>  
+
<link type="text/css" rel="stylesheet" href="sidebar.css" media="screen" />  
-
<style type="text/css">
+
-
body {
+
-
border-top: 10px solid #7f0708;
+
-
margin: 0; padding: 0;
+
-
background: #f0f0f0 url(body_bg.jpg);
+
-
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
+
-
color: #444;
+
-
}
+
-
.container {width: 980px; margin: 0 auto; overflow: hidden; background: url(container_stretch.gif); font-size: 1.2em; position: relative;}
+
-
#sidenav {
+
-
width: 300px;
+
-
position: fixed;
+
-
float: left;
+
-
}
+
-
*html #sidenav {
+
-
position: absolute;
+
-
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+
-
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+
-
}
+
-
#sidenav h2 {
+
-
text-indent: -99999px;
+
-
height: 41px;
+
-
padding: 0; margin: 15px 0 5px;
+
-
background-position:  20px top;
+
-
}
+
-
h2.categories {background: url(h2_categories.gif) no-repeat ;}
+
-
h2.sites {background: url(h2_othersites.gif) no-repeat ;}
+
-
#sidenav ul {
+
-
margin: 0; padding: 0 20px 30px 20px;
+
-
list-style: none;
+
-
background: url(sidenav_hr.gif) no-repeat right bottom;
+
-
}
+
-
#sidenav ul li{
+
-
margin: 0; padding:  0;
+
-
display: inline;
+
-
}
+
-
#sidenav ul li a{
+
-
display: block;
+
-
margin: 0; padding:  5px 0 5px 15px;
+
-
background: url(sidenav_arrow.gif) no-repeat left center;
+
-
text-decoration: none;
+
-
color: #333;
+
-
}
+
-
#sidenav ul li a:hover {
+
-
color: #999;
+
-
}
+
-
+
-
+
-
+
-
#content {
+
-
float: right;
+
-
width: 640px;
+
-
padding: 0 20px 20px;
+
-
}
+
-
#content h1 {
+
-
background: url(h1_home.gif) no-repeat center top;
+
-
text-indent: -9999px;
+
-
height: 145px;
+
-
margin: 0 0 0 -20px; padding: 0;
+
-
}
+
-
#content h2 {
+
-
color: #7f0708;
+
-
margin: 10px 0;  padding: 10px 0;
+
-
font-size: 2em;
+
-
font-weight: normal;
+
-
}
+
-
#content p {
+
-
line-height: 1.8em;
+
-
padding: 7px 0;
+
-
margin: 7px 0;
+
-
}
+
-
</style>
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(document).ready(function() {
+
-
+
-
function staticNav() {
+
-
var sidenavHeight = $("#sidenav").height();
+
-
var winHeight = $(window).height();
+
-
var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
+
-
+
-
if (browserIE6) {
+
-
$("#sidenav").css({'position' : 'absolute'});
+
-
} else {
+
-
$("#sidenav").css({'position' : 'fixed'});
+
-
}
+
-
+
-
if (sidenavHeight > winHeight) {
+
-
$("#sidenav").css({'position' : 'static'});
+
-
}
+
-
}
+
-
+
-
staticNav();
+
-
+
-
$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
+
-
staticNav();
+
-
});
+
-
+
-
});
+
-
</script>  
+
</head>  
</head>  
-
 
<body>  
<body>  
-
+
<script type="text/javascript" src="sidebar.js"></script>  
-
<div class="container">
+
<script type="text/javascript" src="mootools.js"></script>  
-
<div id="sidenav">
+
<div id="content" class="sidebox">  
-
    <img src="logo.gif" alt="" />  
+
<p><strong>Hi!</strong> This is a demo page from <a href="http://www.marcofolio.net/" title="Marcofolio.net" target="_blank">Marcofolio.net</a>.</p>  
-
        <h2 class="categories">Categories</h2>  
+
<p>This demo belongs to <a href="http://www.marcofolio.net/webdesign/create_a_sticky_sidebar_or_box.html" title="Create a sticky sidebar or box" target="_blank">Create a sticky sidebar or box</a>.</p>  
-
        <ul>
+
<p><em>Try scrolling down on this page. You'll see this box moving down with you. It'll stay on the top-right corner of the page.</em></p>  
-
        <li><a href="#">Business/Freelance</a></li>
+
<p>This technique uses <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets" target="_blank">CSS</a> and <a href="http://en.wikipedia.org/wiki/JavaScript" title="JavaScript" target="_blank">JavaScript</a>. Works in IE7+, Firefox, Opera and Safari.</p>  
-
            <li><a href="#">Design Inspiration</a></li>
+
<p>Go to <a href="http://www.marcofolio.net/webdesign/create_a_sticky_sidebar_or_box.html" title="Create a sticky sidebar or box" target="_blank">the article</a> and download the source to implement it on your website.</p>  
-
            <li><a href="#">Design Resources</a></li>  
+
-
            <li><a href="#">Designer Interviews</a></li>
+
-
        </ul>
+
-
        <h2 class="sites">Other Sites</h2>  
+
-
        <ul>  
+
-
        <li><a href="#">Vandelay Design</a></li>
+
-
            <li><a href="#">CartFrenzy</a></li>
+
-
            <li><a href="#">Minimal Exhibit</a></li>
+
-
            <li><a href="#">Folio Focus</a></li>
+
-
            <li><a href="#">Blog Design Heroes</a></li>  
+
-
            <li><a href="#">TypeInspire</a></li>
+
-
        </ul>
+
-
    </div>
+
-
+
-
    <div id="content">
+
-
    <h1>Articles &amp; Resources for Web Designers</h1>
+
-
       
+
-
<h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />  
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>  
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>  
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>  
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />  
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>  
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />  
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>  
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>  
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />  
+
-
       
+
-
        <h2>Opto tego, distineo luptatum</h2>
+
-
        <p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
+
-
       
+
-
        <p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
+
-
       
+
-
        <img src="blogimg.gif" alt="Blog Image Goes Here" />
+
-
+
-
    </div>  
+
</div>  
</div>  
-
+
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
</body>  
</body>  
</html>
</html>

Revision as of 00:51, 31 August 2010

Sticky sidebar or box

Hi! This is a demo page from Marcofolio.net.

This demo belongs to Create a sticky sidebar or box.

Try scrolling down on this page. You'll see this box moving down with you. It'll stay on the top-right corner of the page.

This technique uses CSS and JavaScript. Works in IE7+, Firefox, Opera and Safari.

Go to the article and download the source to implement it on your website.





































































































Retrieved from "http://2010.igem.org/Team:UCSF/Safety"