Team:UT Dallas/test/

From 2012.igem.org

(Difference between revisions)
Line 10: Line 10:
<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">
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 15: Line 16:
</div>
</div>
<div id='middle_box'>
<div id='middle_box'>
-
test<br>test
+
<div id="slider">
 +
 
 +
<div id="mover">
 +
 +
<div id="slide-1" class="slide">
 +
 +
<h1>Garden Rack</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>
 +
 +
<a href="#"><img src="images/slide-1-image.png" alt="learn more"></a>
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
<h1>Tulip Bulbs</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>
 +
 +
<a href="#"><img src="images/slide-2-image.png" alt="learn more"></a>
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
<h1>Garden Gloves</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>
 +
 +
<a href="#"><img src="images/slide-3-image.png" alt="learn more"></a>
 +
 +
</div>
 +
 +
</div>
</div>
</div>
 +
<script language='Javascript'>
 +
// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
 +
var delayLength = 4000;
 +
 +
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>

Revision as of 19:01, 28 August 2012

Garden Rack

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

Tulip Bulbs

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

Garden Gloves

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/"