[JS]ページが開いたn秒後に表示

ページがロードされたn秒後に非表示にしてた要素を表示するサンプル。
エフェクトつけてもいい感じ。

<div id="disp" style="display:none">
<a href="http://www.google.co.jp/">Google</a>
</div>
window.onload=function(){
	var count =3000;//表示までの時間(ミリ秒)
	setTimeout("document.getElementById('disp').style.display='block'",count);
}

[JS]フォームボタンまとめ

使用頻度の高いフォームボタンのメモ。
主にJavascriptを使用したものです。

XHTML形式のinputとbuttonの2タイプ用意してみた。
onclickとonkeypressを別のタグ(aとか)に書いても機能します。

ウィンドウを閉じる

<input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" />
<button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button>

“[JS]フォームボタンまとめ” の続きを読む

[JS]季節で画像を変更するスクリプト

季節(4カ月おきくらい)でイメージ画像を自動更新するスクリプトのサンプル。
しかしこの間隔ならスクリプト使うこともない気がする。

<img src="images/00.png" alt="季節で変わります" id="change" width="500" height="200" border="0"/>

変更したい画像にIDをつける。サンプルではchangeとつけた。

“[JS]季節で画像を変更するスクリプト” の続きを読む

[JS]ページが開いたら自動でフォーカスを合わせる

お問い合わせフォームの先頭のテキストエリアとかに、ページが開いた時フォーカスを合わせる方法について。
name、ID、配列の各サンプルを挙げてみる。

name値の場合

window.onload=function(){document.formID.inputName.focus()}

formIDがフォームタグのID値
inputNameがフォーカス合わせるフォームのname値。

bodyでイベントハンドラでもいい。

<body onLoad="document.formID.inputName.focus()">

“[JS]ページが開いたら自動でフォーカスを合わせる” の続きを読む

[JS]ステータスバーテキストを非表示にする

通常ステータスバーにはリンク先のURLが表示されるが、それを表示しないようにするスクリプトのサンプル。
事情はどうあれ、フィッシングに使われる手法なので使用には注意が必要。

昔リンクの説明などをステータスバーに表示させたり、ムダにスクロールするようなエフェクトつけるのが流行ったが、
ツールチップが広まった現在はセキュリティが下がるとして敬遠されるテクニックになっている。

なおステータスバー関連のスクリプトは、ブラウザのセキュリティ(Javascript詳細)設定で
「ステータスバーのテキストを変更しない」というものがONになっていると、スクリプトの内容に関係なくスルーされる。

IE系はOFF(設定すら存在しない)。
FireFoxは上記設定がデフォルトでON。
SleipnirもたぶんON(スルーされる)
GraniはOFF。
OperaはOFFだが挙動がちょっと違う(テキスト変更は出来るが、URLが表示されてから指定したテキストが表示されるので完全非表示にはならない様子)
Safariもスルーされる。
“[JS]ステータスバーテキストを非表示にする” の続きを読む

[JS]フォーカスされたらinputのvalue値を消す

検索とかURLのテキストエリアなんかで使われることが多い。
マウスフォーカスで、あらかじめ表示してあるvalueを非表示にするスクリプト。
このブログテーマの検索で使われてます。

value="Keyword(s)" onblur="if (this.value == '') this.value = 'Keyword(s)';" onfocus="if (this.value == 'Keyword(s)') this.value = '';"

以上をinputタグに追加する。
onblurでマウスが離れた時、onfocusでマウスフォーカスされた時、それぞれ設定。
valueで指定されている文字列と同じにする必要がある。

[JS]ロールオーバースクリプト(画像名のOn/Offで判別)

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

“[JS]ロールオーバースクリプト(画像名のOn/Offで判別)” の続きを読む

[JS]ロールオーバースクリプト(ソース変更なし)

HTML側の変更なしで、メニュー内の画像を全部ロールオーバーさせるスクリプトを作ってみた。
relにしろclassにしろイベントハンドラにしろ、ロールオーバーさせるためだけに追加するのは嫌、という時に良いかも。

“[JS]ロールオーバースクリプト(ソース変更なし)” の続きを読む

[JS]見てるページのメニューを変更する(ボタンが画像の場合)

前に書いた記事のクラスを追加するタイプの場合だと、リンクしてるものが文字じゃなくて画像だったりすると画像そのものが変更出来ない。
そんな質問を見つけたので、画像ボタンの場合のものを作ってみた。

基本の判定は同じ(ファイル名とリンクのsrc一致)で、一致した場合クラス追加じゃなくて画像のsrcに_onを追加します。

“[JS]見てるページのメニューを変更する(ボタンが画像の場合)” の続きを読む

[JS]クリックで表示・非表示を切り替える

クリックで指定した要素の表示・非表示を切り替えるスクリプト。
表示エリアを稼ぎたい時に便利。

  <strong onclick="Toggle('A')">Sample</strong>
  <div id="A" style="display:block;">サンプル</div>

初期非表示にしたい場合は、display:noneとしておきます。

クリック時の呼び出しは、上記ソースだとonclickイベント属性でやってますが、
アンカータグの場合は次の例のようにhref属性に入れる事も出来ます。

<a href="javascript:Toggle('A')">Sample</a>

マウスオーバーにしたい時はonmoseoverになります。
これについてはアクションによってイベントハンドラ選んでください。

次のソースを任意の場所に貼り付けます。通常はheadタグ内。

<script type="text/javascript">
<!--
function Toggle(id) {
 div = document.getElementById(id);
 switch (div.style.display) {
  case "none":
   div.style.display="block";
   break;
  case "block":
   div.style.display="none";
   break;
 }
}
//-->
</script>

要素のstyle=”display:block”をnoneに変更することで
表示・非表示を切り替えています。
displayは要素の存在そのものを隠すものなので、noneになった場合は要素が配置されていた空間そのものもなくなります。
空間は維持したいという場合はvisibilityプロパティを使用し、
上記ソースをdiv.style.visibility = "hidden";  とします。

スタイルを違うものにすれば、線をつけるとか太字にするとかも可能です。

[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-

特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。

そういう状況がまさに今日あったので勉強がてら作ってみた。

»サンプル

“[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-“ の続きを読む

[JS]擬似クラス:hoverをtrに適用するjavascript

IEだと擬似クラスの:hoverがaタグにしか適用されないので、aタグ以外のものに:hoverつけたいときに困ることが多い。
:hoverをつける要素にaタグが入って、それがリストのように1行(ないし1ブロック)しかないのなら、aをブロック要素にすることで回避も可能だ。
でもそれだとtrでtdが2つ3つ並んでる状態になったりすると不可能になる。
というわけで、手っ取り早くいくならやはりjavascriptになると思う。

参考にtrの背景色を:hoverで変更するスクリプトを2つ紹介。

“[JS]擬似クラス:hoverをtrに適用するjavascript” の続きを読む

[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

“[JS]Javascriptの有効・無効でCSSを変更する” の続きを読む