Category Archives : JavaScript

chart.jsのレーダーチャートで最大値（スケール）が異なるデータをいい感じに表示する - 2022/02/23(Wed)
chart.jsのレーダーチャートでは、各項の最大値を個別に設定はできない。例えば、小学校のテストなどであれば最大値が100点で、数学80点、国語75点等と最大値が揃っているのでグラフがいい感じになるが、例えばセンター試験では英語200点、社会100点等であり、最大値を200としてしまうと、仮に社会が100点満点でもグラフ上はそこだけ凹んで見えてしまう。解決方法としては、以下のstackoverflowに載っていた。Set max value for ea...
jQueryのスムーズスクロールが動かないときの解決方法 - 2017/06/29(Thu)
javascript と jQuery をつかってスムーズスクロールをウェブサイトに導入することは割とよくあると思います。ドラクエ11攻略プロジェクトでも導入ました。しかし、なぜか全く動かない。うんともすんとも言わない。「なぜか」というとjavascriptのコードが間違っているんでしょうけど、なぜかがわからない状態でした。jQueryのコードは、（おそらく）よく見かける以下です。jQuery(function() { // #で始まるアンカーをクリックし...
URLの一部をリアルタイムに書き換える - 2016/02/12(Fri)
URLの一部をリアルタイムに書き換えたい、ということがあって、調べてみました。WEBページ上での操作をローカルストレージ（localStorage：https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage）に保存させていたのですが、それだと端末が変わるとその内容を引き継げない、という使い勝手でイマイチな部分がありました。このご時世、流石にスマホでやった内容がパソコンでも引き継げる、というのは、まあ、普通で...
検索ボックス（input）の全角スペースを半角スペースに置換する - 2014/12/16(Tue)
Wordpressなどの検索ボックス（検索フォーム）において、半角スペースは"AND"検索ですが、全角スペースを入れるとひとつの単語とみなされて検索されることが有ります。例えば、「javascript input 空白」なら「javascript」「input」「空白」のAND検索ですが、「javascript　input　空白」だと「javascript　input　空白」という文字列の検索になってしまい、入力者が意図とはことなる結果が返ってきます。これはあまりよろしくな...
textContent と innerText の挙動の違い - 2012/07/16(Mon)
JavaScriptにおいて、ある特定エレメントのテキスト部分を取り出すプロパティとして、「textContent」「innerText」があります。前者はW3Cで規定されている標準のプロパティ、後者はInternet Explorer独自の拡張機能です。これらが全く同じ動作をするのか、といえばそうではなく、その挙動でハマったのでメモ。いやー、XMLの仕様まで読むことになるとは思っていませんでした……。実現したかったことは、ブログテンプレート作成の際...
packerで圧縮されたJavaScriptを元に戻す - 2012/02/23(Thu)
容量削減等々の目的で/packer/（http://dean.edwards.name/packer/）を利用しJavaScriptを圧縮することはよくあると思います。しかし同じく、圧縮した後のJavaScriptファイルは残っているものの、圧縮前のものが無い、ということもよくあると思います（たぶん）。そんなとき、packerで圧縮したJavaScriptファイルを圧縮前のものに戻すサービスとして、以下があります。圧縮した後のJavaScriptをコピペして「decode」ボタンひとつで...
Adobe Readerのように要素を掴んでスクロール可能にするjQueryプラグイン - 2012/02/12(Sun)
Adobe ReaderやiPhone、Androidで画面を操作するときのように、画面を掴んでスクロールを実装したい、しかもjavaScriptで、と思って色々探しました。Flashを使う、ということであれば以下のサイトがイメージに近いものです。http://www.griplimited.com/で、探索した結果、以下のjQueryプラグインにたどり着きました。jQuery.flickablehttp://lagoscript.org/jquery/flickableブログ→iPhoneのようにフリック操作でスクロールできる...
PBB MagicWheel - 2011/02/11(Fri)
そんなに使う場面が無いとは思うのですが、PBB MagicWheelというウィジットがなかなかよい動きをしています。特にテレサが素晴らしい！->PBB MagicWheel 1.0 デモ...
JavaScriptでHTMLを出力するとき - 2010/12/26(Sun)
自分メモ。JavaScriptのdocument.writeなどでHTMLを主力するときに、タグをそのまま書くとあまりよくない。良くないだけで、主要なブラウザでは意図した動作になることを確認済みです。【ダメな例】<script> document.write('<p>sample text</p>');</script>以下のように書くのが正しい。【良い例】<script> document.write('<p>sample text<\/p>');</script>【関連項目】・s...
jQueryで設定したイベントをすべて無効化する - 2010/12/12(Sun)
jQueryでclickなどのイベントを設定した際、CSSを動的に切り替えたときにはそのイベントを無効化したいケースがあると思います。例えば、a.cssではタブ切り替え前提、b.cssではタブ切り替え無し、のスタイルのとき、タブのclickイベントに「display: none」する関数を登録している場合、b.cssになると表示が崩れる場合などが考えられます。そういうときは .unbind() APIを使います。登録しているイベントを全て、全部の要素に対し...
Google API使用時のフェイルオーバー - 2010/10/08(Fri)
HTML5+CSS3+jQueryのテンプレート -HTML5 Boilerplateを眺めていて、Google APIからjQueryをロードすることを基本にしながらも、万が一接続できなかったときにローカル（自サーバ）のjQueryを読みに行く記述があったので、備忘録がわりにメモ。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min....
jQueryプラグイン Flexgrid - 2009/01/05(Mon)
jQueryのプラグインに「Flexgrid」という、リッチなUIのテーブル(table)を実現できるプラグインがあります。テーブルに対してカラム別のサイズ変更や表示/非表示の切り替え、サイズの伸縮、またサーバ側でXML形式かJSON形式でテーブル内に表示するデータをやり取りするプログラムを実装すれば、ソートボタンの配置や検索、ページャなどの付加が可能と、非常に高機能なプラグインです。しかし、紹介している各ページでリンクしてい...
改行削除JavaScript（Line Break Remover） - 2008/12/24(Wed)
その名の通り、改行（改行コード）を削除するJavaScriptプログラムを作ってみました。…というほどののものではないですが。改行削除JavaScript（Line Break Remover）...
jQueryでonMouseoverとonMouseoutを同時に設定する（２） - 2008/08/28(Thu)
jQueryメモ。ちょっとはまってしまったので、備忘録。以下のような動作をjQueryで実装しようとしました。（「＞」「＜」は実際はbackground-image画像）【HTML】<div id="togglebar">＞<br>＞</div><div id="tdmenu">メニュー</div>【表示（イメージ）】「＞」をクリックするとメニューが非表示、表示が切り替わった後「＜」をクリックするとメニューが表示されるようにする。＞│メニュー│＞│メニュ...
jQueryでonMouseoverとonMouseoutを同時に設定する - 2008/06/28(Sat)
jQueyメモ（備忘録）。マウスをある画像の上に乗せたら画像が変わる（大きくなる、色が変わる etc.）、マウスを外すと元に戻る、という処理がよくあります。通常は、こんな風に書くはずです。（id#mntoggle の background-imageを変更する）<div id='mntoggle' onMouseover='document.getElementById("mntoggle").style.backgroundImage = "url(画像１.jpeg)";'onMouseout='document.getElementById("mntoggle").style.backgro...
開閉するサイドバーを作成するJavascript「PBB SideBar」 の改造 - 2008/05/22(Thu)
カッコよく開閉できるサイドバー「PBB SideBar」…ですが、そのままだとただ開閉するだけで、何もできませんでした。そこで、MRBで少しコードを改修し、内容を直接HTMLで書き込めるようにしました。サンプル、ダウンロード含めて以下からどうぞ。開閉するサイドバーを作成するJavascript「PBB SideBar」...
ページのアウトラインを自動表示するJavaScript - 2008/02/19(Tue)
ページの中のあるID配下にある、ある要素をすべて取得し、その要素に対してページ内リンクをあるdiv要素の中に自動で作成するJavaScriptです。"jsoutlinelist"というIDのリスト（ul）で出力されます。また、その取得する要素にすでにIDが設定されている場合は、そのIDをそのまま利用してアンカーを作成します。…おそらく、よく分からないかと思いますので、動いているものを見てもらうのが一番かと。以下のリンクでサンプルページ...
テーブルのセルを伸縮させるJavascript - 2008/01/29(Tue)
テーブルのセルの縦横をマウスオーバー（onMouseOver）やマウスクリック（onClick）で伸縮できる便利なJavascript、それがElasticTableです。用途はかなりありそうですが、一点難点があり、セルの中にA要素などがあると、伸縮がうまくいかない点です。このブログでも使ってみようといじくり中ですが、なかなか難しい…。...
CSVファイルを読み取り結果をテーブルで表示するJavascript（Ajax） - 2008/01/26(Sat)
質問自体はよくみかけるものの、実際のものはあまり見かけなかったので、タイトルの通り「CSVファイルを読み取り結果をテーブル（table）で表示するJavascript（Ajax）」を作ってみました。おまけとして、結果として出力するテーブルをソートできるようにしています。ぐだぐだ言うより使ってもらうほうが早いと思いますので、以下のリンク先にあるテストページをどうぞ。→CSVファイルを読み取り結果をテーブルで表示するJavascript...
雪を降らせるJavascript - 2007/12/09(Sun)
雪を降らせるJavaScriptはいろいろあるかと思いますが、以下２つのうちいずれかが使いやすいのではないかと思います。・画像を使う→DHTML Snowstorm!・画像を使わない→Snow Fall_1 - without images...