Template:Uppsala-SwedenTemplatetest

From 2011.igem.org

(Difference between revisions)
 
(83 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Uppsala-SwedenTemplate}}
+
__NOTOC__<html lang="en">
 +
<head>
-
<HTML>
 
-
<HEAD>
 
 +
<!-- START Top enlarge function -->
 +
<style type="text/css">
-
<link rel="stylesheet" type="text/css" href="../../default.css">
+
ul.thumb {
 +
float: left;
 +
list-style: none;
 +
margin: 0; padding: 10px;
 +
width: 360px;
 +
}
 +
ul.thumb li {
 +
margin: 0; padding: 5px;
 +
float: left;
 +
position: relative;  /* Set the absolute positioning base coordinate */
 +
width: 110px;
 +
height: 110px;
 +
}
 +
ul.thumb li img {
 +
width: 100px; height: 100px; /* Set the small thumbnail size */
 +
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
 +
border: 1px solid #ddd;
 +
padding: 5px;
 +
background: #f0f0f0;
 +
position: absolute;
 +
left: 0; top: 0;
 +
}
 +
ul.thumb li img.hover {
 +
background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
 +
border: none; /* Get rid of border on hover */
 +
}
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOver.js"></SCRIPT>
 
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOverImage.js"></SCRIPT>
+
</style>
 +
 
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 
 +
//Larger thumbnail preview
 +
 
 +
$("ul.thumb li").hover(function() {
 +
$(this).css({'z-index' : '10'});
 +
$(this).find('img').addClass("hover").stop()
 +
.animate({
 +
marginTop: '-110px',
 +
marginLeft: '-110px',
 +
top: '50%',
 +
left: '50%',
 +
width: '500px',
 +
height: '500px',
 +
padding: '20px'
 +
}, 200);
 +
 +
} , function() {
 +
$(this).css({'z-index' : '0'});
 +
$(this).find('img').removeClass("hover").stop()
 +
.animate({
 +
marginTop: '0',
 +
marginLeft: '0',
 +
top: '0',
 +
left: '0',
 +
width: '100px',
 +
height: '100px',
 +
padding: '5px'
 +
}, 400);
 +
});
 +
 
 +
//Swap Image on Click
 +
$("ul.thumb li a").click(function() {
 +
 +
var mainImage = $(this).attr("href"); //Find Image Name
 +
$("#main_view img").attr({ src: mainImage });
 +
return false;
 +
});
 +
 +
});
 +
</script>
 +
 
 +
<!-- END Top enlarge function -->
 +
 
 +
 
 +
 
 +
 
 +
<!-- START Lower enlarge function -->  
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOverMenu.js"></SCRIPT>
 
<style type="text/css">
<style type="text/css">
-
#progmenu { position:absolute; top:0; left:0; visibility:hidden; }
+
 
-
#miscmenu { position:absolute; top:0; left:0; visibility:hidden; }
+
a.p1 {display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
-
.TitleMenu { width:110; }
+
a.p1 img {display:block; border:0;}
-
.TitleMenuItem { }
+
a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
 +
a.p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;
 +
 
 +
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
 +
 
 +
-o-border-radius: 8px;
 +
-icab-border-radius: 8px;
 +
-khtml-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
-webkit-border-radius: 8px;
 +
border-radius: 8px;
 +
 
 +
-webkit-transition: opacity 0.6s ease-in-out;
 +
 
 +
}
 +
 
 +
 
 +
a.p1:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;
 +
 
 +
}
 +
 
 +
#info {z-index:100; height:22em;}
 +
 
 +
#info {z-index:100; height:22em;}
 +
 
 +
 
 +
<!-- END Lower enlarge function -->
 +
 
 +
 
</style>
</style>
-
<script language="javascript" src="../../FloatLayer.js"></script>
 
-
<script language="javascript">
+
 
-
new FloatLayer('floatlayer',15,15,10);
+
 
-
function detach(){
+
 
-
lay=document.getElementById('floatlayer');
+
<!-- START OPACITY TEST -->
-
l=getXCoord(lay);
+
 
-
t=getYCoord(lay);
+
<style type="text/css">
-
lay.style.position='absolute';
+
 
-
lay.style.top=t;
+
 
-
lay.style.left=l;
+
a.opac img{
-
getFloatLayer('floatlayer').initialize();
+
opacity:.40;
-
alignFloatLayers();
+
filter:alpha(opacity=40);
 +
filter: “alpha(opacity=40)”;
}
}
-
</script>
 
-
</HEAD>
+
a.opac:hover img{
 +
opacity:1;
 +
filter:alpha(opacity=100);
 +
filter: “alpha(opacity=100)”;
 +
}
-
<BODY MARGINWIDTH=0 MARGINHEIGHT=0
 
