JavaScript
JS:setInterval()やsetTimeout()で指定する関数に引数を渡す
2013.06.12
久しぶりにJavaScriptを書いていて少し迷ったところ。
setInterval()やsetTimeout()についてです。


var sample = setInterval( intervalEvent, 1000);

例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、

var sample = setInterval( intervalEvent(data1), 1000);

と普段通り書いても上手くいきません。

次のように書くことで引数を渡すことができます。


1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。

var sample = setInterval( function(){ intervalEvent(data1); }, 1000);


2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、

var sample = setInterval('intervalEvent('+ data1 +')', 1000);
| コメント(2)
「DD_belatedPNG」IE6で1pxずれる解決方法
2012.02.20
以前このグラビカでも「DD_belatedPNG」を紹介する記事を紹介していました、
pngをIE6に対応させるためのJS「DD_belatedPNG」について注意点です。

CSSでマウスオーバーを表現させたい場合、
通常時とオーバー時の画像をつなげて、aタグの背景に指定し、
hoverで画像をスライドさせる方法があります。
png画像を使用した場合、IE6で正しく表示されないため
DD_belatedPNGを使用します。

が、、、、
上記のような場合、aタグの縦幅(height)が、奇数だと、
IE6で、オーバー画像が1px余分にスライドしてしまい、
画像がずれたような表現になってしまいます。
背景の位置指定では調節できないようです。
なんでか全くわかりませんが、
縦幅を偶数にすることで解決できます。

きみのために入れてるのにわがまま言うなよ。。。(;´_`;) ハァ・・

| コメント(0)
JS:自身の設置URLを取得
2012.02.15
JavaScript内に相対パスを記述すると、
そのJavaScriptが読み込まれるHTMLからの相対パスになります。

同じJavaScriptを複数のページで使うような場合、
相対指定だとページごとにパスが変わってしまうため上手くいきません。

そういうとき、
JavaScript自身の階層を取得し、
自分からの相対パスにするスクリプトを探してみました。

こちらのサイトで紹介されています。

Tipsというかメモ
JavaScript :: 自分自身が設置されているURLを取得する


| コメント(0)
Flash:ブラウザのスクロール状態を取得(修正版)
2012.01.18
以前書いた、
Flash:ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。

JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。

修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。

デモ
ダウンロード

取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。


| コメント(0)
JS:履歴に残らないページ移動
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箇所に書く点に注意です。
| コメント(0)
IE+JavaScriptで#02050aが透過されるバグ
2010.07.15
JavaScript(jQuery)を使って画像をフェードさせていたところ、
フェード中のいくつかの画像に白い点々が出ているのを見つけました。
(ディスプレイのドット落ちのような・・)

調べてみたところIEのバグのようです。
いろいろな方の記事で書かれているのを見ると、
発生条件は以下のような感じ。

・JavaScript の filter:alpha(opacity); を使用
・JPEG画像を使用
・#02050a の色を使用

要するに、#02050a を含むJPEG画像をJSで透過させると、
#02050a の箇所だけが完全に透過JPEGになってしまう、
というバグのようです。IEのみ。

解決策としては

1. PNG画像などにする
2. #02050a を使わない
3. 背景色を #02050a にする

となりますが、
何故かPNG画像にしただけでは直らず・・
結局、PNG画像 + #02050a の部分を別の色で塗りつぶすことで
解決しました。

ちなみにIE6の頃からあったようですが、IE8でも確認しました。。
| コメント(0)
JS:アンカーリンクをスクロールに
2010.03.25
ページ内のアンカーリンクをスムーズにスクロールさせる
JavaScriptのメモです。
ページの組み方のせいか、普段から使っているsmooth.pack.jsが思うように動作しなかったので、他の使いやすそうなJSを探してみました。

smoothScroll.js
使い方はsmooth.pack.jsと同じで、<head></head>内で読み込むだけ。
動作の問題も回避できました。

スクロールの挙動が違うので好みの問題になると思いますが、
様子を見て使い分けて見ようと思います。
| コメント(0)
JavaScriptのバージョンについて
2009.06.04
先日少し話題になったのでまとめてみました。
JavaScriptのバージョンについてです。

実は自分はあまり気にしたことがなかったんですが、JavaScriptにもちゃんとバージョンがあります。
(自分でコードを書いたりしないので、あまり意識していなかった・・。)

JavaScriptのバージョンが新しいからといって、古い機能がなくなるということはほとんどないそうです。


普段使うように、
<script language="javascript" src="aaa.js" ></script>
と書く分には、特にバージョンを気にする必要はないですしね。

ですが、実際はブラウザごとにサポートしているバージョンは異なっていて、
それよりも新しいバージョンの機能を使うとエラーが出てしまいます。


先ほどのタグの「 language="javascript" 」の部分、ここにバージョンを書くことで、
それより新しい機能を無視することができます。

(例)<script language="javascript1.5" src="aaa.js" ></script>

エラーが出ないように書いておくといいかもしれません。


ブラウザごとの対応バージョンはこちら、DIASPARさんのところでまとめられています。
参考にさせていただきました。
| コメント(0)
lightbox、エリア外の半透明部分の設定
2009.01.07
lightboxを使って画像をポップアップさせたとき、エリアの外はデフォルトでは半透明の黒が敷かれるのですが、そこを変えてみました。

カラーは、lightbox.css内にある「 #overlay 」の背景色を変更することで変えることができます。

同じようにして、不透明度も変えられるだろうと思ったのですが・・
どうやら、ここでは設定できないようです。

不透明度のほうは、lightbox.jsの320行目にある

new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

最後の to: の部分で設定できました。
この場合は0.8なので不透明度80%です。
| コメント(0)