diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 62c8615..a962c20 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -64,78 +64,6 @@ // } // }, - // nav: { - // 自適應使用的下拉選單 - // setDropdown: function() { - // var $caret1 = $(''); - // var $caret2 = $(''); - // var $li = null; - // var $this = null; - // var cls = 'active'; - // var iconDown = 'fa-chevron-down'; - // var iconUp = 'fa-chevron-up'; - - // // 如果有第二層選單，新增對應的類別到parent元素上 - // $('.nav-level-1') - // .parent('li') - // .addClass('has-dropdown level-1'); - - // // 檢查是否已經有dropdown-toggle-icon這個元素，才不會在resize事件中重覆新增 - // if ($('.has-dropdown.level-1 > .dropdown-toggle-icon').length < 1) { - // $caret1.appendTo('.has-dropdown.level-1'); - - // // 如果有第三層選單，新增對應的類別到parent元素上 - // $('.nav-level-2') - // .parent('li') - // .addClass('has-dropdown level-2'); - // $caret2.appendTo('.has-dropdown.level-2'); - // } - - // // 綁定事件到第二、三層下拉選單的按鈕上 - // $('.dropdown-toggle-icon.level-1, .dropdown-toggle-icon.level-2').on('vclick', function(e) { - // e.preventDefault(); - // $this = $(this); - // $li = $this.parent('li'); - - // // 拿掉所有選項除了目前點選的選項的 active class 並把icon換成預設的 - // $li - // .siblings('li') - // .removeClass(cls) - // .find('.' + iconUp) - // .removeClass(iconUp) - // .addClass(iconDown); - - - // // 換掉目前選項的icon - // $li - // .find('> i') - // .removeClass(iconDown) - // .addClass(iconUp); - - // // 折疊已打開的選項 - // if ( $li.hasClass(cls) ){ - // $li.removeClass(cls); - // $this.removeClass(iconUp).addClass(iconDown); - // } - // else{ - // $li.addClass(cls) - // $this.removeClass(iconDown).addClass(iconUp); - // } - // }); - // }, - - // 移除行動版下拉選單 - // removeDropdown: function() { - // var $nav = $('#main-nav'); - - // $nav - // .find('.dropdown-toggle-icon') - // .remove(); - // $nav - // .find('.active') - // .removeClass('active'); - // } - // }, member: { // 欄位相同高度，小心這個函數沒有計算到圖片高度，所以可能要搭配 jQuery load函數使用，或是之後使用更好的方式例如 CSS3 flexbox @@ -426,28 +354,19 @@ // 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數 $(window).resize(function() { if ($(window).width() < 769) { - $('.navbar-toggle').click(function(e){ - e.preventDefault(); - $('.mobile-menu').toggleClass('active'); - $('body').toggleClass('noscroll'); - - $('.mobile-menu .navbar-toggle').removeClass('collapsed'); - // $menu.slideToggle(); - $('.mobile-menu1 > ul').slideUp(500); - $('.mobile-menu1 > .menu-drop').removeClass('opened'); - $('.mobile-menu2 > ul').slideUp(500); - $('.mobile-menu2 > .menu-drop').removeClass('opened'); - }) if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { - if ( $('.modules-menu i').length == 0 ) { - orbit.MobileMenu(); - } + // if ( $('.modules-menu i').length == 0 ) { + // orbit.MobileMenu(); + // } if( $('.mobile-menu .modules-menu').length == 0 ) { $('.mobile-menu').append($('.modules-menu')); $('.header-buttom').appendTo($('.modules-menu')); - $('.navbar-toggle').bind(orbit.ClickMenuHandler()); + orbit.MobileMenu(); + orbit.ClickMenuHandler(); + // $('.navbar-toggle').bind('click', orbit.ClickMenuHandler); + // $('.navbar-toggle').bind(orbit.ClickMenuHandler()); } },500 )} else { resizeTimer = setTimeout(function(){ @@ -476,34 +395,34 @@ }); //li被hover - $('li').hover( - function() { - $(this).children('ul').addClass('show'); - }, - function() { - $(this).children('ul').removeClass('show'); + function handleHover() { + if ($(window).width() > 769) { + $('li').off('mouseenter mouseleave').hover( + function() { + $(this).children('ul').addClass('show'); + }, + function() { + $(this).children('ul').removeClass('show'); + } + ); + } else { + $('li').off('mouseenter mouseleave'); // 移除 hover 事件 } - ); + } + + // 先執行一次 + handleHover(); + + // 監聽視窗大小變化 + $(window).on('resize', function() { + handleHover(); + }); //刪除空的h1 $('h1').each(function() { if ($(this).text().trim() === '') { $(this).remove(); } }); - // - // $('.epaper-index2-container h4 a').each(function() { - // var $this = $(this); - // // 取得 a 內部的純文字內容，移除前後空白 - // var textContent = $this.text().trim(); - // // 檢查 a 內部是否所有子元素都是 display: none - // var hasVisibleContent = $this.children().filter(function() { - // return $(this).css('display') !== 'none'; - // }).length > 0; - // // 如果 a 內部沒有純文字，且內部所有元素都是 display: none，則刪除該 a - // if (textContent === '' || !hasVisibleContent) { - // $this.remove(); - // } - // }); //refresh_btn加上aria-label $('#refresh_btn').each(function() { var $this = $(this); @@ -1109,7 +1028,39 @@ $(document).ready(function () { $('.header-banner').css('height', navH ); } } - headerH(); + headerH(); + //downIcon + $(".downIcon").click(function () { + var move_to_target = function (stop) { + var theTop; + if (stop) { + // $(".kenjohn").addClass('navFixed'); + if ($('.layout-content2.topcontent').length != 0 && $('.layout-content2.topcontent').offset().top < 400) { + $('.layout-content2').css('margin-top', $('.kenjohn').height() - $('#orbit-bar').height()); + } + if (parseInt($('.layout-content2').css('margin-top') == 0)) { + theTop = $('.layout-content2.topcontent').offset().top - $(".kenjohn").position().top - 95; + } else { + theTop = $('.layout-content2.topcontent').offset().top - $(".kenjohn").position().top - $(".kenjohn").height() - 95; + } + } else { + theTop = 5; + } + // console.log(theTop); + $("html, body").animate({ + scrollTop: theTop + }, { + duration: 400, easing: "swing", complete: function () { + // console.log('finish'); + if (!stop) { + move_to_target(true); + } + } + }); + } + move_to_target(false); + return false; + }); $(window).resize(function() { if ($(window).width() <769) { diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index 09913f8..cf1627f 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/assets/stylesheets/template/layout/content.scss @@ -129,3 +129,101 @@ .image-carousel{ padding: 15px 0px 25px 0px; } +.downIcon { + position: absolute; + left: 50%; + bottom: 15%; + //bottom: 10%; + z-index: 2; + color: #fff; + + span { + position: absolute; + top: 0; + left: 50%; + width: 46px; + height: 46px; + margin-left: -23px; + border: 2px solid #fff; + border-radius: 100%; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + box-sizing: border-box; + } + + a:hover span { + width: 60px; + height: 60px; + margin-left: -30px; + top: -7px; + border-width: 4px; + border-color: $theme-color-second; + } +} +.downIcon a:hover span::after { + width: 21px; + height: 21px; + border-left-width: 4px; + border-bottom-width: 4px; + margin: -14px 0 0 -10px; + border-color: $theme-color-second; +} +.downIcon a span::after{ + position: absolute; + top: 50%; + left: 50%; + content: ''; + width: 16px; + height: 16px; + margin: -12px 0 0 -8px; + border-left: 2px solid #fff; + border-bottom: 2px solid #fff; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + box-sizing: border-box; +} +.downIcon a span::before{ + position: absolute; + top: 0; + left: 0; + z-index: -1; + content: ''; + width: 44px; + height: 44px; + box-shadow: 0 0 0 0 #ffffff1a; + border-radius: 100%; + behavior: url("/assets/ie_support/PIE2/PIE.htc"); + opacity: 0; + -webkit-animation: sdb03 3s infinite; + animation: sdb03 3s infinite; + box-sizing: border-box; +} +@-webkit-keyframes sdb03 { + 0% { + opacity: 0; + } + 30% { + opacity: 1; + } + 60% { + box-shadow: 0 0 0 60px #ffffff1a; + opacity: 0; + } + 100% { + opacity: 0; + } +} +@keyframes sdb03 { + 0% { + opacity: 0; + } + 30% { + opacity: 1; + } + 60% { + box-shadow: 0 0 0 60px #ffffff1a; + opacity: 0; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 0736d35..825c39e 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -29,6 +29,7 @@ outline: 0.3125em auto -webkit-focus-ring-color !important; } .layout-header { + width: 100%; z-index: 10; position: relative; margin-bottom: 0; diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 2a0f360..bb3bfe5 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -255,25 +255,25 @@ ul.button-mid{ &,& .jp-jplayer{ @media(min-width:1801px){ .ad-overlay{ - bottom: 20%; + bottom: 50%; position: absolute; } } @media screen and (min-width:1451px) and (max-width:1800px){ .ad-overlay{ - bottom: 20%; + bottom: 50%; position: absolute; } } @media screen and (min-width:1281px) and (max-width:1450px){ .ad-overlay{ - bottom: 20%; + bottom: 50%; position: absolute; } } @media screen and (min-width:1026px) and (max-width:1280px){ .ad-overlay{ - bottom: 20%; + bottom: 40%; position: absolute; } } diff --git a/home/header.html.erb b/home/header.html.erb index dee11d9..1302be3 100644 --- a/home/header.html.erb +++ b/home/header.html.erb @@ -19,7 +19,7 @@