javascript

[javascript]リンクをクリック時の点線を消す

<a href="#" onfocus="this.blur()">サンプル</a>

で、リンクの点線を消すことができるが、いちいち全部につけるのは面倒なので javascript で一気にやってしまおうというサンプルがあったのでメモ。

window.onload=function(){
 a=document.getElementsByTagName("a");
 for(i=0;i<a.length;i++){
  a[i].onfocus=function(){this.blur();}
 }
 area=document.getElementsByTagName("area");
 for(i=0;i<area.length;i++){
  area[i].onfocus=function(){this.blur();}
 }
}

this.blur() を使うとタブ移動ができなくなるので、ユーザビリティが悪くなることは言うまでもない。IEはユーザビリティか見た目か割り切る必要がありますね。

==アイコン素材PR==
メニュー表,黒板 お弁当,カゴ,バスケット くるみ,クルミ ピクルス 電話 はちみつ,ハチミツ ワイン樽 フライパン,キッチン用具 映写機 手袋

同じnameのチェックボックスのエラーチェック

同じnameを持つ、チェックボックスのエラーチェック javascript をメモ。

<script>
function check(obj){
 	var flag = true;
 	if(!obj.elements["くだもの"][0].checked && !obj.elements["くだもの"][1].checked){
 		alert('必須項目[くだもの]をチェックしてください');
 		flag= false;
 	}
 	return flag;
 }
</script>
<form method="post" action="send.cgi" onSubmit="return check(this)">
 	<input type="checkbox" name="くだもの" value="りんご" checked /> りんご
 	<input type="checkbox" name="くだもの" value="ばなな" /> ばなな
 	<input type="submit" value=" 送信 " />
 	<input type="reset" value=" 取消 " />
</form>

==PR==
たばこ,吸殻 ファイル,バインダー 豆,さやえんどう ペン,万年筆 車椅子 ろうそく,ロウソク,燭台 椅子,チェアー 傘,パラソル 緑,植物,グリーン,葉,葉っぱ 飛行機,プロペラ機 荷物,小包,プレゼント,ギフト 箱,BOX,小物入れ トランプ リング,指輪 メジャー 看板,プレート フィルム 電球 CD,CD-ROM

javascript:void(0)

a タグの href に javascript:void(0) ってよくみかけるがこれは

<a href="javascript:void(0);">

「void」とは空とか無とかいう意味で、「#」って記述するのと同じでリンクを無効にすること。

とある案件で、input タグや img タグではなく、a タグにCSSを適用させたボタンで javascript のエラーチェックをし、submit させる場合があったのでメモ。

◆HTML
<a href="javascript:void(0)" onclick="CheckCheckBox(); return false;" class="btn fLeft">次へ進む</a>

◆JS
function CheckCheckBox() {
	//エラーチェック処理
	if (〜) {
		//あああああああああああ
	} else {
		document.form.submit();	//サブミット
	}
}

肝は関数呼出し後の return false; で、クロスブラウザ(WEBブラウザの仕様の違いなど)による挙動を合わせる場合に、onclick に関しても、処理が無効となるよう return false; する必要がある。

==PR==
汽車 工具,金槌,ハンマー 絨毯,マット リボン,ラッピング,クリスマス,オーナメント 足ひれ,フィン 色見本,カラーパネル 宝石 ちょうちょ,蝶 めがね,サングラス 柊,植物,クリスマス クーラーボックス 踏み台,椅子 ドア 箱,ギフト,ギフトBOX,プレゼント 剣,刀 ハウス,家 ハット パソコン,PC 手裏剣 めがね

入力フォームをクリックしてサンプルを消す

検索窓や、テキスト入力フォームでデフォルトで文字列を入力しておいて、クリック(フォーカス)すると文字が消える JavaScript のメモ。

今までどうやるんだろーと思ってましたが、調べてみるとあっさりできました。

◆インプットフォームのサンプル
<input name="query" id="searchBox" type="text" value="サイト内検索" onfocus="if (this.value == &#x27サイト内検索&#x27) { this.value=&#x27&#x27 }" onblur="if (this.value == &#x27&#x27) { this.value=&#x27サイト内検索&#x27 }" />

◆テキストフォームのサンプル
<textarea cols="40" rows="15" name="testbox" wrap="virtual" onclick="doclear(&#x27testbox&#x27);">お問い合わせ内容をご入力ください。</textarea>

