JavaScriptでInternet Explorer 11を判定する

JavaScriptでInternet Explorer 11を判定するときの書き方をメモしておきます。

const ua = navigator.userAgent;
if(ua.indexOf('Trident') !== -1) {
//IE 11のときの挙動
}

判定条件がMSIEではなくTridentになっているところがポイントです。

jQueryでHTMLファイル内にあるリンクのリストを作る

HTMLのサイトマップなどからリンクを抜き出して一覧を作る方法です。
URLのリストなどをExcelで作りたいときなどに便利です。

続きを読む

Velocity.jsでCSSのプロパティと値を丸ごと変数にする方法

Velocity.jsでアニメーションさせるCSSのプロパティとその値を丸ごと変数に入れて動かす方法を調べました。

当初

<button class="btn">translateX:"+=100"</button>

となっているHTMLからjQueryで

var val = "{"+$(".btn").html()+"}";

として値を取得しそのままVelocity.jsで使おうとしていたのですが、動きませんでした。

以下のようにHTMLを変更し、splitで分割しブラケット記法にした変数に代入すると丸ごと変数を利用できます。

HTML

<button class="btn">translateX:+=100</button>

あとでブラケット記法にした変数に代入する際に自動的にクオーテーションが追加されるので値のクオーテーションをとりました。

JS

$(".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でtrのdisplayをblock,noneで表示/非表示させる時に発生する問題の解決法

jQueryでtableタグの中のtrをdisplayでblock,noneを切り替えて、表の行の表示非表示を行おうとすると、trをdisplay:blockにした時にテーブルの表示が崩れてしまいます。その解決法です。

続きを読む

特定の要素に吸着させるjQueryプラグイン

ページをスクロールしている時に、特定の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の値が、スナップが発動するための閾値になります。
大きい値にすると、要素から離れていても吸着するようになります。