Team:UCLA/Template/Javascript
From 2014.igem.org
(Difference between revisions)
Samichaels (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<!--SPIDER TOP BUTTON--> | <!--SPIDER TOP BUTTON--> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(document).ready(function($){ | jQuery(document).ready(function($){ | ||
- | $('.spiderbutton').click(function(){ | + | $('.spiderbutton, .backtotop').click(function(){ |
+ | $('.spiderbutton').stop(true,true).animate({ top: '-=60%'}, 800, function(){$('.spiderbutton').stop(true,true).animate({ top: '+=60%'}, 3000)}); | ||
+ | $('.spiderline').stop(true,true).animate({ top: '-=60%'}, 800, function(){$('.spiderline').stop(true,true).animate({ top: '+=60%'}, 3000)}); | ||
$("html, body").animate({ scrollTop: 0 }, 500); | $("html, body").animate({ scrollTop: 0 }, 500); | ||
- | |||
- | |||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
<!--SPLASH PAGE--> | <!--SPLASH PAGE--> | ||
Line 157: | Line 66: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
<!--SIDE NAVIGATION MENU BAR--> | <!--SIDE NAVIGATION MENU BAR--> | ||
Line 162: | Line 72: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$("#side_menu").mouseenter(function(){ | $("#side_menu").mouseenter(function(){ | ||
- | $("#side_menu").animate({ | + | $("#side_menu").stop(true,false).animate({ |
left:'0px', | left:'0px', | ||
}); | }); | ||
}).mouseleave(function(){ | }).mouseleave(function(){ | ||
- | $("#side_menu").animate({ | + | $("#side_menu").stop(true,false).animate({ |
- | left:'- | + | left:'-170px', |
}); | }); | ||
}); | }); | ||
Line 183: | Line 93: | ||
$(this).children("li > ul").stop(true,true).slideUp(350); | $(this).children("li > ul").stop(true,true).slideUp(350); | ||
}); | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <!--SIDE SPIDER ANIMATION--> | ||
+ | <script type="text/javascript"> | ||
+ | //rotator - delay, children | ||
+ | (function( $ ){ | ||
+ | $.fn.rotator = function(delay, time, child){ | ||
+ | //set curImage val | ||
+ | var currImg = 0; | ||
+ | var currIt = true; | ||
+ | //set array of images | ||
+ | var ss = $(this).children(child); | ||
+ | var ssize = ss.size(); | ||
+ | var startTime = new Date().getTime(); | ||
+ | var interval = setInterval(function() { | ||
+ | if(currIt){ | ||
+ | $(ss[currImg]).css('opacity','1'); | ||
+ | currIt = !currIt; | ||
+ | }else if (!currIt){ | ||
+ | $(ss[currImg]).css('opacity','0'); | ||
+ | $(ss[currImg+1]).css('opacity','1'); | ||
+ | currIt = !currIt; | ||
+ | currImg++; | ||
+ | } | ||
+ | //reset | ||
+ | if(currImg >= ssize){ | ||
+ | currImg = 0; | ||
+ | $(ss[currImg]).css('opacity','1'); | ||
+ | } | ||
+ | if(new Date().getTime() - startTime > time){ | ||
+ | clearInterval(interval); | ||
+ | return; | ||
+ | } | ||
+ | }, delay); | ||
+ | return this; | ||
+ | }; | ||
+ | })(jQuery); | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $(document).keydown(function(e) { | ||
+ | if(e.keyCode == 40){ | ||
+ | $("#spider").rotator(55, 1000, 'img'); | ||
+ | $("#spider").animate({ | ||
+ | "top": "+=100px" | ||
+ | }, 1000); | ||
+ | } else if(e.keyCode == 38){ | ||
+ | $("#spider").rotator(55, 1000, 'img'); | ||
+ | $("#spider").animate({ | ||
+ | "top": "-=100px" | ||
+ | }, 1000); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <!--SLIDER--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $('.slider_left').mouseenter(function(){ | ||
+ | $('.slider_left').animate({ opacity: '0.8'},1); | ||
+ | }); | ||
+ | $('.slider_right').mouseenter(function(){ | ||
+ | $('.slider_right').animate({ opacity: '0.8'},1); | ||
+ | }); | ||
+ | $('.slider_left').mouseleave(function(){ | ||
+ | $('.slider_left').animate({ opacity: '0.5'},1); | ||
+ | }); | ||
+ | $('.slider_right').mouseleave(function(){ | ||
+ | $('.slider_right').animate({ opacity: '0.5'},1); | ||
+ | }); | ||
+ | |||
+ | |||
+ | var total = $('.slider_imgs > td').length; | ||
+ | var count = 0; | ||
+ | $('.slider_left').click(function(){ | ||
+ | if(count > 0){ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '+=1150px'}, 250); | ||
+ | count -= 1; | ||
+ | } else{ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '+=20px'}, 100, function(){$('.slider_imgs').stop(true,true).animate({ left: '-=20px'}, 500)}); | ||
+ | } | ||
+ | }); | ||
+ | $('.slider_right').click(function(){ | ||
+ | if(count < 2){ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '-=1150px'}, 250); | ||
+ | count += 1; | ||
+ | } else{ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '+=2300px'}, 250); | ||
+ | count = 0; | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--PAGE HEADERS--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $('.page_header_box').mouseenter(function(){ | ||
+ | $(this).animate({ opacity: '0.9'},1); | ||
+ | }); | ||
+ | $('.page_header_box').mouseleave(function(){ | ||
+ | $(this).animate({ opacity: '0.5'},1); | ||
+ | }); | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 01:20, 22 September 2014