2014.12.09
setIntervalに記述した処理は、指定した秒数後に初めて実行されますが、開始時にすぐさま実行させたい場合があると思います。
今までは関数にしておいてsetIntervalと同時に呼び出したりしていましたが(大した手間ではないので)、やっぱり余計な記述はないほうが良いので調べてみました。
setInterval((function hoge() {
// ここに処理を記述
return hoge;
}()), 1000);
上記のように書くことで即時実行させることができます。
ソースは下記のサイト様より。
arguments.callee についても書かれていて参考になりました。
setIntervalをaruguments.calleeを使わずに0秒でも発火させる
今までは関数にしておいてsetIntervalと同時に呼び出したりしていましたが(大した手間ではないので)、やっぱり余計な記述はないほうが良いので調べてみました。
setInterval((function hoge() {
// ここに処理を記述
return hoge;
}()), 1000);
上記のように書くことで即時実行させることができます。
ソースは下記のサイト様より。
arguments.callee についても書かれていて参考になりました。
setIntervalをaruguments.calleeを使わずに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>
ブラウザの戻るボタンでページ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>
2014.11.05
$(document).ready(fn)の実行はCSSが読み込まれた後。
と思い込んでいましたが、実はそんなことはなかったようです。
普通にスタイルシートでページをレイアウトし、
$(document).ready(fn)で要素の位置を取得するようなJavaScriptを書いたのですが、
どうもスタイルが当たる前の位置を取得してしまうようでした。
この時点で
$(document).ready(fn)が実行される = DOMの準備が出来ている = CSSの読み込みも終わっている
という思い込みをしていたのでハマってしまったのですが、
記述の順番次第でCSSの読み込み前にJSが実行されてしまうようです。
英語ですが、こちらのやり取りの中で解説されています。
http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready
CSSの読み込みはJSの読み込みより先に記述しないと保証されないようです。
<link rel="stylesheet" type="text/css" href="aaaaa.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="bbbbb.js">
この順番であれば大丈夫です!
と思い込んでいましたが、実はそんなことはなかったようです。
普通にスタイルシートでページをレイアウトし、
$(document).ready(fn)で要素の位置を取得するようなJavaScriptを書いたのですが、
どうもスタイルが当たる前の位置を取得してしまうようでした。
この時点で
$(document).ready(fn)が実行される = DOMの準備が出来ている = CSSの読み込みも終わっている
という思い込みをしていたのでハマってしまったのですが、
記述の順番次第でCSSの読み込み前にJSが実行されてしまうようです。
英語ですが、こちらのやり取りの中で解説されています。
http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready
CSSの読み込みはJSの読み込みより先に記述しないと保証されないようです。
<link rel="stylesheet" type="text/css" href="aaaaa.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="bbbbb.js">
この順番であれば大丈夫です!
2014.07.09
※14/7/9
いくつか問題点?を確認したため記事下部に追記しています。
ようやく旧IEが減ってきて、これで心置きなく position:fixed が使える・・
かと思いきや、スマホでもiOS4以下やAndroid2.X以下は非対応なので、まだしばらくは対策が必要なようです。
そこで、ブラウザが position:fixed に対応しているかを確認できるJSを探してみました。
position:fixedに対応しているかどうか判定する
こちらで紹介されているJSが簡単そうです。
■ダウンロード
GitHubのページに行ってダウンロードします。
■HTMLに記述
HTMLのヘッダー内に記述します。
jQueryを使用しているので、jQueryも忘れずに。
■実行
同じくヘッダー内にて実行します。
下記のように書くと、対応していれば「true」、非対応なら「false」が返ってきます。
※ここから追記
上記の状態でテストしていて気付いたことがありました。
・ページがスクロールバーの出ない長さの場合、非対応でも「true」が返ってくる(iOS4/Android2.X)
・スクリプト実行時にスクロール位置がページ最上部(X=0)の場合、非対応でも「true」が返ってくる(Android2.X)
ちょっとこのままでは十分に使えそうにないので、
何かしら対応できないか試してみようと思います。
いくつか問題点?を確認したため記事下部に追記しています。
ようやく旧IEが減ってきて、これで心置きなく position:fixed が使える・・
かと思いきや、スマホでもiOS4以下やAndroid2.X以下は非対応なので、まだしばらくは対策が必要なようです。
そこで、ブラウザが position:fixed に対応しているかを確認できるJSを探してみました。
position:fixedに対応しているかどうか判定する
こちらで紹介されているJSが簡単そうです。
■ダウンロード
GitHubのページに行ってダウンロードします。
■HTMLに記述
HTMLのヘッダー内に記述します。
jQueryを使用しているので、jQueryも忘れずに。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jQuery.support.fixedPosition.js"></script>
■実行
同じくヘッダー内にて実行します。
下記のように書くと、対応していれば「true」、非対応なら「false」が返ってきます。
<script>
$(function(){
alert($.support.fixedPosition);
});
</script>
※ここから追記
上記の状態でテストしていて気付いたことがありました。
・ページがスクロールバーの出ない長さの場合、非対応でも「true」が返ってくる(iOS4/Android2.X)
・スクリプト実行時にスクロール位置がページ最上部(X=0)の場合、非対応でも「true」が返ってくる(Android2.X)
ちょっとこのままでは十分に使えそうにないので、
何かしら対応できないか試してみようと思います。
2014.05.14
ある条件でaタグを無効にする必要がありまして、
JavaScriptで出来そうだけど、さてどのようにしようかな・・
と考えつつ検索していたところ、なんとCSSで実現できるとの記事を発見。
YoheiM .NET
[CSS] CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法
---------------------------
pointer-events : none;
---------------------------
上記のスタイルを指定することで、
aタグの動作や JavaScript の onClick 等のイベントを無効にすることができます。
今回はレスポンシブなサイトで、
・大画面の時はサムネ + LightBox
・スマホ等の小画面では画像100%表示でクリックなし
という用途で使いました。
レスポンシブ案件が今後増えれば、さらに使いどころが出てくるかもしれません。
しかもIE7以上で動くそうなので安心です!
2016.12.15
盛大に間違えていたようで、IEでは11以上から対応でした。
とても便利なスタイルですが、使用する場合は対応ブラウザと相談になりそうです。
ご指摘があり修正しました。
誤った情報を掲載してしまい申し訳ありませんでした。
JavaScriptで出来そうだけど、さてどのようにしようかな・・
と考えつつ検索していたところ、なんとCSSで実現できるとの記事を発見。
YoheiM .NET
[CSS] CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法
---------------------------
pointer-events : none;
---------------------------
上記のスタイルを指定することで、
aタグの動作や JavaScript の onClick 等のイベントを無効にすることができます。
今回はレスポンシブなサイトで、
・大画面の時はサムネ + LightBox
・スマホ等の小画面では画像100%表示でクリックなし
という用途で使いました。
レスポンシブ案件が今後増えれば、さらに使いどころが出てくるかもしれません。
2016.12.15
盛大に間違えていたようで、IEでは11以上から対応でした。
とても便利なスタイルですが、使用する場合は対応ブラウザと相談になりそうです。
ご指摘があり修正しました。
誤った情報を掲載してしまい申し訳ありませんでした。