==PR==
目覚まし時計 金塊 緑,植物,グリーン,葉,葉っぱ, リボン,ラッピング 家,ハウス 椅子,チェアー,ビーチパラソル,ビーチチェア クリスマス,オーナメント,ベル ビン,ボトル,地図 鍵盤,ピアノ 本,BOOK 賞状,リボン,角帽 コルク 緑,植物,グリーン,葉,葉っぱ, フィルム,写真 レンズ,カメラ タンク タイヤ ノート,リングノート ビーチボール,紙風船 地球,地球儀

shadowbox.js

これまでajaxでLightboxを使用していましたが、画像の表示のみでした。

弊社サイトの携帯FLASHゲームの実績紹介ページ用にLightbox風にswfを表示できないかと検索してみました。

世の中便利ですね。
ありました。

「shadowbox.js」

最新バージョンは3.0。
「shadowbox.js」はPrototype、jQueryなど、複数のJavaScriptのライブラリに対応した、swfや動画などを拡大表示できるスクリプトです。

「shadowbox.js」ダウンロード

使い方は至って簡単。
バージョン3.0になって更に簡単に使えるようになった感じです。

shadowbox.js と shadowbox.css を参照して
Aタグに rel=”shadowbox” を追記するだけ。

携帯用画面もshadowboxで見せようとhtmlの表示を試みるがうまくいかない。
よくオプションの解説を見てみると

players: [“html”]

ではなく

players: [“iframe”]

でした!。うっかりうっかり。

◆併用できるJavaScriptのライブラリ

◆対応ブラウザ

  • Internet Explorer 6+
  • Firefox 1.5+
  • Opera 9+
  • Safari 2+
  • Camino

◆対応メディア

  • 画像(PNG, JPEG, GIF)
  • 動画(FLV, QuickTime, Window Media Player)
  • ウェブページ

◆オプション変更

  • ローディング画像の変更
  • フラッシュビデオプレイヤー
  • 背景色
  • 透過度
  • 枠線の形状・色
  • サイズ
  • キーボード操作

etc…

詳しくは「shadowbox.js」のサイトで。

==PR==
印鑑,STOP 地図,世界地図 ペン ハウス,家,レンガ 工具,クレーン ビリヤード ボウリング,ピン ゴルフ,ゴルフクラブ アメリカンフットボール,ヘルメット 爆弾,時限爆弾 ジクソーパズル,ピース ゴルフカート 絞首台,死刑台 男子用便器,トイレ 黒板,ボード カジノダイス テニスコート 音符 リボン,ラッピング 椅子,チェアー

prototype.js と jQuery.js のコンフリクト[JavaScript]

prototype.js と jQuery.js を同時に使用しなければならないサイトがあり、片方が動作していないことに気づく。

JavaScriptのパスを消すと、片方ずつでは動作するのでJavaScriptがコンフリクトしているのかなと思い、ぐぐってみる。

ウェブネタメモ帳-web material memo pad-」さんのサイトを参考にさせていただき解決したのでメモっておく。

jQuery.jsと prototype.jsを同時使用した場合のコンフリクトを回避する方法

記述は”prototype.js”を先に書く。

その後に以下を追記。

<script type="text/javascript"> jQuery.noConflict(); var j$ = jQuery; </script>

その後に
“switch.js”と”scriptaculous.js”を記述。

今回jQueryは”switch.js”を使用しているので
“switch.js”の以下を変更

$(” を “jQuery(” に全置換

これでコンフリクトが回避できました。
参考サイト様に感謝です。

Safari 4 β

Apple Inc.が、世界で最も高速で革新的なMacとWindows PCに対応したブラウザ「Safari 4」のパブリックベータ版をCEOスティーブ・ジョブズ氏の誕生日である2/24に発表した。
 
Safari 4の「Nitro」エンジンは、JavaScriptをSafari 3の4.2倍高速で実行できるそうだ。
Safari 4は、よく訪れるページを視覚的にプレビューできる「Top Sites」、最近訪れたホームページのタイトル、ホームページアドレス、全テキストを検索できる「Full History Search」、ホームページ履歴またはお気に入りをめくるように見ることができる「Cover Flow」、タブを使って閲覧をより簡単に、より直観的に行なうことができる「Tabs on Top」といった機能を搭載している。
 
先日発売のiLife’09のiPhotoにもびびったが、今回のSafari4も凄いね。
さすが我らのアップル。
 
検証ブラウザが増えたのは言うまでもない。
 
 
メモメモ。