-
onload="init()"
 
-
onresize="alignFloatLayers()"
 
-
onscroll="alignFloatLayers()">
 
-
<TABLE width="100%" border=0 CELLSPACING=0 CELLPADDING=0 BGCOLOR=DARKGREEN>
 
-
<TR><TD WIDTH="100%" ALIGN=RIGHT height=116><A
 
-
TARGET="_top" HREF="../../index.html"><IMG BORDER=0
 
-
SRC="../../images/fiendish_large.gif" HEIGHT=116 WIDTH=437></A></TD></TR>
 
-
<TR>
 
-
 
-
</TR>
 
-
</TABLE>
 
-
<P>
+
</style>
-
<TABLE WIDTH="90%" BORDER=0 CELLSPACING=0 CELLPADDING=0>
+
 
-
  <TR>
+
 
-
    <TD WIDTH=40><BR></TD>
+
 
-
    <TD HEIGHT=90>
+
<!-- END OPACITY TEST -->
 +
</head>
 +
 
 +
<body>
 +
 
 +
 
 +
 
 +
 
 +
<ul class="thumb">
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2011/c/c3/Erik.jpg" alt="" /></a></li>
 +
 
 +
</ul>
 +
 
 +
 
 +
 
 +
<div id="info">
 +
 
 +
<a class="p1" href="#v"><img src="https://static.igem.org/mediawiki/2011/c/c3/Erik.jpg" alt="" /><b><img class="large" src="https://static.igem.org/mediawiki/2011/7/73/Erik_L.jpg" alt="" /></b></a>
-
    </TD>
 
-
  </TR>
 
-
  <TR>
 
-
    <TD WIDTH=40><BR></TD>
 
-
    <TD>
 
-
<p>
 
-
 
-
</p><p>
 
-
 
-
</p>
 
-
<div id="floatlayer" style="width:50%;background:#d0d0ff;border:solid black 1px;padding:5px">
 
-
Here is a <tt>&lt;div&gt;</tt> that just contains some text. It can be floated
 
-
as you will see.
 
-
</div>
 
-
<p>
 
-
Now press the button to see what happens next.
 
-
<input type="button" value="Press Me" onclick="detach()"/>
 
-
</p>
 
-
 
-
 
</div>
</div>
-
<p>
 
-
Now press the button to see what happens next.
 
-
<input type="button" value="Press Me" onclick="detach()"/>
 
-
</p>
 
-
 
-
 
-
 
-
<p>
+
 
-
<div class="example">
+
 
-
<div>
+
 
</div>
</div>
-
</div>
 
-
</p>
 
-
<HR NOSHADE WIDTH="100%">
+
<a href="http://www.uu.se/" class="opac"><img src="https://static.igem.org/mediawiki/2011/7/7a/UUlogo.png" alt="css opac" /></a>
-
<CENTER>
+
-
</CENTER>
 
-
<HR WIDTH=750 NOSHADE>
 
-
<TABLE border=0 width="100%">
 
-
  <TR><TD align=center>
 
