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

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

ただいまの
回答率

90.48%

  • jQuery

    6953questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 755

TC4649

score 70

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


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

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

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

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

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

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

因みに見られたら恥ずかしいコードを載せさせて頂きます。
//最初に表示されるリンクのメニューに色をつける。
    var nav    = $('#header'),
            navTop = nav.offset();
    $('#nav a:nth-of-type(1)').addClass('navBg');

//ナビゲーションのhoverで文字切り替え
    if ($(window).width() > 767) {
console.log('test');
        $("#nav .ali01").hover(function(){
            $("#nav .ali01").html("ようこそ");
        },function(){
            if($(document).scrollTop() > 1010) {
                $("#nav .ali01").html("HOME");
            }
        });    
        $("#nav .ali02").hover(function(){
            $("#nav .ali02").html("サイト");
        },function(){
            if($(document).scrollTop() < 1010 || $(document).scrollTop() >= 2100) {
                $("#nav .ali02").html("SITE");
            }
        });    
        $("#nav .ali03").hover(function(){
            $("#nav .ali03").html("作品");
        },function(){
            if($(document).scrollTop() < 2100 || $(document).scrollTop() >= 3560) {
                $("#nav .ali03").html("GALLERY");
            }
        });    
        $("#nav .ali04").hover(function(){
            $("#nav .ali04").html("私について");
        },function(){
            if($(document).scrollTop() < 3560 || $(document).scrollTop() >= 5000) {
                $("#nav .ali04").html("ABOUT");
            }
        });    
        $("#nav .ali05").hover(function(){
            $("#nav .ali05").html("お問い合わせ");
        },function(){
            if($(document).scrollTop() < 5000) {
                $("#nav .ali05").html("CONTACT");
            }
        });    

//スクロール時ヘッダーナビゲーション固定
    $(window).scroll(function () {
        var scrPoint = $(document).scrollTop();
        $('#scVal').val(scrPoint);
        navTop.top;
// console.log(navTop.top);
        if($(window).scrollTop() > navTop.top) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }

//最初に英語にしておく
        $("#nav .ali01").html("HOME");
        $("#nav .ali02").html("SITE");
        $("#nav .ali03").html("GALLERY");
        $("#nav .ali04").html("ABOUT");
        $("#nav .ali05").html("CONTACT");

//ナビゲーションの色の切り替え
        if(scrPoint <= 1010 ) {
            $('#nav a:nth-of-type(1)').addClass('navBg').siblings().removeClass('navBg');
            $("#nav .ali01").html("ようこそ");
        } else 
        if(scrPoint > 1010 && scrPoint <= 2100) {
            $('#nav a:nth-of-type(2)').addClass('navBg').siblings().removeClass('navBg');
            $("#nav .ali02").html("サイト");
        } else 
        if(scrPoint > 2100 && scrPoint <= 3560) {
            $('#nav a:nth-of-type(3)').addClass('navBg').siblings().removeClass('navBg');    
            $("#nav .ali03").html("作品");
        } else 
        if(scrPoint > 3560 && scrPoint <= 5000) {
            $('#nav a:nth-of-type(4)').addClass('navBg').siblings().removeClass('navBg');
            $("#nav .ali04").html("私について");
        } else 
        if(scrPoint > 5000) {
            $('#nav a:nth-of-type(5)').addClass('navBg').siblings().removeClass('navBg');    
            $("#nav .ali05").html("お問い合わせ");
        }
    });


//スクロール時のコンテンツ表示
    var setElm = $('.scrEvent'),
            delayHeight = 120;
    setElm.css({display:'block',opacity:'0'});
    $('html,body').animate({scrollTop:0},1);
    $(window).on('load scroll resize', function(){
        setElm.each(function(){
            var setThis = $(this),
            elmTop =setThis.offset().top,
            elmHeight =setThis.height(),
            scrTop = $(window).scrollTop(),
            winHeight = $(window).height();
            if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) {
                setThis.stop().animate({opacity:'1'},500);
            } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){
                setThis.stop().animate({opacity:'0'},500);
            }
        });
    });
}



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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/24 16:13

    早速の回答を感謝致します!

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6953questions

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