From 9dfb04613d27daeddb60f6ea190e20403877299f Mon Sep 17 00:00:00 2001 From: Seth Call Date: Thu, 14 Jan 2016 06:52:18 -0600 Subject: [PATCH] * fix scroll issues with front page --- .../assets/javascripts/modern/home_page.js | 83 +++++++++---------- web/app/assets/javascripts/modern/modern.js | 1 + web/app/controllers/landings_controller.rb | 1 + web/app/views/users/home-2.html.slim | 67 --------------- 4 files changed, 42 insertions(+), 110 deletions(-) delete mode 100644 web/app/views/users/home-2.html.slim diff --git a/web/app/assets/javascripts/modern/home_page.js b/web/app/assets/javascripts/modern/home_page.js index 3f69563da..0f83f5894 100644 --- a/web/app/assets/javascripts/modern/home_page.js +++ b/web/app/assets/javascripts/modern/home_page.js @@ -1,4 +1,4 @@ -(function($) { +(function ($) { "use strict"; @@ -59,31 +59,29 @@ "class": "fixed" }).insertAfter("#header"); - - $('#mobile-menu a').on("click", function() { - var $t = $('#mobile-menu-trigger'); - var $n = $('#mobile-menu'); - var ti = $(this).attr('title'); - var $element = $('#'+ti); - var pos = $element.offset(); - pos.top -= 154; - $('body').animate({scrollTop: pos.top},500); - if ($t.hasClass("mobile-menu-opened")) { - $t.removeClass("mobile-menu-opened").addClass("mobile-menu-closed"); - $n.slideUp(300); - } else { - $t.removeClass("mobile-menu-closed").addClass("mobile-menu-opened"); - $n.slideDown(300); - } - event.preventDefault(); - }); - - $("#mobile-menu li, #mobile-menu li a, #mobile-menu ul").attr("style", ""); - } + $('#mobile-menu a').on("click", function () { + var $t = $('#mobile-menu-trigger'); + var $n = $('#mobile-menu'); + var ti = $(this).attr('title'); + var $element = $('#' + ti); + $.scrollTo($element, {duration: 500, offset: -150}) + if ($t.hasClass("mobile-menu-opened")) { + $t.removeClass("mobile-menu-opened").addClass("mobile-menu-closed"); + $n.slideUp(300); + } else { + $t.removeClass("mobile-menu-closed").addClass("mobile-menu-opened"); + $n.slideDown(300); + } + event.preventDefault(); + }); + + $("#mobile-menu li, #mobile-menu li a, #mobile-menu ul").attr("style", ""); + } + } /* ========================================================================== @@ -92,7 +90,7 @@ function showHideMobileMenu() { - $("#mobile-menu-trigger").on("click", function(event) { + $("#mobile-menu-trigger").on("click", function (event) { var $t = $(this), $n = $("#mobile-menu"); @@ -116,8 +114,8 @@ function handleBackToTop() { - $('#back-to-top').on("click", function(){ - $('html, body').animate({scrollTop:0}, 'slow'); + $('#back-to-top').on("click", function () { + $('html, body').animate({scrollTop: 0}, 'slow'); return false; }); @@ -129,7 +127,7 @@ function showHidebackToTop() { - if ($(window).scrollTop() > $(window).height() / 2 ) { + if ($(window).scrollTop() > $(window).height() / 2) { $("#back-to-top").removeClass('gone').addClass('visible'); } else { $("#back-to-top").removeClass('visible').addClass('gone'); @@ -144,11 +142,11 @@ var min_w = 0, video_width_original = 1920, video_height_original = 1080, - vid_ratio = 1920/1080; + vid_ratio = 1920 / 1080; function handleVideoBackground() { - $('.fullwidth-section .fullwidth-section-video').each(function(i){ + $('.fullwidth-section .fullwidth-section-video').each(function (i) { var $sectionWidth = $(this).closest('.fullwidth-section').outerWidth(), $sectionHeight = $(this).closest('.fullwidth-section').outerHeight(); @@ -162,11 +160,13 @@ scale = scale_h > scale_v ? scale_h : scale_v; // limit minimum width - min_w = vid_ratio * ($sectionHeight+20); + min_w = vid_ratio * ($sectionHeight + 20); - if (scale * video_width_original < min_w) {scale = min_w / video_width_original;} + if (scale * video_width_original < min_w) { + scale = min_w / video_width_original; + } - $(this).find('video').width(Math.ceil(scale * video_width_original +2)).height(Math.ceil(scale * video_height_original +2)); + $(this).find('video').width(Math.ceil(scale * video_width_original + 2)).height(Math.ceil(scale * video_height_original + 2)); }); @@ -180,7 +180,7 @@ var stickyHeader = false; var stickypoint = 150; - if ($('body').hasClass('sticky-header')){ + if ($('body').hasClass('sticky-header')) { stickyHeader = true; } @@ -221,7 +221,7 @@ $('#header').removeClass("stuck"); $('#logo img').attr("src", "assets/images/logo.png"); $('.header-style-2 #logo img').attr("src", "assets/images/logo-2.png"); - $('#content').animate({top: '0px'},100); + $('#content').animate({top: '0px'}, 100); } e = false; @@ -261,18 +261,15 @@ handleVideoBackground(); - $('.sf-menu li a').on('click', function() { + $('.sf-menu li a').on('click', function () { var ti = $(this).attr('title'); - var $element = $('#'+ti); - var pos = $element.offset(); - pos.top -= 154; - $('body').animate({scrollTop: pos.top},500); + var $element = $('#' + ti); + $.scrollTo($element, {duration: 500, offset: -150}) }); - - $('#logo').click(function(e) { - $('body').animate({scrollTop:0},500); + $('#logo').click(function (e) { + $('body').animate({scrollTop: 0}, 500); }); }; @@ -281,7 +278,7 @@ When the window is scrolled, do ========================================================================== */ - $(window).scroll(function() { + $(window).scroll(function () { showHidebackToTop(); }); @@ -289,7 +286,7 @@ When the window is resized, do ========================================================================== */ - $(window).resize(function() { + $(window).resize(function () { handleMobileMenu(); handleVideoBackground(); diff --git a/web/app/assets/javascripts/modern/modern.js b/web/app/assets/javascripts/modern/modern.js index 76dfae1e1..43f0c4c1e 100644 --- a/web/app/assets/javascripts/modern/modern.js +++ b/web/app/assets/javascripts/modern/modern.js @@ -1,6 +1,7 @@ //= require bugsnag //= require bind-polyfill //= require jquery-2.1.4 +//= require jquery.scrollTo //= require alertify.min //= require AAA_Log //= require classnames diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb index fee955047..a28980383 100644 --- a/web/app/controllers/landings_controller.rb +++ b/web/app/controllers/landings_controller.rb @@ -107,6 +107,7 @@ class LandingsController < ApplicationController def individual_jamtrack_band + @olark_enabled = true @no_landing_tag = true @landing_tag_play_learn_earn = true @show_after_black_bar_border = true diff --git a/web/app/views/users/home-2.html.slim b/web/app/views/users/home-2.html.slim deleted file mode 100644 index 96d1716ae..000000000 --- a/web/app/views/users/home-2.html.slim +++ /dev/null @@ -1,67 +0,0 @@ -- provide(:page_name, 'home') -- provide(:description, 'Play music with others online in real time. Play with multitrack audio of your favorite music. Musician community.') - -.home-column - = link_to image_tag("web/thumbnail_jamtracks.jpg", :alt => "JamTracks explanatory video"), '#', class: "jamtracks-video video-item", 'data-video-header' => 'JamTracks', 'data-video-url' => 'https://www.youtube.com/embed/askHvcCoNfw?autoplay=1' - h3 Complete, Multi-Track Backing Tracks - - p - strong JamTracks - |  are the best way to play with your favorite music. Unlike traditional backing tracks, JamTracks are complete multitrack recordings, with fully isolated tracks for each part. - - = link_to image_tag("web/button_cta_jamtrack.png", width: 234, height:57), '/client#/jamtrack/search', class: 'cta-button jamtracks' - br clear="all" - .extra-links - .learn-more - a.learn-more-jamtracks href='/products/jamtracks' learn more - -.home-column - = link_to image_tag("web/thumbnail_platform.jpg", :alt => "JamKazam explanatory video!"), '#', class: "platform-video video-item", 'data-video-header' => 'JamKazam Platform', 'data-video-url' => 'https://www.youtube.com/embed/ylYcvTY9CVo?autoplay=1' - h3 Online Music Collaboration Platform - - p - strong JamKazam - |  is an innovative live music platform and social network, enabling musicians to play music together in real time from different locations over the Internet as if they are sitting in the same room. - - = link_to image_tag("web/button_cta_platform.png", width: 234, height: 57), '/signup', class: 'cta-button platform' - .extra-links - span.learn-more.shared - a.learn-more-platform href='/products/platform' learn more - span.sign-in-holder.shared - a.sign-in href='/signin' sign in - - br clear="all" - -.home-column.last - = link_to image_tag("web/thumbnail_jamblaster.jpg", :alt => "JamBlaster explanatory video!"), '#', class: "jamblaster-video video-item", 'data-video-header' => 'JamBlaster', 'data-video-url' => 'https://www.youtube.com/embed/iteR0ciRhtw?autoplay=1' - h3 Ultra Low-Latency Audio Interface - - p - | The  - strong JamBlaster - |  is a device designed from the ground up to meet the requirements of online music play, vastly extending the range over which musicians can play together across the Internet. - - a.cta-button.jamblaster data-celery="5675ffb8004f6711002918b6" data-celery-version="v2" - = image_tag("web/button_cta_jamblaster.png", width: 234, height: 57) - - script async="async" type="text/javascript" src="https://www.trycelery.com/js/celery.js" - .extra-links - .learn-more - a.learn-more-jamblaster href='/products/jamblaster' learn more - br clear="all" - -br clear="all" - -- content_for :after_black_bar do - .latest-promo - = render :partial => "latest" - .endorsement-promo - .home-buzz - h2 What Musicians in the JamKazam Community Are Saying - = link_to image_tag("web/thumbnail_buzz.jpg", :alt => "JamKazam Endorsements!", width:300), '#', class: "endorsements-video video-item", 'data-video-header' => 'JamKazam Community', 'data-video-url' => 'https://www.youtube.com/embed/_7qj5RXyHCo?autoplay=1' - - - br clear="all" - -javascript: - window.JK.HomePage();