jQuery

Chart.js で折れ線グラフの交点(intersect)をToolTip 表示(時刻編)

Chart.js で折れ線グラフの交点単純な X軸:double 値、Y軸:double 値 のパターンを先日書いたので、 今回は、X軸:時刻、Y軸:double 値 の線グラフの交点である。 プロットするデータの型は、先日書いた中の Ploter クラスである。x軸である x は、d…

jQuery ui datepicker の change イベントを Wicket で捕捉して処理する。

表題に挙げた Wicket で捕捉して処理する前に、そもそも jQuery ui Datepicker の change イベントは 通常の change イベントハンドラでは処理できず、オプション onSelect でハンドラ指定するのはマニュアルに書いてあるとおり有名である。 onSelect で指定…

jQuery AJAX通信でリクエストヘッダに動的に任意のコードを付与

jQuery AJAX通信でHTTPリクエストヘッダに任意のコードを付与するには、 headers{ }, を付ければ良いのだが、 折角なので、Wicket でページ表示のタイミング=Page コンストラクタ実行で付与する値を決めて 送るようにする。 ページが読込む JavaScript は、…

Chart.js 凡例クリック無効化

Chart.js グラフの凡例をクリックするとデフォルトでは対象グラフ描画が消えて、 凡例テキストは打ち消し線が表示される。これを無効にしたい時がある、options 設定で以下のとおり onClick の戻り値を false にすればよい。 legend:{ onClick: function(){ …

Chart.js ツールチップカスタマイズ

Chart.js ToolTip のカスタマイズはネット検索すれば、まとまった解説も沢山見つかるし、サンプルもある。 http://tr.you84815.space/chartjs/configuration/tooltip.html あえて、時刻をX軸にしたグラフで ToolTipカスタマイズを書いてみた。options に、t…

Chart.js ToolTip で%を表示する方法

Chart.js の PIE 描画でのサンプルです。 オプションで ToolTip の callback を書いて対応する。 つまり、 options: { tooltips: { callbacks: { label: function (tooltipItem, data){ return %を表示する文字列を生成して返す。 } } }, } を書く。 全体の…

Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する

Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、 以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適…

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(){ /…

モーダルウィンドウ使用時の 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/以前、これを使用する時のアイコンを変える方法を書いた。→ コンテキス…