jQuery:DOM要素にデータを持たせる
2017.04.12
FlashでActionScriptを書く際によく使っていたものなのですが、インスタンスに変数などのデータを持たせることができます。
例えば複数のインスタンスの状態を管理するとき、配列などで管理しなくてもそれぞれのインスタンスに直接変数を持たせておけばよいので直感的にできます。

探してみたところJavaScriptにもあるようで、こちらはDOM要素にデータを持たせることができます。要jQueryです。


■格納
jQuery.data(elem, name, value)

(例)jQuery.data($("#target").get(0), "color", "red");


■取得
jQuery.data(elem, name)

(例)jQuery.data($("#target").get(0), "color");
  // red


実はJavaScriptを使い初めた頃に困ってたことでもあるので、便利に使っていこうと思います。
| コメント(0)
ユーザーエージェントでSafariを判別する際の注意点
2015.07.15
以前も引っかかったことのある問題なので、忘れないよう書いておこうと思います。

JavaScriptでユーザーエージェントを取得してSafariを判別したい場合、
以下のようになります。
※2016.9.9 ソースの括弧が多かったので修正しました

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1){
// ここにSafari用の記述
}

一見正しそうですが、実はこれだと問題が・・。
Google Chromeのユーザーエージェントを見てみます。

例)
Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

そこにはSafariの文字が!
ですので上記の振り分けだと、Chromeまで対象になってしまいます。
Safariのみを対象にする場合はChromeを除外して、

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1){
// ここにSafari用の記述
}

とすることで実装できます。
| コメント(0)
jQuery:Android 4.Xで高さが上手く取得できない
2015.03.11
詳しく調べていないのでメモ書き程度ですが、
Android 4.Xのデフォルトブラウザで遭遇した現象について。
INFOBAR A02だけの問題という可能性もあります。


・ページ読み込み時に $(window).height() でウインドウの高さを取得しようとした

・$(function(){ ... }); で取得すると、実際の高さからアドレスバーを引いたくらいの
 高さが取得される

・$(window).bind('load', function(){ ... }); で取得すると正しい高さが取得できる


Android 2.Xでは1つ目の記述で大丈夫でした。

| コメント(0)
JS:setIntervalを開始時にも実行
2014.12.09
setIntervalに記述した処理は、指定した秒数後に初めて実行されますが、開始時にすぐさま実行させたい場合があると思います。
今までは関数にしておいてsetIntervalと同時に呼び出したりしていましたが(大した手間ではないので)、やっぱり余計な記述はないほうが良いので調べてみました。

setInterval((function hoge() {
  // ここに処理を記述
  return hoge;
}()), 1000);

上記のように書くことで即時実行させることができます。

ソースは下記のサイト様より。
arguments.callee についても書かれていて参考になりました。

setIntervalをaruguments.calleeを使わずに0秒でも発火させる

| コメント(0)
ブラウザの戻るボタンで戻った時、画面の状態も残っている
2014.12.03
あるページAからfancyBoxのようなモーダルウィンドウを開いたままページBに移動した後、
ブラウザの戻るボタンでページAに戻ったところ、モーダルウィンドウが開いたままになっていました。
SafariとFirefoxで起こるようです。

下記のサイトで詳しくまとめられていました。

SafariとFirefoxでブラウザバック(戻るボタン)を押した際、前のページの画面効果残っている件ついてを解説

JS等のスクリプトの実行状況をキャッシュしてしまうそうです。
<header>内に下記の記述をすることで解決できます。

■通常の記述
<script type="text/javascript">
window.onunload = function(){};
</script>


■jQueryを利用した場合
<script type="text/javascript">
$(window).bind("unload",function(){});
</script>
| コメント(0)