担当しているホームページで
「訪問済みのリンクが紫にならない。」
とご指摘を受け、調査。
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 == 'サイト内検索') { this.value='' }" onblur="if (this.value == '') { this.value='サイト内検索' }" />
◆テキストフォームのサンプル
<textarea cols="40" rows="15" name="testbox" wrap="virtual" onclick="doclear('testbox');">お問い合わせ内容をご入力ください。</textarea>
==PR==
目覚まし時計 金塊 緑,植物,グリーン,葉,葉っぱ, リボン,ラッピング 家,ハウス 椅子,チェアー,ビーチパラソル,ビーチチェア クリスマス,オーナメント,ベル ビン,ボトル,地図 鍵盤,ピアノ 本,BOOK 賞状,リボン,角帽 コルク 緑,植物,グリーン,葉,葉っぱ, フィルム,写真 レンズ,カメラ タンク タイヤ ノート,リングノート ビーチボール,紙風船 地球,地球儀
shadowbox.js
これまでajaxでLightboxを使用していましたが、画像の表示のみでした。
弊社サイトの携帯FLASHゲームの実績紹介ページ用にLightbox風にswfを表示できないかと検索してみました。
世の中便利ですね。
ありました。
「shadowbox.js」
最新バージョンは3.0。
「shadowbox.js」はPrototype、jQueryなど、複数のJavaScriptのライブラリに対応した、swfや動画などを拡大表示できるスクリプトです。
使い方は至って簡単。
バージョン3.0になって更に簡単に使えるようになった感じです。
shadowbox.js と shadowbox.css を参照して
Aタグに rel=”shadowbox” を追記するだけ。
携帯用画面もshadowboxで見せようとhtmlの表示を試みるがうまくいかない。
よくオプションの解説を見てみると
players: [“html”]
ではなく
players: [“iframe”]
でした!。うっかりうっかり。
◆併用できるJavaScriptのライブラリ
- jQuery
- Prototype + Scriptaculous
- YUI
- Ext(standalone)
◆対応ブラウザ
- 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も凄いね。
さすが我らのアップル。
検証ブラウザが増えたのは言うまでもない。
メモメモ。