JavaScript : ページの最下部に来た時にイベントを起こす

ページの一番下に到達したことをJavaScriptで拾うには以下のようにする。 $(window).on(‘scroll’, function () { var doch = $(document).innerHeigh…

続きを読む

select2プラグイン

jQueryのselect2というプラグインを用いると簡単にプルダウン式のフォームを装飾することができる。 簡単な例: //html側 <select> <option>りんご</optio…

続きを読む

placeholderをselectboxの値によって入れ替える

jQuery(function ($) { var select_val = $(“selectbox”).val();//selectboxの値を取得します。 if(reason_val == “プランA”) { $(…

続きを読む

jQuery動的に追加した要素にdatepickerを追加するには

動的に追加したinput要素でもdatepickerを動かすclassを設定していても何も起こらないということがありました。 以下のいずれかを指定することで動きました。 $(‘.date’).not(‘.hasDateP…

続きを読む

jQueryの.html, .val, .textの使い分け

jQueryでhtml要素を取得する際に用いる3つの方法の使い分けについて。 .html() 引数をhtmlとして書き換えることができる。つまりなどのタグも書き換えることができる。 .val() 主にフォームの値を取得す…

続きを読む

jQueryで複数の要素を取得してforeachを用いる

jQueryでクラスなどを指定して複数の要素が取得できる場合、それらをforeachでひとつずつ処理する。 $(‘#my_data’).each(function(i,elem){ console.log(i); con…

続きを読む

ブラウザのリサイズ時に特定の幅以下になったらリロードする

以下の記述でリサイズ時800px以下の場合にリロードされるようになります。 $(window).on(“resize”, function() { var w = $(window).width(); if(w <…

続きを読む

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。…

続きを読む

jQuery UI のautocomplete機能

入力リストの候補を表示する時、通常のdatalistだとスマホなどでうまく表示できない場合があるので、かわりにjQuery UI のautocomplete機能を導入した。 下に一例を示す。 var list = [];…

続きを読む

return false、preventDefault()、stopPropagation()

おおまかに書くとこんな感じだそうです。 preventDefault():リンクの遷移などのイベントを無効にできる。 HTMLでリンクの形式になっていても、これが書いてあると踏んでも遷移しないということですね。 stop…

続きを読む

bootstrap-slider スライドさせた後イベントを発火させる

タイトルの通りbootstrap-sliderで作られたスライダーにイベントを付加させるときの書き方です $(selector).slider().on(evnet,function () { //処理 }); 今回は、…

続きを読む

サイドメニューをスライドイン

$(function () { var $nav = $(“.sidemenu”); $(“.JS-navHoverBox”).on({ “mouseenter”: function(){ $nav.stop().ani…

続きを読む

アンカーリンクをスムーススクロール

$(function () { $(‘a[href^=#]’).click(function() { var speed = 400; var href= $(this).attr(“href”); var target…

続きを読む

ページトップへ戻るボタン

デモ https://usanoko.github.io/pagetopbtn/ HTML <!– jQuery本体を読み込む –> <script type=”text/javascript” s…

続きを読む

jQuery.post()とjQuery.ajax()

jQueryの日本語版リファレンスには、「$.postは$.ajaxの略記です」とあります。パッと見では理解できなかったのですが、それほどややこしい話でもありませんでした。 jQuery.post()は以下のように使いま…

続きを読む