Template:Uppsala-SwedenTemplatetest

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<HTML>
<HTML>
Line 5: Line 4:
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOver.js"></SCRIPT>
+
</HEAD>
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOverImage.js"></SCRIPT>
+
<BODY>
-
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../../RollOverMenu.js"></SCRIPT>
 
 +
<!-- *********************************************************
 +
    * You may use this code for free on any web page provided that
 +
    * these comment lines and the following credit remain in the code.
 +
    * Floating Div from http://www.javascript-fx.com
 +
    ********************************************************  -->
 +
<div id="divTopLeft"    style="position:absolute">
 +
<!-- Start - put your content here --->
 +
<b>Your Content Here</b>
 +
<!-- End  - put your content here --->
 +
</div>
<script type="text/javascript">
<script type="text/javascript">
 +
var ns = (navigator.appName.indexOf("Netscape") != -1);
 +
var d = document;
 +
function JSFX_FloatDiv(id, sx, sy)
 +
{
 +
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
 +
var px = document.layers ? "" : "px";
 +
window[id + "_obj"] = el;
 +
if(d.layers)el.style=el;
 +
el.cx = el.sx = sx;el.cy = el.sy = sy;
 +
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
-
/////////////////////////////////////////////////////////////////////
+
el.floatIt=function()
-
 
+
{
-
var FloatLayers      = new Array();
+
var pX, pY;
-
var FloatLayersByName = new Array();
+
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
-
 
+
document.documentElement && document.documentElement.clientWidth ?
-
function addFloatLayer(n,offX,offY,spd){new FloatLayer(n,offX,offY,spd);}
+
document.documentElement.clientWidth : document.body.clientWidth;
-
function getFloatLayer(n){return FloatLayersByName[n];}
+
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
-
function alignFloatLayers(){for(var i=0;i<FloatLayers.length;i++)FloatLayers[i].align();}
+
document.documentElement.scrollTop : document.body.scrollTop;
-
 
+
if(this.sy<0)  
-
function getXCoord(el) {
+
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
-
x=0;
+
document.documentElement.clientHeight : document.body.clientHeight;
-
while(el){
+
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
-
x+=el.offsetLeft;
+
this.sP(this.cx, this.cy);
-
el=el.offsetParent;
+
setTimeout(this.id + "_obj.floatIt()", 40);
}
}
-
return x;
+
return el;
}
}
-
function getYCoord(el) {
+
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
-
y=0;
+
-
while(el){
+
-
y+=el.offsetTop;
+
-
el=el.offsetParent;
+
-
}
+
-
return y;
+
-
}
+
-
 
+
-
/////////////////////////////////////////////////////////////////////
+
-
 
+
-
FloatLayer.prototype.setFloatToTop=setTopFloater;
+
-
FloatLayer.prototype.setFloatToBottom=setBottomFloater;
+
-
FloatLayer.prototype.setFloatToLeft=setLeftFloater;
+
-
FloatLayer.prototype.setFloatToRight=setRightFloater;
+
-
FloatLayer.prototype.initialize=defineFloater;
+
-
FloatLayer.prototype.adjust=adjustFloater;
+
-
FloatLayer.prototype.align=alignFloater;
+
-
 
+
-
function FloatLayer(n, offX, offY, spd) {
+
-
this.index=FloatLayers.length;
+
-
 
+
-
FloatLayers.push(this);
+
-
FloatLayersByName[n] = this;
+
-
 
+
-
this.name    = n;
+
-
this.floatX  = 0;
+
-
this.floatY  = 0;
+
-
this.tm      = null;
+
-
this.steps  = spd;
+
-
this.alignHorizontal=(offX>=0) ? leftFloater : rightFloater;
+
-
this.alignVertical  =(offY>=0) ? topFloater : bottomFloater;
+
-
this.ifloatX = Math.abs(offX);
+
-
this.ifloatY = Math.abs(offY);
+
-
}
+
-
 
+
-
/////////////////////////////////////////////////////////////////////
+
-
 
+
-
function defineFloater(){
+
-
this.layer  = document.getElementById(this.name);
+
-
this.width  = this.layer.offsetWidth;
+
-
this.height = this.layer.offsetHeight;
+
-
this.prevX  = this.layer.offsetLeft;
+
-
this.prevY  = this.layer.offsetTop;
+
-
}
+
-
 
