jQuery

Chart.js can't acquire context from the given item

www.chartjs.orgChart.js を使用しようとしたら、 Failed to create chart: can't acquire context from the given item 描画の為の の後で、スクリプトを書かないとならない。 <script src="Chart.bundle.js"></script> </head> <body> <canvas id="myChart"></canvas> <script type="text/javascript"> // ここで、canvas id="myChart" に対する Chart.js の処理を書く。 var …</body>

ブラウザウィンドウサイズが変化した時に処理する jQuery

ブラウザウィンドウサイズが変化した時に処理する jQuery 関数定義する。 var resizeProcess = function(p){ var timer = false; $(window).resize(function(){ if (timer !== false) clearTimeout(timer); timer = setTimeout(p, 200); }); }; 使用する。 r…

knockout.js の computed の注意

以下のような、HTMLとスクリプト <input type="text" data-bind="value: msg1" /> <input type="text" data-bind="value: msg2" /> <span data-bind="text: res"></span> と、 $(function(){ var ViewModel = function(){ this.msg1 = ko.observable('111'); this.msg2 = ko.observable('222'); this.res = ko.computed(function(){ return…

整数0埋め文字列

2桁以下の整数を0埋め文字列にするのに、if文 10 コードを書きたくない時Java int num = 7; String s = String.format("%02d", num);JavaScript var num = 7; var s = ("00" + num).slice(-2);Python format を使う num = 7 s = '{0:02d}'.format(num)Pyth…

時計のUIによるTime picker

時計のようなUIによる Time picker を探してたら github にありました。 https://github.com/weareoutman/clockpicker github サイトから入手した CSS と JS を使います。 <link rel="stylesheet" type="text/css" href="dist/jquery-clockpicker.min.css"> <script type="text/javascript" src="dist/jquery-clockpicker.min.js"></script> まずは、標準的なもの。 </link>

jQuery ui Datepicker に 祝日ならToolTip も表示させる

先日投稿の oboe2uran.hatenablog.com に続けて、 祝日ならToolTip も表示させる方法、 Datepicker のオプション beforeShowDay 返却値配列の3番目が、ToolTip のテキストになるので、 先日書いた JavaScript の Datepicker のオプションのbeforeShowDay を…

jQuery ui Datepicker に、祝日休日の文字色背景色をつける

公開している JavaScript版祝日計算にサンプルとして付与している jQuery-ui Datepicker を 祝日休日の文字色背景色をつけるように更新した。 Java祝日計算 プロジェクト日本語トップページ - OSDNclass名 = ui-datepicker-holiday として、CSSを用意する…

JavaScript版の 祝日計算を更新

Java版の祝日計算を更新したので、JavaScript の方も更新 Java祝日計算 プロジェクト日本語トップページ - OSDN

スライドしてループする jQuery で

メモ。 スライドしてループするデザインの作り方を紹介しているのを見つけたのでリンクのメモです。 jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法 | BlackFlag

Webページ入力フィールド制限、ToolTip

今まで過去から何度も書いたものをまとめる。 過去。。。 入力フィールドでよく使いそうな jQuery 処理のメモ - Oboe吹きプログラマの黙示録 input タグ type="number" のスピンボタンを非表示 - Oboe吹きプログラマの黙示録 chromeで0以上の整数入力に限定…

Handsontable で 安易なテストツールを作る。

Handsontable で、任意にキーと値(value)を入力して、それをJSONテキストにするのと、任意の入力URLに送信するもの。用意するもの。Handsontable は、コミュニティ版で充分、https://handsontable.com/JSON の jQueryプラグイン GitHub - Krinkle/jquer…

Handsontable コンテキストメニューで削除の丁寧な補助は書かなくてもよい

久々に Handsontable に触れる。 3年程前、2014 年のバージョンの Handsontable のコンテキストメニューは、行削除、列削除を組み込んだ時、 最後の1行、1列は、削除できないように、以下のように disabled キーの関数コーディングをする必要があった。 $…

フェードイン、フェードアウトするメッセージ(改編)

昔、フェードイン、フェードアウトするメッセージの jQuery を書いた。 見直すと中央寄せが中途半端でできていない。書き直す。CSSソース @CHARSET "UTF-8"; /** * fadeinmsg.css */ div#fadeMessageModal{ display: none; position: fixed; width: 100%;…

chromeブラウザ左下に出るURL表示を出ないようにする

方法があった。 stackoverflow で見つけました。 $(function(){ $("body").on('mouseover', 'a', function(e){ var $link = $(this), href = $link.attr('href') || $link.data("href"); $link.off('click.chrome'); $link.on('click.chrome', function(){ w…

モーダルウィンドウ使用時の datepicker

Wicket のモーダルウィンドウ使用時に注意しなければならないのは、 呼び出し Page とモーダルウィンドウの Panel 両方で jQuery Datepicker を配置したときである。 モーダルウィンドウを起動したとき、モーダルウィンドウの中で Datepicker が効かなかった…

任意のセレクタまで、アニメーションでスクロール

memo任意のセレクタまで、アニメーションでスクロールさせる。例)table の tbody でスクロールを書いた時など。。。 $('tbody').animate({scrollTop:$('tbody tr:nth-child(20)').offset().top}); offset() でスクロールで表示させたい行のオブジェクトを取…

input テキストフィールドでカーソルの位置を指定する。

HTML input テキストフィールドで任意の範囲を選択するには、 <input type="text" value="1234567890"> jQuery で、focus して、setSelectionRange( 開始位置、終了位置 ); $('input').focus().get(0).setSelectionRange(3, 6);setSelectionRange で指定する値は、0始まりで数える。この setSelect…

jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定

jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。https://jqueryui.com/datepicker/#icon-triggerにあるようなカレンダーアイコンをクリックで呼び出すもの。これより入…

moment.js でリアルタイムに日付時刻を表示

moment.js でリアルタイムに日付時刻を表示する。jQuery と moment-with-locales.js を使う。 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/moment-with-locales.js"></script> <div> <h1 id="date"></h1> <h2 id="hour_min_sec"></h2> </div> 自分で clock関数、1秒間隔実行を用意して実行する。 $(…

moment.js で曜日出力に注意

2年近く前に知ってから愛用している moment.js 曜日を出力しようと思って、 各国語対応の moment-with-locales.js を使ったら フォーマット dddd または、ddd を使ったら曜日が日本語で出力されない。 あれ、そうだっけ?!しかたなく、moment-with-locales…

表の編集

前回の投稿、入力フィールドでよく使いそうな jQuery 処理のメモ http://oboe2uran.hatenablog.com/entry/2016/12/18/113206 と、 右クリックコンテキストメニューの基本サンプル http://oboe2uran.hatenablog.com/entry/2016/12/11/161826 右クリックコンテ…

入力フィールドでよく使いそうな jQuery 処理のメモ

HTML 入力フィールドでよく使いそうな jQuery 処理をまとめる。 /** * input-support.js */ /* for 全角数字入力→ 半角数字 */ var numberConvert = function(value){ var str = new String(value); var han = str.replace(/[0-9]/g, function(s){ return …

右クリックコンテキストメニューの基本サンプル

jQuery で右クリックコンテキストメニューを表示するのに気に入って使うようになったもの https://github.com/swisnl/jQuery-contextMenuhttps://swisnl.github.io/jQuery-contextMenu/以前、これを使用する時のアイコンを変える方法を書いた。→ コンテキス…

stopPropagationの例、checkbox を td セルのクリックでも制御

JavaScript stopPropagationの例、メモ。テーブルタグに配置したcheckbox を td セルのクリックでも制御 class="sample" の 配下の tableで、、1列目に checkbox ある場合、、 $(".sample td").click(function(){ if ($(this).parent().children("td:nth-ch…

jQuery カラーピッカー plugin で補色計算してみた。

jQuery カラーピッカー plugin を使う機会があったので、サンプルを作って「補色」を求めたら興味深いことが出てきました。 ColorPicker - jQuery plugin を使います。昔からあるピッカーで有名なもの。 HTML をサンプルとして以下のように準備しました。C…

table で複数行の sortable

テーブルの Sortable 去年書いたけど、書き直す。ドラッグした後に、きちんとハンドルを外す。sortable の stop オプションで、ui.item.data('multidrag') で取得した移動対象を移動後に ui-selected を外してやります。HTML <table id="sortable"> <thead> <tr><th>header-1</th><th>header-2</th></tr> </thead> <tbody> <tr><td>Item-1</td><td>aaa</td></tr> <tr><td></td></tr></tbody></table>…

横長カレンダーを書く

横長カレンダーを書く jQuery ソース・・・メモ。 moment.js http://momentjs.com/ を使うことにした。jQuery は、2.x系で書いた。moment-with-locales.js を使う。 /* datetext = yyyy/MM/dd 日付 * predays = 前方日数(datetextの日付を含まないカウント)…

プログレスバー、画像を使わずに。

画像を使わないでCSSで描画させるプログレスバーを探したらありました。red-team-design.comこれを jQuery の $.ajax で通信した時に、進捗率を表示させます。これに、バーの中央に(%)進捗率を表示させたいので、以下のようにHTMLを書いて、 <div id="preogress_bar" class="progress-bar stripes"> <span style="width: 0%"></span><p>0 %</p> </div> 次…

コンテキストメニューのアイコンをカスタマイズ

jQuery context menu https://swisnl.github.io/jQuery-contextMenu/ これを使ったコンテキストメニューのアイコンの変更の方法、 items オプションを指定する時に記述する icon キーワードに沿って、以下のクラス名で CSSを用意しないとならない。 .context…

tbody scroll と jQuery ui の Selectable

テーブルのスクロールを tbody で出現するようにCSSで指定して、 jQuery ui の Selectable を この tbody に適用させて行選択をできるようにしたところ、、、 スクロールはきちんと表示されてマウスホイールの操作で問題なくスクロールはできるが、、 ス…