'js'

assets/javascripts/app.js

@@ -64,78 +64,6 @@
       //   }
       // },
 
-      // nav: {
-        // 自適應使用的下拉選單
-        // setDropdown: function() {
-        //   var $caret1 = $('<i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i>');
-        //   var $caret2 = $('<i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i>');
-        //   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 ) {
+        // if ( $('.modules-menu i').length == 0 ) {
-          orbit.MobileMenu();
+        //   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 handleHover() {
-      function() {
+      if ($(window).width() > 769) {
-        $(this).children('ul').addClass('show');
+        $('li').off('mouseenter mouseleave').hover(
-      },
+          function() {
-      function() {
+            $(this).children('ul').addClass('show');
-        $(this).children('ul').removeClass('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) {
 

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;
+  }
+}

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;

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;
           }
     }

home/header.html.erb

@@ -19,7 +19,7 @@
 </div>
 <header class="navbar layout-header no-print" role="navigation">
 
-  <div class="outdropdowns">
+  <div class="outdropdowns kenjohn">
   <div class="container dropdowns">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">

home/index.html.erb

@@ -9,6 +9,7 @@
   <%= render_orbit_bar %>
   <div class="background" data-pp="100"></div>
   <%= render_header %>
+  <div class="downIcon" ><a href="#onesection" title="移動到第一個區塊"><span><span style="opacity: 0;">down</span></span></a></div>
   <div class="no-print single-child-datapp homebanner text_marqueewrapper" data-pp="999"></div>
   <div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div>
   <div class="layout-content2 topcontent">