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

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

ただいまの
回答率

90.84%

  • JavaScript

    14833questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6163questions

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

  • HTML5

    3618questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1863questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

[wow.js] PC / SPの切り替えで該当文字列の書き換えを行いたいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 201

MNZ

score 20

現在wow.jsというプラグインを使って、可視領域に入ったらフェードインさせるサイトを構築しています。
こちらのプラグインはPC/SPで数値を切り替える方法がないので、少々困っております。

PCとSPでjsで数値を書き換える方法を知りたいのですが、検索の仕方が悪いのかなかなか出てきません。

具体的には、例えばPCだと
<h2 class="wow fadeIn" data-wow-offset="250">

のところを

SPだと
<h2 class="wow fadeIn" data-wow-offset="100">

に書き換えたいのです。
data-wow-offsetの中の数字を書き換えられればいいのですが、どなたか良い方法をご存知の方いらっしゃいましたら教えていただけますと幸いです。

ご確認のほど、よろしくお願いいたします。

自分で書いてみたJSを記載しておきますので、ご協力のほどよろしくお願いいたします。

<script>
 $(function(){

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

    var str = 'data-wow-offset="250"';
    var result = str.replace( '250', '100' );
    console.log( result );

 }
 });
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/15 20:52

    jQuery使ってるんですね。ちょっと回答追記します。

    キャンセル

  • MNZ

    2018/04/15 22:53

    書いてみたのですが、反応しなかったので、テスト環境のURLご用意しました。解決したら削除しますので、ご確認いただけますと幸いです。ご確認のほどよろしくお願いいたします。

    キャンセル

  • MNZ

    2018/04/16 06:06

    数値を調整したらPC/SPで切り替えなくてもいい塩梅でできたのですが、今後のために引き続きJSで切り替える方法を教えて頂けますと幸いです!よろしくお願いいたします!

    キャンセル

回答 1

checkベストアンサー

0

あまり要素自体を全て対象にreplaceは好ましくありません。
wow.jsには共通のwowというClassをつけるようですので、
そのエレメントに対して指定しましょう。

※未検証。おおよそ流れがわかればと

window.onload = function() {
  var wowele = getElementsByClassName("wow");
  var woffset = 250;
  if(sp){ //spと判定されるフラグ
    woffset =100;
  }
    wowele.dataset.wow-offset=woffset ;
}
jQuery版
$(function(){
  var woffset = 250;
  if(sp){ //spと判定されるフラグ
    woffset =100;
  }
  $(".wow").data("wow-offset",woffset ),
});


初期値250で入れておいてください。 
値を書き換えるともしかしたらプラグインがキャッシュしている値とかが変わらない可能性があるのでload時にセットする形をとっていますが、確実に反映できるかどうかは確認してみてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/15 22:49 編集

    書いてみたんですが、反応しなかったです。。
    テスト環境のURLとIDとPWを記入しておきましたので、ご確認いただけますと幸いです。
    JSは</body>直前に書いてます。

    キャンセル

  • 2018/04/16 09:06

    一部制限がある特殊な環境のためか、確認できないので、
    できれば現在のコードを質問本文に反映いただけますか?
    「反応しない」では何が起きているか分からないので、
    具体的に記述願います(ブラウザ開発ツールのコンソールにエラーが出てないかとか)

    そもそも後から値を書き換えるやり方なので、
    明示的にプラグインを呼び出すとかしないとdata属性の情報を正常に取得できないかもしれませんね。
    回答最後に置いた「[jQuery] data属性を動的に変更する場合の注意点」については読んで試してみました?

    キャンセル

  • 2018/04/16 09:11

    PHPとかサーバー側の言語で切り替えた方が確実には思います。
    お使いの環境が良く分かりませんが。

    キャンセル

  • 2018/05/09 18:58

    すみません、お日にち空いてしまいました。。
    こちら今回いい塩梅具合の内容で承認されたため解決に至りました。
    ただ、mts10806様のご意見でかなり助けられましたので、ベストアンサーとさせていただきます。
    ご協力頂きましてありがとうございました!

    キャンセル

  • 2018/05/09 20:01

    解決に至れたようで何よりです。

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    Javascriptでuseragent判定

    iOSアプリからWebページの方にアクセスがあった場合にuseragentを使用して判別し、画像の出しわけをしたいと考えてます。 当初は以下のコードのようにPHPで実装していたの

  • 解決済

    「Mobile Bookmark Bubble」で出すポップアップの表示をsafariだけにしたい。

    実現したいこと iPhoneの「safari」で、ホームに追加を促すjqueryの「Mobile Bookmark Bubble」を追加したいのですが、 その際に、「Chrom

  • 解決済

    CSS3のfilterがIEで効かない場合について

    わかる方教えてください。 最終的にやりたいことは、imgタグに半透明の黒のフィルタをかけたいです。 ただし、imgタグを囲むボックスや、その:after等にrgbaを付けたりす

  • 受付中

    アクセス許可ついて

    クロム、FireFoxではアクセスを許可し、IEからのアクセスを許可するようなコードを教えていただきたいです。

  • 解決済

    画像の移動

    blueball.gifという画像をアンカーから移動させるプログラムを書いたのですが、画像が動きません。スマホでプログラミングしました。テキストエディタはQuickEditというア

  • 解決済

    htmlでレイヤーを動かしたい

    <script type="text/JavaScript"> var brver; // ブラウザのバージョン var NN6; // NN6.0以上なら true var IE

  • 受付中

    拡大しながらフェードインするスライドの方法について

    http://yurixxx8.hatenablog.com/entry/2017/02/05/022049 のサイトのコードをサンプルに作成したのですが、 以下がうまくいきません

  • 受付中

    スマートフォン表示の時のみ target="_blank" を使いたい

    前提・実現したいこと パソコン表示の時はそのままウィンドウに表示し、スマートフォン表示の時のみ target="_blank" を使いたいのですが可能でしょうか? lightbox

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

  • JavaScript

    14833questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6163questions

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

  • HTML5

    3618questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1863questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。