Team:UT Dallas/test/

From 2012.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 8: Line 8:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="https://2012.igem.org/Team:UT_Dallas/slider.js?action=raw&ctype=text/javascript"></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&purtryjryjytu=eryw" rel="stylesheet">
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&purtryjryjytu=eryw" rel="stylesheet">
-
<link href="https://2012.igem.org/Team:UT_Dallas/slider_style.css?action=raw&ctype=text/css" rel="stylesheet">
+
<link href="https://2012.igem.org/Team:UT_Dallas/slider_style.css?action=raw&ctype=text/css&truytr=trutu" rel="stylesheet">
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 22: Line 23:
<div id="slide-1" class="slide">
<div id="slide-1" class="slide">
-
<h1>Garden Rack</h1>
+
<h1>Project 1</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
-
<a href="#"><img src="images/slide-1-image.png" alt="learn more"></a>
+
<a href="#"><img src="https://static.igem.org/mediawiki/2012/2/22/Slide-1-image.png" alt="learn more"></a>
</div>
</div>
Line 32: Line 33:
<div class="slide">
<div class="slide">
-
<h1>Tulip Bulbs</h1>
+
<h1>Project 2</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
-
<a href="#"><img src="images/slide-2-image.png" alt="learn more"></a>
+
<a href="#"><img src="https://static.igem.org/mediawiki/2012/c/c9/Slide-2-image.png" alt="learn more"></a>
</div>
</div>
Line 42: Line 43:
<div class="slide">
<div class="slide">
-
<h1>Garden Gloves</h1>
+
<h1>Project 3</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
-
<a href="#"><img src="images/slide-3-image.png" alt="learn more"></a>
+
<a href="#"><img src="https://static.igem.org/mediawiki/2012/6/66/Slide-3-image.png" alt="learn more"></a>
</div>
</div>
Line 52: Line 53:
</div>
</div>
</div>
</div>
-
<script language='Javascript'>
+
&
-
// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
+
-
var delayLength = 4000;
+
-
//var width=
+
-
function doMove(panelWidth, tooFar) {
+
-
var leftValue = $("#mover").css("left");
+
-
+
-
// Fix for IE
+
-
if (leftValue == "auto") { leftValue = 0; };
+
-
+
-
var movement = parseFloat(leftValue, 10) - panelWidth;
+
-
+
-
if (movement == tooFar) {
+
-
$(".slide img").animate({
+
-
"top": -200
+
-
}, function() {
+
-
$("#mover").animate({
+
-
"left": 0
+
-
}, function() {
+
-
$(".slide img").animate({
+
-
"top": 20
+
-
});
+
-
});
+
-
});
+
-
}
+
-
else {
+
-
$(".slide img").animate({
+
-
"top": -200
+
-
}, function() {
+
-
$("#mover").animate({
+
-
"left": movement
+
-
}, function() {
+
-
$(".slide img").animate({
+
-
"top": 20
+
-
});
+
-
});
+
-
});
+
-
}
+
-
}
+
-
 
+
-
$(function(){
+
-
+
-
    var $slide1 = $("#slide-1");
+
-
 
+
-
var panelWidth = $slide1.css("width");
+
-
var panelPaddingLeft = $slide1.css("paddingLeft");
+
-
var panelPaddingRight = $slide1.css("paddingRight");
+
-
 
+
-
panelWidth = parseFloat(panelWidth, 10);
+
-
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
+
-
panelPaddingRight = parseFloat(panelPaddingRight, 10);
+
-
 
+
-
panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
+
-
+
-
var numPanels = $(".slide").length;
+
-
var tooFar = -(panelWidth * numPanels);
+
-
var totalMoverwidth = numPanels * panelWidth;
+
-
$("#mover").css("width", totalMoverwidth);
+
-
 
+
-
$("#slider").append('<a href="#" id="slider-stopper">Stop</a>');
+
-
 
+
-
sliderIntervalID = setInterval(function(){
+
-
doMove(panelWidth, tooFar);
+
-
}, delayLength);
+
-
+
-
$("#slider-stopper").click(function(){
+
-
if ($(this).text() == "Stop") {
+
-
clearInterval(sliderIntervalID);
+
-
$(this).text("Start");
+
-
}
+
-
else {
+
-
sliderIntervalID = setInterval(function(){
+
-
doMove(panelWidth, tooFar);
+
-
}, delayLength);
+
-
$(this).text("Stop");
+
-
}
+
-
+
-
});
+
-
 
+
-
});
+
-
</script>
+
</html>
</html>

Latest revision as of 19:01, 26 September 2012

Project 1

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more

Project 2

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more

Project 3

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more
&
Retrieved from "http://2012.igem.org/Team:UT_Dallas/test/"