タグ

JavaScriptに関するharukkiのブックマーク (38)

  • http://blog.e-riverstyle.com/2009/08/js-5.html

    http://blog.e-riverstyle.com/2009/08/js-5.html
  • 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」:phpspot開発日誌

    選択中の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

  • [JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal

    モーダルボックスのスクリプトはこれが決定版かもと思わせる「SimpleModal」をEric Martinから紹介します。 SimpleModal demo SimpleModalはモーダルボックスのフレームワークとして機能することを目指したもので、フレキシブルにモーダルボックスを作成することができます。 対応しているブラウザは、IE6/7/8, Fx2/3, Op9/10, Safari3/4, Chrome1/2とのことです。 デモではさまざまなモーダルボックスを試すことができます。

    harukki
    harukki 2009/11/06
    ポップアップウインドウのかわり
  • IFRAMEの高さ可変 (メモ帳)

    ブログに例えば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

  • http://solidstate.jp/UserAssistance/inputForm/script_44.html

  • クリックで「折りたためる」ボックスを作る [ホームページ作成] All About

    初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む 邪魔なら閉じられるボックス 下記には、最新記事をお知らせする小さなボックスが表示されています。 ボックス上部の右端にある「」ボタンをクリックすると、このボックスを折りたたむことができます。 さらに「」ボタンをクリックすると消し去ることもできます。 試してみて下さい。 ※スタイルシートとJavaScriptが有効な環境でのみ動きます。

    クリックで「折りたためる」ボックスを作る [ホームページ作成] All About
  • 守破離でいこう!!: Enter キーでの Submit を抑止する方法

    ときに、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を使ってフォーム項目の表示/非表示を切り替えるスクリプト

    こんなことありませんか? フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか? そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ! サンプルソース(ラジオボタン) HTML <form> <table border="0" cellspacing="0" cellpad

    JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
  • JavaScript/DOM » formオブジェクト » Radio/Checkbox | PHP & JavaScript Room

    PHPJavaScriptCSS、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=

  • JavaScriptでフォームの入力項目を切り替える - エアロパス

    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

  • JavaScript エレベーターメニュー tfmenu.js ver 1.4

    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 で使用する

  • フォームのリセットボタンに確認機能を加える方法 - JavaScript TIPSふぁくとりー

    《2017年6月10日 2:00 PM 公開/更新》 フォームのリセットボタンに確認機能を加える方法 [入力フォーム] 入力フォームに「リセット」ボタンは不要です。しかし、どうしても設置しなくてはならないなら、せめて誤操作を防げる仕組みを追加したリセットボタンにしましょう。そこで、確認機能付きリセットボタンをJavaScriptで作る方法をご紹介。クリックされた際に「当にリセットして良いのか?」と確認ダイアログを表示する機能を加えます。これなら、誤ってクリックされても入力内容が削除されてしまうことを防げます。 入力フォームにリセットボタンは不要だが…… リセットしても良いかどうかを確認するダイアログが出るリセットボタンの例 フォームのリセットボタンにJavaScriptで確認機能を加える方法 確認ダイアログを表示するconfirmメソッド 入力フォームにリセットボタンは不要だが…… 入力

    フォームのリセットボタンに確認機能を加える方法 - JavaScript TIPSふぁくとりー
  • エクセルのように表をソートする事ができるでしょうか。

    この成績表は○oonの独断と偏見(勝手に想像して) で作成しましので あてになりません。(笑) 説明 試しに下のソースをビルダーの新しいページを出してHTMLソースにします、そこに貼り付けすれば 同じのが出来ます、そしてページ編集にして、たとえば綜合点にマウスをあてると|と点滅します BackSpaceで消して好きな文字に変える点数の455、科目の順位の名前も同じです。 ページ編集のSマークは間違っても削除しないで下さい。青文字は全て好きな文字に変えて下さい。 枠のカラーはblueをご自由に変えて下さい。 ホームページビルダー6.5にて作成 Microsoft InternetExplorer5.5で動作確認しております。 プログラムのソースをコピーして、表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。 </style> <style type="tex

  • Search A.I. JavaScript Q&A

    ・タイマーの使用方法 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

  • 5分で実装可能なページの文字サイズ変更+クッキーに保存サンプル:phpspot開発日誌

    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 - JavaScript ライブラリー - HTML5.JP

    デコレーションテーブル.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」を実行です。 解決しましたら、もしよければひとことコメントください。 追

  • Enterキーを打ってもsubmit(送信)しないようにするには | Netsphere Laboratories

    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

  • もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT

    業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと

    もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
  • [JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス

    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">