User:Saint/Sandbox

From 2008.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
<html><script type="text/javascript" src="switchcontent.js" >
+
{{Imperial/NoTitle}}{{Imperial/StartPage2}}
-
/***********************************************
+
<html><SCRIPT LANGUAGE="JavaScript">
-
* Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)
+
-
* This notice must stay intact for legal use.
+
-
* Visit http://www.dynamicdrive.com/ for full source code
+
-
***********************************************/
+
-
</script>
+
//Below is the code that pre-loads the graphics
 +
{
-
<style type="text/css">
+
//These are the large images
 +
alt0 = new Image();
 +
alt0.src = "http://i59.photobucket.com/albums/g305/Timpski/S0.png" ;
-
/*Style sheet used for demo. Remove if desired*/
+
alt1 = new Image();
-
.handcursor{
+
alt1.src = "http://i59.photobucket.com/albums/g305/Timpski/D1.png";
-
cursor:hand;
+
-
cursor:pointer;
+
-
}
+
-
</style></html>
+
alt2 = new Image();
-
<html><h2>Demo 1</h2>
+
alt2.src = "http://i59.photobucket.com/albums/g305/Timpski/D2.png";
-
<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>
+
alt3 = new Image();
 +
alt3.src = "http://i59.photobucket.com/albums/g305/Timpski/S1.png";
-
<h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
+
//These are the first button graphics
-
<div id="bobcontent1" class="switchgroup1">
+
-
JavaScript is a scripting language originally developed by Netscape to add interactivity
+
-
and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
+
-
</div>
+
-
<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
+
graphic1= new Image();
-
<div id="bobcontent2" class="switchgroup1">
+
graphic1.src = "http://i59.photobucket.com/albums/g305/Timpski/PD.png";
-
Java is completely different from JavaScript.
+
graphic1on = new Image();
-
The former is a compiled language while the later is a scripting language.
+
graphic1on.src = "http://i59.photobucket.com/albums/g305/Timpski/PL.png";
-
</div>
+
-
<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
+
//These are the second button graphics
-
<div id="bobcontent3" class="switchgroup1">
+
-
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML.
+
-
Through them a new level of interactivity is possible for the end user experience.
+
-
</div>
+
 +
graphic2= new Image();
 +
graphic2.src = "http://i59.photobucket.com/albums/g305/Timpski/RD.png";
 +
graphic2on = new Image();
 +
graphic2on.src = "http://i59.photobucket.com/albums/g305/Timpski/RL.png";
 +
//These are the third button graphics
-
<script type="text/javascript">
+
graphic3= new Image();
-
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
+
graphic3.src = "http://i59.photobucket.com/albums/g305/Timpski/GD.png";
-
// Call Instance.init() at the very end. REQUIRED
+
graphic3on = new Image();
 +
graphic3on.src = "http://i59.photobucket.com/albums/g305/Timpski/GL.png";
-
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
+
//These are the fourth button graphics
-
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
+
-
bobexample.setColor('darkred', 'black')
+
-
bobexample.setPersist(true)
+
-
bobexample.collapsePrevious(true) //Only one content open at any given time
+
-
bobexample.init()
+
-
</script>
+
 +
graphic4= new Image();
 +
graphic4.src = "http://i59.photobucket.com/albums/g305/Timpski/TD.png";
 +
graphic4on = new Image();
 +
graphic4on.src = "http://i59.photobucket.com/albums/g305/Timpski/TL.png";
-
<h2>Demo 2</h2>
+
//This is the function that calls for
 +
//the change in the buttons
-
<h3 id="joecontent1-title" class="handcursor">What is JavaScript?</h3>
+
}
-
<p id="joecontent1" class="switchgroup2">
+
function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) {
-
</p>
+
 
 +
{
 +
document.images[imageID].src = eval(imageName + ".src");
 +
document.images[imageID2].src = eval(imageName2 + ".src");
 +
document.images[imageID3].src = eval(imageName3 + ".src");
 +
document.images[imageID4].src = eval(imageName4 + ".src");
 +
}
 +
 
 +
}
 +
 
 +
</SCRIPT> </html>
 +
 
 +
