"
Team:Heidelberg/js/frontpage
From 2014.igem.org
(Difference between revisions)
m |
|||
| (24 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| + | var params; | ||
| + | |||
recalcRingSize = function(setPosition) { | recalcRingSize = function(setPosition) { | ||
var placeholder = $("#img-placeholder"); | var placeholder = $("#img-placeholder"); | ||
| Line 15: | Line 17: | ||
var moveRing = false; | var moveRing = false; | ||
function setTweenParams(tween) { | function setTweenParams(tween) { | ||
| - | + | params = {css: { | |
left: $('#ring').width()/-2, | left: $('#ring').width()/-2, | ||
top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2 | top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2 | ||
| Line 27: | Line 29: | ||
getDropdown = function(){ | getDropdown = function(){ | ||
| - | + | $dropdown = $(this).parent().children('.dropdown');//.clone(); | |
| + | //$dropdown.children('ul').prepend('<li><a href="'+$(this).attr("href")+'">Overview</a></li>'); | ||
| + | return $dropdown.html(); | ||
} | } | ||
| + | |||
| + | getTitle = function() { | ||
| + | $this = $(this) | ||
| + | return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>' | ||
| + | } | ||
| + | |||
| + | var preload = [ | ||
| + | "/wiki/images/2/22/Heidelberg_Achievements_red.png", | ||
| + | "/wiki/images/d/d3/Team_icon_red.png", | ||
| + | "/wiki/images/3/3f/Science_icon_red.png", | ||
| + | "/wiki/images/1/1d/Parts_icon_red.png", | ||
| + | "/wiki/images/1/18/Software_icon_red.png", | ||
| + | "/wiki/images/1/13/Modeling_icon_red.png", | ||
| + | "/wiki/images/3/32/Toolbox_icon_red.png", | ||
| + | "/wiki/images/3/3d/Humanpractice_icon_red.png", | ||
| + | "/wiki/images/0/03/MD_icon_red.png"]; | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Line 60: | Line 80: | ||
scene2.setTween(TweenMax.to("#front-nav ul", 2, { padding: "10px 20px"})).addTo(controller); | scene2.setTween(TweenMax.to("#front-nav ul", 2, { padding: "10px 20px"})).addTo(controller); | ||
//scene.addIndicators(); | //scene.addIndicators(); | ||
| + | |||
| + | // Build Dropdowns and hovers | ||
$("#front-nav ul li a") | $("#front-nav ul li a") | ||
| - | .popover({trigger: 'manual', html: true, content: getDropdown}) | + | .on("mouseenter", function(){ |
| - | .mouseenter(function(){ | + | $(this).find('img').animate({opacity: 0}, 200); |
| + | }) | ||
| + | .on("mouseleave", function () { | ||
| + | $(this).find('img') | ||
| + | .stop(true, true) | ||
| + | .css("opacity", 1); | ||
| + | }); | ||
| + | |||
| + | |||
| + | $("#front-nav ul li a.popover-dropdown") | ||
| + | .popover({trigger: 'manual', html: true, content: getDropdown, title: getTitle, placement: 'bottom'}) | ||
| + | .on("mouseenter", function () { | ||
| + | var _this = this; | ||
| + | $(this).popover("show"); | ||
| + | $(".popover").on("mouseleave", function () { | ||
| + | $(_this).popover('hide'); | ||
| + | }); | ||
| + | }) | ||
| + | .on("mouseleave", function () { | ||
| + | var _this = this; | ||
| + | setTimeout(function () { | ||
| + | if (!$(".popover:hover").length) { | ||
| + | $(_this).popover("hide"); | ||
| + | } | ||
| + | }, 100); | ||
| + | }); | ||
| + | |||
| + | $("#front-nav ul li a[data-toggle='tooltip']").tooltip(); | ||
| + | |||
| + | /*.mouseenter(function(){ | ||
$(this).find('img').animate({opacity: 0}, 200); | $(this).find('img').animate({opacity: 0}, 200); | ||
| + | //$(this).siblings(".popover").stop(true); | ||
$(this).popover('show');}) | $(this).popover('show');}) | ||
.mouseleave(function(){ | .mouseleave(function(){ | ||
| Line 70: | Line 122: | ||
$this.find('img').stop(true, true); | $this.find('img').stop(true, true); | ||
$this.find('img').css("opacity", 1); | $this.find('img').css("opacity", 1); | ||
| - | |||
| - | |||
| - | |||
$this.siblings(".popover") | $this.siblings(".popover") | ||
| - | .mouseenter(function() { | + | .mouseenter(function() {$(this).siblings('a').data("hide", "false");}) |
| - | .mouseleave(function() {$this.popover('hide');}); | + | .mouseleave(function() {$(this).siblings('a').popover('hide');}); |
| - | }); | + | $this.data("hide", "true"); |
| + | setTimeout(function() { | ||
| + | if($this.data("hide") == "true") | ||
| + | $this.popover('hide');console.log($this.data("hide"));}, 200); | ||
| + | });*/ | ||
//updateScrollVars(); | //updateScrollVars(); | ||
| Line 84: | Line 137: | ||
$('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"}) | $('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"}) | ||
}); | }); | ||
| + | |||
| + | $(preload).each(function(){ | ||
| + | $('<img/>')[0].src = this; | ||
| + | // Alternatively you could use: | ||
| + | // (new Image()).src = this; | ||
| + | }); | ||
}); | }); | ||
| Line 104: | Line 163: | ||
jQuery.extend(jQuery.easing, { | jQuery.extend(jQuery.easing, { | ||
easeInOutCubic: function (x, t, b, c, d) { | easeInOutCubic: function (x, t, b, c, d) { | ||
| - | + | if ((t/=d/2) < 1) return c/2*t*t*t + b; | |
| - | + | return c/2*((t-=2)*t*t + 2) + b; | |
| - | + | } | |
}); | }); | ||
Latest revision as of 00:28, 17 October 2014
var params;
recalcRingSize = function(setPosition) {
var placeholder = $("#img-placeholder");
var ring = $("#ring");
var width = placeholder.outerWidth(false);
var position = placeholder.offset();
position.left = position.left - $(".container").offset().left;
if(setPosition){
ring.css(position);
}
ring.css("width", width+"px");
placeholder.css("height", ring.height()+"px");
};
var moveRing = false; function setTweenParams(tween) {
params = {css: {
left: $('#ring').width()/-2,
top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
}};
tween.updateTo(params, false);
}
var moveRingTween = new TweenMax("#ring", 2, {}); var scene = new ScrollScene({duration: 1000}); var timeline = new TimelineMax();
getDropdown = function(){
$dropdown = $(this).parent().children('.dropdown');//.clone();
//$dropdown.children('ul').prepend('- /
