2012.02.15
JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
そのJavaScriptが読み込まれるHTMLからの相対パスになります。
同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。
そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。
こちらのサイトで紹介されています。
Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する
JS：自身の設置URLを取得の続きを読む
2012.01.25
変数名を動的に指定できる、
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
2011.12.13
※2014.3.5 追記
LightBox v2.6をお使いの方はこちら。
→ LightBoxのtitleコメント内で改行（v2.6）
Lightboxを使用する際、
aタグのtitleの中に入れた文言を
改行したいようなシチュエーションがあると思います。
そういった場合はどうすればいいかですが、
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ"><img src="sample.gif" alt="sample" /></a>
これで何とかなってしまいます。
ですが、titleの中にHTMLタグを書きたくないと考える方も多いはず、
その場合は、HTMLソースに多少変更を加え、
jquery.lightbox-0.5.jsのほうを弄れば解決できます。
LightBoxのtitleコメント内で改行の続きを読む
2011.11.16
リンクをクリックしてページ移動をする際、
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