-
+
<style type="text/css">
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
 
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
 
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
+
.rollover Antonio {
 +
    background: url(https://static.igem.org/mediawiki/2011/6/67/Antonio-UU.jpg) no-repeat 0px 0px;
 +
    width: 204px;
 +
    height: 218px;
 +
    display: block;
 +
}
 +
.rollover Antonio:hover {
 +
    background-position: -204px;
 +
        }
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
+
.rollover Lidaw {
 +
    background: url(https://static.igem.org/mediawiki/2011/5/5d/Lidaw-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Lidaw:hover {
 +
    background-position: -200px;
 +
}
-
Let's look at an example.  
+
.rollover Lei {
-
+
    background: url(https://static.igem.org/mediawiki/2011/d/d3/Lei-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Lei:hover {
 +
    background-position: -200px;
 +
}
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
+
.rollover Tomas {
 +
    background: url(https://static.igem.org/mediawiki/2011/7/76/Tomas-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Tomas:hover {
 +
    background-position: -200px;
 +
}
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
+
.rollover Erik {
 +
    background: url(https://static.igem.org/mediawiki/2011/a/ac/Erik-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Erik:hover {
 +
    background-position: -200px;
 +
}
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
 
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
+
.rollover Amin {
 +
    background: url(https://static.igem.org/mediawiki/2011/f/f9/Amin-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Amin:hover {
 +
    background-position: -200px;
 +
}
-
Let's look at an example.
 
-
 
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
+
.rollover Sibel {
 +
    background: url(https://static.igem.org/mediawiki/2011/c/c0/Sibel-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Sibel:hover {
 +
    background-position: -200px;
 +
}
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
+
.rollover Cherno {
 +
    background: url(https://static.igem.org/mediawiki/2011/d/df/Cherno-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Cherno:hover {
 +
    background-position: -200px;
 +
}
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
 
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
+
.rollover Johanna {
 +
    background: url(https://static.igem.org/mediawiki/2011/2/28/Johanna-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Johanna:hover {
 +
    background-position: -200px;
 +
}
-
Let's look at an example.  
+
.rollover Mohammed {
-
+
    background: url(https://static.igem.org/mediawiki/2011/5/5c/Mohammed-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Mohammed:hover {
 +
    background-position: -200px;
 +
}
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
 
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
 
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
+
.rollover Laura {
 +
    background: url(https://static.igem.org/mediawiki/2011/7/70/Laura-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Laura:hover {
 +
    background-position: -200px;
 +
}
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
 
-
Let's look at an example.  
+
.rollover Hamid {
-
+
    background: url(https://static.igem.org/mediawiki/2011/0/0b/Hamid-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Hamid:hover {
 +
    background-position: -200px;
 +
}
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
+
.rollover Pikkei {
 +
    background: url(https://static.igem.org/mediawiki/2011/5/5b/Pikkei-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Pikkei:hover {
 +
    background-position: -200px;
 +
}
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
 
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
+
.rollover Karl {
 +
    background: url(https://static.igem.org/mediawiki/2011/7/74/Karl-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Karl:hover {
 +
    background-position: -200px;
 +
}
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
 
-
Let's look at an example.  
+
.rollover Phani {
-
+
    background: url(https://static.igem.org/mediawiki/2011/7/7b/Phani-UU.jpg) no-repeat 0px 0px;
 +
    width: 192px;
 +
    height: 201px;
 +
    display: block;
 +
}
 +
.rollover Phani:hover {
 +
    background-position: -192px;
 +
}
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
+
.rollover Eugenia {
 +
    background: url(https://static.igem.org/mediawiki/2011/b/ba/Eugenia-UU.jpg) no-repeat 0px 0px;
 +
    width: 200px;
 +
    height: 200px;
 +
    display: block;
 +
}
 +
.rollover Eugenia:hover {
 +
    background-position: -200px;
 +
}
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
+
}
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
+
</style>
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
+
<div align="right" class="rollover"><Antonio href="#"></a></div>
-
Let's look at an example.
+
<div align="right" class="rollover"><Lidaw href="#"></a></div>
-
+
 
 +
<div align="right" class="rollover"><Lei href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Tomas href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Erik href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Amin href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Sibel href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Cherno href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Johanna href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Mohammed href="#"></a></div>
 +
 
 +
<div align="right" class="rollover"><Laura href="#"></a></div>
-
Interesting effects and functionality can be achieved on Web pages by the use of floating content, or layers. By floating I mean content that moves about the page, and that does not appear in a fixed location with respect to the page layout. The content may move to follow window scrolling such that it is always visible in the window for example.
+
<div align="right" class="rollover"><Hamid href="#"></a></div>
-
Imagine how handy this type of functionality could be when displaying a large number of rows in a table when a series of buttons need to be provided for actioning the selection of some rows. Without a scroll sensitive floating button-bar, the table would either require button duplication in amongst the rows, duplication of the buttons at the top and bottom, or a bunch of frames to allow the user to easily select some rows and action them. With the floating controls, the user could scroll away, selecting rows as required, then simply action them using constantly in-view buttons.
+
<div align="right" class="rollover"><Pikkei href="#"></a></div>
-
Calling this floating content a layer, although semantically and conceptually convenient, is not quite right. Layers as such do not exist in Web pages. Netscape used to have a <layer> tag that provided much of the same functionality, but today this does not exist. Instead, floating content is achieved with the use of position controlled <div>s. However, we shall still refer to the floating content as a layer for the sake of convenience.
+
<div align="right" class="rollover"><Karl href="#"></a></div>
-
With the advent of Cascading Style Sheets (CSS) and the integration of the Document Object Model (DOM) into JavaScript, the positioning and control of <div>s has become an everyday task.
+
<div align="right" class="rollover"><Phani href="#"></a></div>
-
Let's look at an example.
+
<div align="right" class="rollover"><Eugenia href="#"></a></div>
-
</TD>
+
-
</TR>
+
-
</TABLE>
+
-
</BODY>
+
</body>
-
</HTML>
+
</html>

Latest revision as of 15:24, 8 September 2011

css opac

Retrieved from "http://2011.igem.org/Template:Uppsala-SwedenTemplatetest"