スマホでjavascriptが動かないです

Question

現在HTMLで他のサイトを参考にしてホームページを作っています。
javascriptやjQueryの知識がほぼなく、見よう見まねで作成している状態です。

やりたいことは、以下です。

・ヘッダー画像をスライダーさせる(skippr使用）
・スマホ時にハンバーガーメニューを表示させる

スライダーはPC版では通常に動いていますが、スマホ表示にすると動かないです。
ハンバーガーメニューも表示されているのですが、タップしてもメニューが表示されない状態です。

以下は、htmlファイルに記述しているjavascriptのコードです。

<script type="text/javascript">
$(function(){
				//メインビジュアル
				$("#theTarget").skippr({
						transition: 'fade',
						speed: 1000,
						easing: 'easeOutQuart',
						navType: 'bubble',
						childrenElementType: 'div',
						arrows: false,
						autoPlay: true,
						autoPlayDuration: 5000,
						keyboardOnAlways: false,
						hidePrevious: false
				});
				$('.slick-dots').removeAttr('style');
		   	//スマホメニュー設定
	        $('.menu-trigger').click(function () {
			    		if($(this).hasClass('active')){
								$('.btn-nav--sp').slideUp();
								$(this).removeClass('active');
        			}
		        	else {
								$('.btn-nav--sp').slideDown();
								$(this).addClass('active');
        			}
	        })
	        $('.btn-nav--sp a').click(function () {
						$('.btn-nav--sp').slideUp();
						$('.menu-trigger').removeClass('active');
		    	})
			});
</script>

skipprはレスポンシブル対応とあったので、スマホでも動作すると思うのですが、
見た感じ、スマホ表示にさせたときにjavascriptが動いていないようです。
なぜ、動作しないのかわらからず途方に暮れています。

どうぞご教授下さい。

URLは、以下です。
http://suisankakou.tk/

Comments

[yukihisa]

PC版でもスクロール時の挙動がおかしかったりしますが大丈夫ですか？また、「参考」と「コピー」は違います。せめて命名規則などはきちんと自社の形に変更しましょう。

Answer 1

PCのChromeでスマホサイズの表示にしたときにこういうエラーが出ています。

flipsnap.min.js:1 Uncaught Error: element not found
    at Flipsnap.init (flipsnap.min.js:1)
    at new Flipsnap (flipsnap.min.js:1)
    at Flipsnap (flipsnap.min.js:1)
    at Object.initPortfolio (base.js:131)
    at base.js:170

Uncaught Error: element not foundですから、スマホ表示に切り替わった際、なんらかの必須要素が存在しなくなってしまっているのでしょう。
で、エラーを出しているのはflipsnapです。
たぶんどこかにFlipsnap('セレクタ');みたいな記述をしているはずです。
セレクタで指定している要素が常に存在するか確認してみてください。

追記

軽く解析しました。

initPortfolio: function () {
  if (!this.isSpView) {
    this.flipsnap = undefined;
    $('.about_gallery').width((this.windowWidth + 1) + 'px');
    $('.about_gallery > img').css({width: '20%'});
    return; // スマホ表示でなければここで return している
  }
  var _this = this;
  var total = this.windowWidth * $('.about_gallery > img').length;
  $('.about_gallery').width(total);
  $('.about_gallery > img').width(this.windowWidth);
  this.flipsnap = Flipsnap('.about_gallery');  // スマホ表示だとここにくる

 // 後略

んで、about_galleryなんていうclassを持った要素はどこにも存在しないようですね。
initPortfolioって関数名からして、これどっかのフリーランサーかデザイナかなんかのポートフォリオサイトを丸コピしてきた感じですかね。

追記2

解決済みですが追記します。

<span id="btn-nav__sp" class="menu-trigger"></span>
JSの方で書いてるセレクタが間違ってるだけだと思いますよ。
.btn-nav--spではなく#btn-nav__spです。

Comments

[you34]

ありがとうございます！
エラーを解決したところ、スライダーは動きました！

あとは、ハンバーガーメニューが開かないのみです。。

[you34]

ひとまずハンバーガーメニューは、もう一度、作り直してみます。
ありがとうございました！

Answer 2

skipprは余り詳しくないので適当なのですが、以下を指定してみるとどうでしょうか。
// 実行タイミングの調整(ready後発火)
$("document").ready(function() {
$("#theTarget").skippr();
});

clickイベントはPCとスマホで動作が異なるようになることが多いです。特にiOSのサファリで良く発生する問題ですね。
マウスカーソルとタッチ操作の処理の違いから起きるみたいで、よく不具合として発生する問題です。

以下のコードではcssでcursor: pointerをクリックさせたい要素に指定し、タッチ操作でもマウスでクリックされたようにjs側で判定させるようにしています。後述のjs方法①と方法②次第ではいらないかもしれません。

js-方法①
クリックイベントのタイプをスマホとPCで切り替えさせています。PCならclick、スマホならtouchstartでイベントを発火させるようにしています。こちらはcssのcursol指定はいらないかもしれません。

js-方法②
クリックイベントのバインド先をルート要素(document)に指定し、バインド先からイベント対象を指定することで対応させています。

cssを指定して方法①か②を指定すれば恐らくできるのではないかと思いますが、出来なければ方法①と②の組み合わせも試してみて下さい。

.menu-trigger, .btn-nav--sp a{
  cursor: pointer;   /* クリックさせたい要素に指定 */
}

// 方法1
// clickイベントでの処理（mouseenter は省略）
var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
$('.menu-trigger').on(clickEventType, function() {
	// クリック、タップ時の処理を記述
});

// 方法2
$(document).on("click", ".menu-trigger", function() {
	// クリック、タップ時の処理を記述
});