Hi! Welcome to Imperial College's Biobricks and Characterisation hub. Below is the final construct we produced. If you want to know more about our system or the devices of which it is made, please click the links below to see characterisation information. More information about biobricks can be found by selecting them in the construct below (just put your mouse over a part!) and if you click them you'll be taken to their respective pages.
 +
 
 +
<html><TABLE border="0" style="background-color:transparent;" width="100%">
 +
<TR><TD align="left">
 +
<div id="top" style="position: absolute">
 +
<A HREF="https://2008.igem.org/Team:Imperial_College/Part1"
 +
onMouseOver="imageChange('one','graphic1on')"
 +
onMouseOut="imageChange('one','graphic1')"
 +
target="_blank">
 +
<IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/PD.png" NAME="one"></A>
 +
<A HREF="https://2008.igem.org/Team:Imperial_College/Part2"
 +
onMouseOver="imageChange('two','graphic2on')"
 +
onMouseOut="imageChange('two','graphic2')"
 +
target="_blank">
 +
<IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/RD.png" NAME="two"></A>
 +
<A HREF="https://2008.igem.org/Team:Imperial_College/Part3"
 +
onMouseOver="imageChange('three','graphic3on')"
 +
onMouseOut="imageChange('three','graphic3')"
 +
target="_blank">
 +
<IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/GD.png" NAME="three"></A>
 +
<A HREF="https://2008.igem.org/Team:Imperial_College/Part4"
 +
onMouseOver="imageChange('four','graphic4on')"
 +
onMouseOut="imageChange('four','graphic4')"
 +
target="_blank">
 +
<IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/TD.png" NAME="four"></A>
 +
</div>
 +
<IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/S0.png" NAME="global">
 +
</TD></TR>
 +
</TABLE></html>
-
<h3 id="joecontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
+
<html>| <A HREF="https://2008.igem.org/Team:Imperial_College/Device1"
-
<p id="joecontent2" class="switchgroup2">
+
onMouseOver="imageChange('global','alt1')"
-
</p>
+
onMouseOut="imageChange('global','alt0')">Device 1: Promoter/RBS</A> |
 +
<A HREF="https://2008.igem.org/Team:Imperial_College/Device2"
 +
onMouseOver="imageChange('global','alt2')"
 +
onMouseOut="imageChange('global','alt0')">Device 2: epsE/Terminator</A> |
 +
<br><br>| <A HREF="https://2008.igem.org/Team:Imperial_College/System1"
 +
onMouseOver="imageChange('global','alt3')"
 +
onMouseOut="imageChange('global','alt0')">System 1: Clutch Mechanism</A> |</html>
-
<h3 id="joecontent3-title" class="handcursor">What is DHTML?</h3>
 
-
<p id="joecontent3" class="switchgroup2">
 
-
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
 
-
</p>
 
 +
<html><hr>
 +
NOTE: Eventually we'll hopefully have this sort of thing set up for our full construct, as below...
-
<script type="text/javascript">
+
<img width=100% src=http://i59.photobucket.com/albums/g305/Timpski/S1L.png>
-
var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
+
<hr></html>
-
joeexample.setStatus('[open] ', '[closed] ')
+
{{Imperial/EndPage}}
-
joeexample.setColor('green', 'red')
+
-
joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously
+
-
joeexample.setPersist(false)
+
-
joeexample.defaultExpanded(0,1)
+
-
joeexample.setContent(0, 'whatisjavascript.htm') //specify remote content for 1st header's content
+
-
joeexample.setContent(1, 'whatisjava.htm')  //specify remote content for 2nd header's content
+
-
joeexample.init()
+
-
</script></html>
+

Revision as of 14:48, 21 October 2008


Hi! Welcome to Imperial College's Biobricks and Characterisation hub. Below is the final construct we produced. If you want to know more about our system or the devices of which it is made, please click the links below to see characterisation information. More information about biobricks can be found by selecting them in the construct below (just put your mouse over a part!) and if you click them you'll be taken to their respective pages.

| Device 1: Promoter/RBS | Device 2: epsE/Terminator |

| System 1: Clutch Mechanism |


NOTE: Eventually we'll hopefully have this sort of thing set up for our full construct, as below...


    [[Team:Imperial_College/{{{1}}}|< Previous]]
    [[Team:Imperial_College/{{{2}}}|Next >]]
Retrieved from "http://2008.igem.org/User:Saint/Sandbox"