Team:UCLA/Template/Javascript
From 2014.igem.org
(Difference between revisions)
Anuvedverma (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
(100 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | ||
+ | <!--SPIDER TOP BUTTON--> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | function | + | jQuery(document).ready(function($){ |
- | + | $('.spiderbutton, .backtotop').click(function(){ | |
- | + | $('.spiderbutton').stop(true,true).animate({ top: '-=55%'}, 800, function(){$('.spiderbutton').stop(true,true).animate({ top: '+=55%'}, 3000)}); | |
- | + | $('.spiderline').stop(true,true).animate({ top: '-=55%'}, 800, function(){$('.spiderline').stop(true,true).animate({ top: '+=55%'}, 3000)}); | |
- | + | $("html, body").animate({ scrollTop: 0 }, 1000); | |
- | + | }); | |
- | + | }); | |
- | } | + | </script> |
- | } | + | |
- | function | + | |
- | + | <!--SPLASH PAGE--> | |
- | + | <script type="text/javascript"> | |
- | + | $(document).ready(function() { | |
- | + | $('#box1').hover(function(){ | |
- | + | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; | |
- | + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | |
- | var | + | }, function() { |
- | + | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | |
- | + | }); | |
- | + | $('#box2').hover(function(){ | |
- | + | var smallTop = $('#box2').height() - $(".cover", this).height() -10 +"px"; | |
- | + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | |
- | + | }, function() { | |
- | + | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | |
- | + | }); | |
- | + | $('#box3').hover(function(){ | |
- | + | var smallTop = $('#box3').height() - $(".cover", this).height() -10 +"px"; | |
- | if( | + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); |
- | + | }, function() { | |
- | + | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | |
+ | }); | ||
+ | $('#box4').hover(function(){ | ||
+ | var smallTop = $('#box4').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <!--MAIN PAGE BOXES--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $('#box5').hover(function(){ | ||
+ | var smallTop = $('#box5').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | $('#box6').hover(function(){ | ||
+ | var smallTop = $('#box6').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | $('#box7').hover(function(){ | ||
+ | var smallTop = $('#box7').height() - $(".cover", this).height() -10 +"px"; | ||
+ | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); | ||
+ | }, function() { | ||
+ | $(".cover", this).stop().animate({top:'340px'},{queue:false,duration:160}); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <!--SIDE NAVIGATION MENU BAR--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $("#side_menu").mouseenter(function(){ | ||
+ | $("#side_menu").stop(true,false).animate({ | ||
+ | left:'0px', | ||
+ | }); | ||
+ | }).mouseleave(function(){ | ||
+ | $("#side_menu").stop(true,false).animate({ | ||
+ | left:'-170px', | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <!--TOP NAVIGATION MENU BAR--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $("#menu > li > ul").hide(); | ||
+ | $("#menu > li").mouseenter(function() { | ||
+ | $(this).children("li > ul").stop(true,true).slideDown(350); | ||
+ | }); | ||
+ | $("#menu > li").mouseleave(function() { | ||
+ | $(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); |
- | },5); | + | return this; |
- | } | + | }; |
- | var | + | })(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 < 3){ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '-=1150px'}, 250); | ||
+ | count += 1; | ||
+ | } else{ | ||
+ | $('.slider_imgs').stop(true,true).animate({ left: '+=3450px'}, 250); | ||
+ | count = 0; | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <!--HP SLIDER--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $('.hpslider_left').mouseenter(function(){ | ||
+ | $('.hpslider_left').animate({ opacity: '0.8'},1); | ||
+ | }); | ||
+ | $('.hpslider_right').mouseenter(function(){ | ||
+ | $('.hpslider_right').animate({ opacity: '0.8'},1); | ||
+ | }); | ||
+ | $('.hpslider_left').mouseleave(function(){ | ||
+ | $('.hpslider_left').animate({ opacity: '0.5'},1); | ||
+ | }); | ||
+ | $('.hpslider_right').mouseleave(function(){ | ||
+ | $('.hpslider_right').animate({ opacity: '0.5'},1); | ||
+ | }); | ||
+ | |||
+ | |||
+ | var total = $('.hpslider_imgs > td').length; | ||
+ | var count = 0; | ||
+ | $('.hpslider_left').click(function(){ | ||
+ | if(count > 0){ | ||
+ | $('.hpslider_imgs').stop(true,true).animate({ left: '+=1150px'}, 250); | ||
+ | count -= 1; | ||
+ | } else{ | ||
+ | $('.hpslider_imgs').stop(true,true).animate({ left: '-=16100px'}, 250); | ||
+ | count = 14; | ||
+ | // $('.hpslider_imgs').stop(true,true).animate({ left: '+=20px'}, 100, function(){$('.hpslider_imgs').stop(true,true).animate({ left: '-=20px'}, 500)}); | ||
+ | } | ||
+ | }); | ||
+ | $('.hpslider_right').click(function(){ | ||
+ | if(count < 14){ | ||
+ | $('.hpslider_imgs').stop(true,true).animate({ left: '-=1150px'}, 250); | ||
+ | count += 1; | ||
+ | } else{ | ||
+ | $('.hpslider_imgs').stop(true,true).animate({ left: '+=16100px'}, 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> |
Latest revision as of 02:45, 18 October 2014