User:Saint/Sandbox

From 2008.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
{{Imperial/NoTitle}}{{Imperial/StartPage2}}
+
<html><script type="text/javascript" src="switchcontent.js" >
-
<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
 +
***********************************************/
-
//Below is the code that pre-loads the graphics
+
</script>
-
{
+
-
//These are the large images
+
<style type="text/css">
-
alt0 = new Image();
+
-
alt0.src = "http://i59.photobucket.com/albums/g305/Timpski/S0.png" ;
+
-
alt1 = new Image();
+
/*Style sheet used for demo. Remove if desired*/
-
alt1.src = "http://i59.photobucket.com/albums/g305/Timpski/D1.png";
+
.handcursor{
 +
cursor:hand;
 +
cursor:pointer;
 +
}
-
alt2 = new Image();
+
</style></html>
-
alt2.src = "http://i59.photobucket.com/albums/g305/Timpski/D2.png";
+
<html><h2>Demo 1</h2>
-
alt3 = new Image();
+
<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>
-
alt3.src = "http://i59.photobucket.com/albums/g305/Timpski/S1.png";
+
-
//These are the first button graphics
+
<h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
 +
<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>
-
graphic1= new Image();
+
<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
-
graphic1.src = "http://i59.photobucket.com/albums/g305/Timpski/PD.png";
+
<div id="bobcontent2" class="switchgroup1">
-
graphic1on = new Image();
+
Java is completely different from JavaScript.
-
graphic1on.src = "http://i59.photobucket.com/albums/g305/Timpski/PL.png";
+
The former is a compiled language while the later is a scripting language.
 +
</div>
-
//These are the second button graphics
+
<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
 +
<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
 
-
graphic3= new Image();
+
<script type="text/javascript">
-
graphic3.src = "http://i59.photobucket.com/albums/g305/Timpski/GD.png";
+
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
-
graphic3on = new Image();
+
// Call Instance.init() at the very end. REQUIRED
-
graphic3on.src = "http://i59.photobucket.com/albums/g305/Timpski/GL.png";
+
-
//These are the fourth button graphics
+
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
 +
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";
 
-
//This is the function that calls for
+
<h2>Demo 2</h2>
-
//the change in the buttons
+
-
}
+
<h3 id="joecontent1-title" class="handcursor">What is JavaScript?</h3>
-
function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) {
+
<p id="joecontent1" class="switchgroup2">
-
 
+
</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>
+
-
<html>| <A HREF="https://2008.igem.org/Team:Imperial_College/Device1"
+
<h3 id="joecontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
-
onMouseOver="imageChange('global','alt1')"
+
<p id="joecontent2" class="switchgroup2">
-
onMouseOut="imageChange('global','alt0')">Device 1: Promoter/RBS</A> |
+
</p>
-
<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...
 
-
<img width=100% src=http://i59.photobucket.com/albums/g305/Timpski/S1L.png>
+
<script type="text/javascript">
-
<hr></html>
+
var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
-
{{Imperial/EndPage}}
+
joeexample.setStatus('[open] ', '[closed] ')
 +
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:47, 21 October 2008

Demo 1

Contract All | Expand All

What is JavaScript?

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.

Difference betwen Java & JavaScript?

Java is completely different from JavaScript. The former is a compiled language while the later is a scripting language.

What is DHTML?

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.

Demo 2

What is JavaScript?

Difference betwen Java & JavaScript?

What is DHTML?

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.

Retrieved from "http://2008.igem.org/User:Saint/Sandbox"