選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 2006年11月09日- Highlight active input This script is easy to configure. All you have to do is to define how the active input should be highlighted. This is done by CSS. Then you have to call a function at the bottom of your page to initialize the script. 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」。 実装方法は簡単で、次の通り。 1. CSSの
ブログに例えばBBSを表示しようとしてインラインフレームを利用する場合、高さが固定であると不便です。 読み込むページによって高さが変わる方法を書き残します。 最近の流れで言うとAjaxを利用するのがトレンドかもしれませんが、BBSなどのCGIは文字コードがShift_JISの場合がほとんどで、UTF-8へ変換する作業や、リンクの問題とかあってあきらめました。^_^; 私が使っているBBS のCGI はBBSNOTE です。 先ず、<head>と</head>の間に <script language="JavaScript"> <!-- function GetHeight(Y) { var app = navigator.appName.charAt(0); if (app == "N") { document.getElementById(Y).height = parent.fram
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む 邪魔なら閉じられるボックス 下記には、最新記事をお知らせする小さなボックスが表示されています。 ボックス上部の右端にある「」ボタンをクリックすると、このボックスを折りたたむことができます。 さらに「」ボタンをクリックすると消し去ることもできます。 試してみて下さい。 ※スタイルシートとJavaScriptが有効な環境でのみ動きます。
ときに、EnterキーでFormがSubmitされてしまうと、よろしくない場合があります。 そんなときは、以下のようにするとEnterキーによるSubmitが抑止されます。 function enterSubmit(event) { event = event || window.event; if (event.keyCode == 13) { if (event.srcElement) { if (event.srcElement.type != 'submit' && event.srcElement.type != 'textarea') { return false; } } else if (event.target) { if (event.target.type != 'submit' && event.target.type != 'textarea') { return
こんなことありませんか? フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか? そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ! サンプルソース(ラジオボタン) HTML <form> <table border="0" cellspacing="0" cellpad
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説チェックボックスで選択したグループに入力制限をかける checkboxの例 サンプルを見る<script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化(false) */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=
GWだし、なにか作るかってことで、フォームの入力項目を切り替える「switchform」のサンプルをアップ。 たまに実装する機会があるので、使い回せるように作ってみた。 まずは作成したswitchformのサンプルから。 (⇒ダウンロードはこちら) 使いどころとしては、会員登録フォームで「個人」か「法人」かを選んでもらう時、かな。 「個人」で登録したい人には、「会社名」とか「部署名」の入力欄を表示しない方が、ユーザビリティ的にいいんじゃないかと。 使い方は以下参照。 フォーム部分のHTML <table id="target-form"> <thead> <tr> <th>種別<span>[必須]</span></th> <td> <ul> <li><input type="radio" name="case" id="trigger0" value="0" /><label for
Last Updated: "2008-07-02 Wed 14:36:28 Antigua, Guatemala" * JavaScript エレベーターメニュー tfmenu.js ver 1.4 - DOWNLOAD このエレベーターメニューを、使っていただいてる方、ご連絡ください。このページからリンクさせていただきます。→ info@kakura.jp 特徴 メニュー移動の速さを変更できる。 メニュー開閉の速さを変更できる。 メニューを移動させるか固定するかを指定できる。 メニューが画面から離れすぎたら急いで追いつく。 あらかじめ開いておく項目を指定できる。 CSS ですべてのデザイン要素を変更できる。 CSS で上昇中、下降中、停止中のデザインを変更できる。 メニューデータを .js 内一箇所に置くので、メンテナンスが簡単。 tfmenu.js で使用する
《2017年6月10日 2:00 PM 公開/更新》 フォームのリセットボタンに確認機能を加える方法 [入力フォーム] 入力フォームに「リセット」ボタンは不要です。しかし、どうしても設置しなくてはならないなら、せめて誤操作を防げる仕組みを追加したリセットボタンにしましょう。そこで、確認機能付きリセットボタンをJavaScriptで作る方法をご紹介。クリックされた際に「本当にリセットして良いのか?」と確認ダイアログを表示する機能を加えます。これなら、誤ってクリックされても入力内容が削除されてしまうことを防げます。 入力フォームにリセットボタンは不要だが…… リセットしても良いかどうかを確認するダイアログが出るリセットボタンの例 フォームのリセットボタンにJavaScriptで確認機能を加える方法 確認ダイアログを表示するconfirmメソッド 入力フォームにリセットボタンは不要だが…… 入力
この成績表は○oonの独断と偏見(勝手に想像して) で作成しましので あてになりません。(笑) 説明 試しに下のソースをビルダーの新しいページを出してHTMLソースにします、そこに貼り付けすれば 同じのが出来ます、そしてページ編集にして、たとえば綜合点にマウスをあてると|と点滅します BackSpaceで消して好きな文字に変える点数の455、科目の順位の名前も同じです。 ページ編集のSマークは間違っても削除しないで下さい。青文字は全て好きな文字に変えて下さい。 枠のカラーはblueをご自由に変えて下さい。 ホームページビルダー6.5にて作成 Microsoft InternetExplorer5.5で動作確認しております。 プログラムのソースをコピーして、表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。 </style> <style type="tex
・タイマーの使用方法 JavaScriptでタイマーを使う場合、setTimeout関数を使用します。 setTimeout(関数名, スリープ時間); 第一引数は、呼び出したい関数名を文字列で指定します。 第二引数は、どのくらい後に呼び出すかをミリ秒で指定します。 以下にタイマーを使用した時計のサンプルを書きます。 ▼サンプル---------------------------- <html> <script language="javascript"><!-- function tokei() { setTimeout("tokei()",1000); var kyou=new Date(); jikan=kyou.getHours(); hun=kyou.getMinutes(); byou=kyou.getSeconds(); msg=jikan+":"+hun+":"+byou
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更+クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
デコレーションテーブル.jsは、class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリーです。他のJavaScriptライブラリに依存せず、単独で動作します。 テーブルをデコレーションするJavaScriptライブラリは海外物も含めて数多くありますので、このライブラリは特に目新しさはなく機能も少ないのですが、よろしければ是非ご利用ください。 ダウンロード Release Date Size (byte) Download 使い方 deco_table_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、次のJavaScriptコードを記述してください。 <script type="text/javascript" src="../ht
IEでJavaScriptをどうしても有効にできない場合の対処方法。Internet ExplorerでのJavaScriptの有効・無効は普通はインターネットの設定、「ツール」→「インターネットオプション」→「セキュリティ」→インターネットの「レベルのカスタマイズ」→「スクリプト」でONに設定しますが、ここで確かに有効に設定しているはずなのにJavaScriptが機能しないことがあります。Firefoxやoperaでは問題ないからセキュリティソフトは関係なさそう。 http://support.microsoft.com/default.aspx?scid=kb;ja;831430 答えはこちら。「ファイル名を指定して実行」で「regsvr32 jscript.dll」と「regsvr32 vbscript.dll」を実行です。 解決しましたら、もしよければひとことコメントください。 追
2004.11.06新規作成。 HTMLフォームで、submit(送信)ボタンを押さずにデータが送信されてしまうことがある。用途によってはその方が使いやすいこともあるが、編集中に意図せず送信されてしまうこともあるので、この動作を抑止したい。どうするか。 submitボタン まず、submitボタンがあるかどうか。submitボタンがあるとき、input[type="text"]で生成されるテキストコントロール内でEnterキーを打つと、フォームデータが送信される。 例えば、次のようなフォームの場合。テキストコントロールが一つでも二つ以上でも同じであり、IE / Mozillaとも同じように振る舞う。 <form action="test"> <input type="text" name="a"> <input type="text" name="b"> <input type="subm
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量(1.7KB)のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く