WordPressのテーマディレクトリ(フォルダ)の中にJavaScriptや画像を置いて表示させたい場合に、テーマ内でテーマのURLを自動的に表示できると便利です。
Google ChromeでWeb開発する際にいつまでもキャッシュが残って更新内容が表示されない場合があります。このような場合に便利なのがハードリロードです。
続きを読む
jQueryをES6でimportしているのにもかかわらず、プラグインをimportしたときにjQueryのエラーが出る場合の対策です。
Uncaught ReferenceError: jQuery is not defined自分のケースではfeatherlightというプラグインをrequireして実行するとChromeで上記のエラーが出ました。
続きを読む
JavaScriptでInternet Explorer 11を判定するときの書き方をメモしておきます。
const ua = navigator.userAgent;
if(ua.indexOf('Trident') !== -1) {
//IE 11のときの挙動
}
判定条件がMSIEではなくTridentになっているところがポイントです。
HTMLのサイトマップなどからリンクを抜き出して一覧を作る方法です。
URLのリストなどをExcelで作りたいときなどに便利です。
Velocity.jsでアニメーションさせるCSSのプロパティとその値を丸ごと変数に入れて動かす方法を調べました。
当初
<button class="btn">translateX:"+=100"</button>となっているHTMLからjQueryで
var val = "{"+$(".btn").html()+"}";として値を取得しそのままVelocity.jsで使おうとしていたのですが、動きませんでした。
以下のようにHTMLを変更し、splitで分割しブラケット記法にした変数に代入すると丸ごと変数を利用できます。
<button class="btn">translateX:+=100</button>あとでブラケット記法にした変数に代入する際に自動的にクオーテーションが追加されるので値のクオーテーションをとりました。
$(".btn").on('click',function(){
var opt = $(this).html().split(":");//コロンで値を分割して配列optに代入
var val = {};//ブラケット記法のための変数
val[opt[0]] = opt[1];//プロパティに対してその値を代入
$(this).velocity(
val ,
"easeInSine",
);
});button要素をクリックすると、クリックしたボタンがX軸方向に100px移動します。
jQueryでtableタグの中のtrをdisplayでblock,noneを切り替えて、表の行の表示非表示を行おうとすると、trをdisplay:blockにした時にテーブルの表示が崩れてしまいます。その解決法です。
ページをスクロールしている時に、特定のdivの冒頭にぴたっと吸着（スナップ）させたい。というような時に使えるjQueryプラグインがScrollSnap（リンク先で動作を確認できます）です。
使い方としては、ヘッダでjQuery本体とScrollSnapを読み込み、スナップさせたい要素をsnaps:のところで指定します
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script>// <![CDATA[
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
// ]]></script>上のコードの場合、.snap クラスの要素に近づくとスナップします。
また、proximityの値が、スナップが発動するための閾値になります。
大きい値にすると、要素から離れていても吸着するようになります。