https://www.muroran-princehotel.com/en/common/js/setting_option.js

1/* --------------------------------------------------------
2	[Setting Option]
3-------------------------------------------------------- */
4
5jQuery(document).ready(function() {
6
7	/* アコーディオンメニュー
8	-------------------------------------------------------- */
9	$('.acc_contents').hide();
10	$(".acc_tit").on("click",function(){
11		var acc = $(this);
12		acc.toggleClass("active").next(".acc_contents").slideToggle(300, function(){ acc.siblings('.acc_tit').removeClass('active'); }).siblings(".acc_contents").slideUp(300);
13	});
14
15	var timer = false;
16	var winWidth = $(window).width();
17	var winWidth_resized;
18	var x = 768;
19	var y = 640;
20	if(winWidth <= y) {
21		$('#footer_wrap .acc_contents').hide();
22
23		$('#faq #contents h3.acc_tit').next('div').addClass('acc_contents');
24		$('#faq #contents .acc_contents').css('display','none');
25
26		$('#search_area .acc_tit').next('div').addClass('acc_contents');
27		$('#search_area .acc_contents').css('display','none');
28	} else if(winWidth <= x) {
29		$('#footer_wrap .acc_contents').hide();
30
31		$('#faq #contents h3.acc_tit').next('div').addClass('acc_contents');
32		$('#faq #contents .acc_contents').css('display','none');
33
34		$('#search_area .acc_contents').css('display','block');
35		$('#search_area .acc_tit').next('div').removeClass('acc_contents');
36	} else {
37		$('#footer_wrap .acc_contents').show();
38
39		$('#faq #contents div.acc_contents').css('display','block');
40		$('#faq #contents dd.acc_contents').css('display','none');
41		$('#faq #contents h3.acc_tit').next('div').removeClass('acc_contents');
42
43		$('#search_area .acc_contents').css('display','block');
44		$('#search_area .acc_tit').next('div').removeClass('acc_contents');
45	}
46
47
48
49	jQuery(window).on('resize',function(){
50		// リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)
51		if (timer !== false) {
52			clearTimeout(timer);
53		}
54		// 放置時間が指定ミリ秒以上なので処理を実行
55		timer = setTimeout(function() {
56			// リサイズ後のウインドウの横幅を取得
57			winWidth_resized = $(window).width();
58
59			// リサイズ前のウインドウ幅とリサイズ後のウインドウ幅が異なる場合
60			if ( winWidth !== winWidth_resized ) {
61				// ここにやりたい処理書く
62				if($('.acc_tit').hasClass('active')){
63					$('.acc_tit').removeClass('active');
64				}
65
66				if(winWidth_resized <= y) {
67					$('#footer_wrap .acc_contents').hide();
68
69					$('#faq #contents h3.acc_tit').next('div').addClass('acc_contents');
70					$('#faq #contents .acc_contents').css('display','none');
71
72					$('#search_area .acc_tit').next('div').addClass('acc_contents');
73					$('#search_area .acc_contents').css('display','none');
74				} else if( winWidth_resized <= x) {
75					$('#footer_wrap .acc_contents').hide();
76
77					$('#faq #contents h3.acc_tit').next('div').addClass('acc_contents');
78					$('#faq #contents .acc_contents').css('display','none');
79
80					$('#search_area .acc_contents').css('display','block');
81					$('#search_area .acc_tit').next('div').removeClass('acc_contents');
82				} else {
83					$('#footer_wrap .acc_contents').show();
84
85					$('#faq #contents div.acc_contents').css('display','block');
86					$('#faq #contents dd.acc_contents').css('display','none');
87					$('#faq #contents h3.acc_tit').next('div').removeClass('acc_contents');
88
89					$('#search_area .acc_contents').css('display','block');
90					$('#search_area .acc_tit').next('div').removeClass('acc_contents');
91
92				}
93
94				// 次回以降使えるようにリサイズ後の幅をウインドウ幅に設定する
95				winWidth = $(window).width();
96			}
97		}, 200);
98	});
99
100
101
102	/* sidr 横からスライドメニュー
103	-------------------------------------------------------- */
104	$('#open_menu').sidr({
105		name: 'right-sidr',
106		side: 'right'
107	});
108
109	/* sidrとセットで使用
110	// スマホからの閲覧時、スワイプでメニュー格納
111	-------------------------------------------------------- */
112	// タップ、スワイプ、指を離した時のイベントハンドラ
113	$("#right-sidr").bind("touchstart", TouchStart);
114	$("#right-sidr").bind("touchmove" , TouchMove);
115
116	// タップした位置をメモリーする
117	function TouchStart( event ) {
118		//console.log('tap');
119		var pos = Position(event);
120		$("#right-sidr").data("memory",pos.x);
121	}
122
123	// スワイプ・タップした位置からプラスかマイナスかで左右移動を判断
124	function TouchMove( event ) {
125		var pos = Position(event); //Xを得る
126
127		a = pos.x - $("#right-sidr").data("memory");
128
129		if (a > 50){
130			if( pos.x > $("#right-sidr").data("memory") ){
131					//console.log('right move');
132					jQuery.sidr('close', 'right-sidr');
133			}
134		}
135/*
136		if( pos.x < $("#right-sidr").data("memory") ){
137				//console.log('left move');
138		}else{
139				//console.log('right move');
140				jQuery.sidr('close', 'right-sidr');
141		}
142*/
143		//console.log('移動距離 X='+pos.x + ' , Y=' + pos.y);
144	}
145	// 現在位置を得る
146	function Position(e){

147		var x = e.originalEvent.touches[0].pageX;
148		//var y = e.originalEvent.touches[0].pageY;
149		x = Math.floor(x);
150		//y = Math.floor(y);
151		//var pos = {'x':x , 'y':y};
152		var pos = {'x':x};
153		return pos;
154	}
155
156
157	/* flexslider
158	-------------------------------------------------------- */
159	// フェードでのスライドのみ
160	$('#main_slider').flexslider({
161		animation: "fade",
162		slideshowSpeed: 5000,
163		animationSpeed: 2500,
164		controlNav: false,
165		directionNav: false,
166		touch: false
167	});
168	$('#flexslider_thum').flexslider({
169		animation: "fade",
170		slideshowSpeed: 5000,
171		animationSpeed: 2500,
172		controlNav: "thumbnails",
173		directionNav: false,
174		pauseOnAction: false,
175		touch: true
176	});
177
178	// 固定ページ用：サムネイル付き
179	$('.flexslider_con').flexslider({
180		animation: "slide",
181		slideshowSpeed: 5000,
182		animationSpeed: 800,
183		controlNav: "thumbnails",
184		pauseOnAction: false,
185		touch: true,
186		slideshow: false
187	});
188
189	/* Easy Responsive Tabs
190	   タブ切り替え・同一ページ内復数設置可・レスポンシブ対応（タブ→アコーディオン）
191	-------------------------------------------------------- */
192
193	// 複合バージョン
194	// 親タブ
195	if($('.acc_tab_block_parent').length){
196	$('.acc_tab_block_parent').easyResponsiveTabs({
197		type: 'default',
198		width: 'auto',
199		fit: true,
200		tabidentify: 'acc_tab_group',
201		activate: function(event) { // Callback function if tab is switched
202			var $tab = $(this);
203			var $info = $('#nested-tabInfo');
204			var $name = $('span', $info);
205			$name.text($tab.text());
206			$info.show();
207		}
208	});
209
210	// 子タブ
211	$('.acc_tab_block_child').easyResponsiveTabs({
212		type: 'vertical',
213		width: 'auto',
214		fit: true,
215		tabidentify: 'acc_tab_ver1',
216	});
217	}
218
219	/* matchHeight / 同列にあるブロック要素の高さを揃える・レスポンシブ対応
220	-------------------------------------------------------- */
221	$('.item').matchHeight();
222	$('.column-inner').matchHeight();
223	$('.spot_list section').matchHeight();
224	$('.spot_list h3').matchHeight();
225	$('.block_a').matchHeight();
226	$('.menu').matchHeight();
227
228
229	/* --------------------------------------------------------
230	　電話番号を、PC閲覧時は「span」、スマホ閲覧時には
231	 「class="tel-link"」をつけたアンカータグで囲む
232	-------------------------------------------------------- */
233	/*
234	if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
235		$("a.tel-link").each(function(){
236			$(this).replaceWith("<span>" + $(this).html() + "</span>");
237		});
238	}
239	*/
240
241	/* スムーススクロール
242	-------------------------------------------------------- */
243	$('a[href^="#"]:not(.nosmooth)').click(function(){
244		var speed = 500;
245		var href= $(this).attr("href");
246		var target = $(href == "#" || href == "" ? 'html' : href);
247		var hHeight = '';
248
249		/* ▽ 固定ヘッダーありの場合の処理 ▽ */
250		// ヘッダー固定が解除されるウィンドウ幅
251		var hFixSize = window.matchMedia('(max-width: 600px)');
252		// 固定ヘッダーの高さ
253		if(!hFixSize.matches) {
254			// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
255			hHeight = $('#top_nav').outerHeight() + 20;
256		}
257		/* △ 固定ヘッダーありの場合の処理 ▽ */
258
259		var position = target.offset().top - hHeight;
260		$("html, body").animate({scrollTop:position}, speed, "swing");
261		return false;
262	});
263	/* ----- Setting End ----------------------------------- */
264});
265
266
267jQuery(window).load(function () {
268
269	/* 右下ページトップボタン
270	-------------------------------------------------------- */
271	var Scroll_PgTp = $('#search_area').offset().top + $('#search_area').height() + 200;
272	if( ($(window).height()+$('#btn_backtop').height()) <= Scroll_PgTp ) {
273		$('#btn_backtop').hide();
274	}
275	jQuery(window).scroll(function () {
276		var winscr = $(window).scrollTop() + $(window).height();
277		if ( winscr <= Scroll_PgTp ) {
278			$('#btn_backtop').fadeOut('fast');
279		} else {
280			$('#btn_backtop').fadeIn('fast');
281		}
282	});
283
284	/* メニューボタン
285	-------------------------------------------------------- */
286	var timer = false;
287	var winWidth = $(window).width();
288	var winWidth_resized;
289	var Scroll_Mn = $('#open_menu').offset().top - 5;
290	var Pos_Mn = $('#top_nav').height() + 20;
291	$('#open_menu').css({'top' : Pos_Mn + 'px'});
292	jQuery(window).on('resize',function(){
293		// リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)
294		if (timer !== false) {
295			clearTimeout(timer);
296		}
297		// 放置時間が指定ミリ秒以上なので処理を実行
298		timer = setTimeout(function() {
299			// リサイズ後のウインドウの横幅を取得
300			winWidth_resized = $(window).width();
301
302			// リサイズ前のウインドウ幅とリサイズ後のウインドウ幅が異なる場合
303			if ( winWidth !== winWidth_resized ) {
304				Pos_Mn = $('#top_nav').height() + 20;
305				$('#open_menu').css({'top' : Pos_Mn + 'px'});
306				// 次回以降使えるようにリサイズ後の幅をウインドウ幅に設定する
307				winWidth = $(window).width();
308			}
309		}, 200);
310	});
311
312
313	/* iframeにwmode属性追加
314	-------------------------------------------------------- */
315	var iframe_url = $('#movie iframe').attr('src');
316	$('#movie iframe').attr('src', iframe_url + '&wmode=transparent');
317
318
319	/* ----- Setting End ----------------------------------- */
320
321});