質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1913閲覧

レスポンシブデザインを使用するさいのJqueryについて教えてください。

TChanger

総合スコア69

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/03/24 02:05

JQuery経験3ヶ月の初心者です。

現在1枚ページのWEBサイトを作成しているのですが、5箇所のページ内リンクがあります。

JQueryにて、スクロール時に各リンクの場所に近づいたら、
ナビゲーションの各メニューの色を替えたり、
リンク先がフェードで表示される
などの機能を頑張って(頑張らないと出来ないレベルです。汗)つけました。

そして、ここからが質問なのですが、
JQueryにてナビゲーションバーのメニューにマウスを持って行くと、
hover()で英語と日本語に切り替えるようにしたのですが、
これをタブレットで見た時に、
hover()は意味が無くなることは当然ですが、
メニューをタップした時に、リンク先には移動するのですが、
何故かaddClass()でタップしたメニューと、その隣のメニューまでも色が替わってしまいます。

エージェントを分けてやればいいのではないか?と思ったのですが、
PHPの様にざっくりと「PC」「タブレット」「スマホ」のように判定するソースが見つけられませんでした。

そこで画面サイズで判定させてみたのですが、
結局セレクタでclassに対して直接指定しているせいか、
意味がありませんでした・・・

どのようにしたら上手くタブレットやスマホに対応させることが出来るのか、
レスポンシブに対するJQueryの使い方を踏まえご指導のほど宜しくお願いします。

因みに見られたら恥ずかしいコードを載せさせて頂きます。

lang

1//最初に表示されるリンクのメニューに色をつける。 2 var nav = $('#header'), 3 navTop = nav.offset(); 4 $('#nav a:nth-of-type(1)').addClass('navBg'); 5 6//ナビゲーションのhoverで文字切り替え 7 if ($(window).width() > 767) { 8console.log('test'); 9 $("#nav .ali01").hover(function(){ 10 $("#nav .ali01").html("ようこそ"); 11 },function(){ 12 if($(document).scrollTop() > 1010) { 13 $("#nav .ali01").html("HOME"); 14 } 15 }); 16 $("#nav .ali02").hover(function(){ 17 $("#nav .ali02").html("サイト"); 18 },function(){ 19 if($(document).scrollTop() < 1010 || $(document).scrollTop() >= 2100) { 20 $("#nav .ali02").html("SITE"); 21 } 22 }); 23 $("#nav .ali03").hover(function(){ 24 $("#nav .ali03").html("作品"); 25 },function(){ 26 if($(document).scrollTop() < 2100 || $(document).scrollTop() >= 3560) { 27 $("#nav .ali03").html("GALLERY"); 28 } 29 }); 30 $("#nav .ali04").hover(function(){ 31 $("#nav .ali04").html("私について"); 32 },function(){ 33 if($(document).scrollTop() < 3560 || $(document).scrollTop() >= 5000) { 34 $("#nav .ali04").html("ABOUT"); 35 } 36 }); 37 $("#nav .ali05").hover(function(){ 38 $("#nav .ali05").html("お問い合わせ"); 39 },function(){ 40 if($(document).scrollTop() < 5000) { 41 $("#nav .ali05").html("CONTACT"); 42 } 43 }); 44 45//スクロール時ヘッダーナビゲーション固定 46 $(window).scroll(function () { 47 var scrPoint = $(document).scrollTop(); 48 $('#scVal').val(scrPoint); 49 navTop.top; 50// console.log(navTop.top); 51 if($(window).scrollTop() > navTop.top) { 52 nav.addClass('fixed'); 53 } else { 54 nav.removeClass('fixed'); 55 } 56 57//最初に英語にしておく 58 $("#nav .ali01").html("HOME"); 59 $("#nav .ali02").html("SITE"); 60 $("#nav .ali03").html("GALLERY"); 61 $("#nav .ali04").html("ABOUT"); 62 $("#nav .ali05").html("CONTACT"); 63 64//ナビゲーションの色の切り替え 65 if(scrPoint <= 1010 ) { 66 $('#nav a:nth-of-type(1)').addClass('navBg').siblings().removeClass('navBg'); 67 $("#nav .ali01").html("ようこそ"); 68 } else 69 if(scrPoint > 1010 && scrPoint <= 2100) { 70 $('#nav a:nth-of-type(2)').addClass('navBg').siblings().removeClass('navBg'); 71 $("#nav .ali02").html("サイト"); 72 } else 73 if(scrPoint > 2100 && scrPoint <= 3560) { 74 $('#nav a:nth-of-type(3)').addClass('navBg').siblings().removeClass('navBg'); 75 $("#nav .ali03").html("作品"); 76 } else 77 if(scrPoint > 3560 && scrPoint <= 5000) { 78 $('#nav a:nth-of-type(4)').addClass('navBg').siblings().removeClass('navBg'); 79 $("#nav .ali04").html("私について"); 80 } else 81 if(scrPoint > 5000) { 82 $('#nav a:nth-of-type(5)').addClass('navBg').siblings().removeClass('navBg'); 83 $("#nav .ali05").html("お問い合わせ"); 84 } 85 }); 86 87 88//スクロール時のコンテンツ表示 89 var setElm = $('.scrEvent'), 90 delayHeight = 120; 91 setElm.css({display:'block',opacity:'0'}); 92 $('html,body').animate({scrollTop:0},1); 93 $(window).on('load scroll resize', function(){ 94 setElm.each(function(){ 95 var setThis = $(this), 96 elmTop =setThis.offset().top, 97 elmHeight =setThis.height(), 98 scrTop = $(window).scrollTop(), 99 winHeight = $(window).height(); 100 if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) { 101 setThis.stop().animate({opacity:'1'},500); 102 } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){ 103 setThis.stop().animate({opacity:'0'},500); 104 } 105 }); 106 }); 107} 108

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ユーザーエージェントはPHPでもJSでも一緒なので、判定できますよ。
今回のようにタッチ操作ができるか否かなら、それを判定することもできます。
var isTD = (document.ontouchstart !== undefined)? true : false;

投稿2015/03/24 06:18

hami

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TChanger

2015/03/24 07:13

早速の回答を感謝致します! そんな方法があるんですね!いやはや調べ方も下手なものでして・・・ タッチが出来るのは概ねタブレットやスマホですもんね! 勉強になりました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問