+
-
function adjustFloater() {
+
-
this.tm=null;
+
-
if(this.layer.style.position!='absolute')return;
+
-
 
+
-
var dx = Math.abs(this.floatX-this.prevX);
+
-
var dy = Math.abs(this.floatY-this.prevY);
+
-
 
+
-
if (dx < this.steps/2)
+
-
cx = (dx>=1) ? 1 : 0;
+
-
else
+
-
cx = Math.round(dx/this.steps);
+
-
 
+
-
if (dy < this.steps/2)
+
-
cy = (dy>=1) ? 1 : 0;
+
-
else
+
-
cy = Math.round(dy/this.steps);
+
-
 
+
-
if (this.floatX > this.prevX)
+
-
this.prevX += cx;
+
-
else if (this.floatX < this.prevX)
+
-
this.prevX -= cx;
+
-
 
+
-
if (this.floatY > this.prevY)
+
-
this.prevY += cy;
+
-
else if (this.floatY < this.prevY)
+
-
this.prevY -= cy;
+
-
 
+
-
this.layer.style.left = this.prevX;
+
-
this.layer.style.top  = this.prevY;
+
-
 
+
-
if (cx!=0||cy!=0){
+
-
if(this.tm==null)this.tm=setTimeout('FloatLayers['+this.index+'].adjust()',50);
+
-
}else
+
-
alignFloatLayers();
+
-
}
+
-
 
+
-
function setLeftFloater(){this.alignHorizontal=leftFloater;}
+
-
function setRightFloater(){this.alignHorizontal=rightFloater;}
+
-
function setTopFloater(){this.alignVertical=topFloater;}
+
-
function setBottomFloater(){this.alignVertical=bottomFloater;}
+
-
 
+
-
function leftFloater(){this.floatX = document.body.scrollLeft + this.ifloatX;}
+
-
function topFloater(){this.floatY = document.body.scrollTop + this.ifloatY;}
+
-
function rightFloater(){this.floatX = document.body.scrollLeft + document.body.clientWidth - this.ifloatX - this.width;}
+
-
function bottomFloater(){this.floatY = document.body.scrollTop + document.body.clientHeight - this.ifloatY - this.height;}
+
-
 
+
-
function alignFloater(){
+
-
if(this.layer==null)this.initialize();
+
-
this.alignHorizontal();
+
-
this.alignVertical();
+
-
if(this.prevX!=this.floatX || this.prevY!=this.floatY){
+
-
if(this.tm==null)this.tm=setTimeout('FloatLayers['+this.index+'].adjust()',50);
+
-
}
+
-
}
+
-
 
+
-
 
+
</script>
</script>
-
 
+
<!-- ********************************************************* -->
-
<script language="javascript">
+
    
-
new FloatLayer('floatlayer',15,15,10);
+
-
function detach(){
+
-
lay=document.getElementById('floatlayer');
+
-
l=getXCoord(lay);
+
-
t=getYCoord(lay);
+
-
lay.style.position='absolute';
+
-
lay.style.top=t;
+
-
lay.style.left=l;
+
-
getFloatLayer('floatlayer').initialize();
+
-
alignFloatLayers();
+
-
}
+
-
</script>
+
-
 
+
-
</HEAD>
+
-
 
+
-
<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>
+
-
<TABLE WIDTH="90%" BORDER=0 CELLSPACING=0 CELLPADDING=0>
+
-
  <TR>
+
-
    <TD WIDTH=40><BR></TD>
+
-
    <TD HEIGHT=90>
+
-
 
+
-
    </TD>
+
-
  </TR>
+
-
  <TR>
+
-
    <TD WIDTH=40><BR></TD>
+
-
    <TD>
+
-
 
+
-
<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>
+
-
 
+
-
<p>
+
-
 
+
-
 
+
-
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.
+
-
 
+
-
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. 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.
+
-
 
+
-
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. 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.
+
-
 
+
-
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.
+
-
 
+
-
</p>
+
-
 
+
-
 
+
-
<HR NOSHADE WIDTH="100%">
+
-
<CENTER>
+
-
 
+
-
</CENTER>
+
-
<HR WIDTH=750 NOSHADE>
+
-
<TABLE border=0 width="100%">
+
-
   <TR><TD align=center>
+
-
 
+
-
 
+
-
</TD>
+
-
</TR>
+
-
</TABLE>
+
-
 
+
</BODY>
</BODY>
</HTML>
</HTML>

Revision as of 16:00, 6 July 2011

Your Content Here

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