I have a JSON object that goes like this: {"data": [ {"name":"Alan","height":"171","weight":"66"}, {"name":"Ben","height":"182","weight":"90"}, {"name":"Chris","height":"163","weight":"71"} ] ,"school":"Dover Secondary" } I would like to filter the JSON object to obtain data of those taller than 170 and heavier than 70 and subsequently sort this object. From the jQuery website, I understand that f
I use this to trigger a function once a pause in typing is initiated in a textarea: var keyTimer; $("#TEXTAREA").on('keyup mouseup', function(){ if (keyTimer) { clearTimeout(keyTimer); } keyTimer = setTimeout(function () { doFunction(); // Not working, triggers only once (on focus). }, 500); }); doFunction() triggers only at first keyup pause (on focus). That function must trigger at every pause (
jQueryでフォームデータを送信する方法のまとめです。 １．submitイベントで送信する form要素のsubmitイベントで送信する場合のサンプルは次のとおりです。 <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('form').submit(function(event){ event.preventDefault(); var f = $(this); $.ajax({ url: f.prop('action'), type: f.prop('type'), data: f.serialize(), timeout: 10000, dataType: 'text' }) .done(function( data ) { // 通信が成功したときの処理 }) .fai
jQuery UI Timepicker (By François Gélinas) What is this? This is a jQuery UI time picker plugin built to match with other official jQuery UI widgets. Based on the existing date picker, it will blend nicely with your form and use your selected jQuery UI theme. The plugin is very easy to integrate in your form for time (hours / minutes) inputs. Licensed under the same license as jQuery : MIT and GPL
デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>
datetimepicker改造版 の使い方です。 ※通常のdatepickerが使える状態（jquery.uiが入っている）の前提で記述しています。 STEP１ まずは、ココからダウンロードしてください。 ダウンロードしたファイルを解凍すると以下の二つのファイルがあります 1. jquery.ui.datetimepicker.js 2. jquery.ui.datetimepicker-jp.js 1が本体ファイルで、2が日本語化するファイルです。 基本的には2を好きなようにいじってください。※詳しい方は1をいじってもらってもかまいませんｗ 2のファイルはこんな感じです。（ちょっと修正して26行目からの部分をコメントアウトしておく事にしました）
is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away. diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern bro
POSTがGETになってる？ 前回のエントリーにもつながっている話ですが、ブラウザからフォームでPOSTされたものがリダイレクトされたときの挙動について。挙動が理解できると、化けるってのも失礼な表現なんですが。以下、化けた理由と、HTTP周りの実装の話をつらつらと。 普通のHTMLなフォームからPOST <form action="post_receiver" method="post" enctype="multipart/form-data"> <input type="file" name="imageFile" /> <input type="submit" value="画像をアップロードしてやんよ" /> </form> 上記のようなHTMLなフォームから、POSTした際にサーバー側でうまくPOSTデータを受け取れないことがありました。 echo $_SERVER['REQUE
IEでjQueryを利用してxmlをパース
サーバからxmlを受け取るajaxアプリを最近firefoxで確認しながら作っていたのですが、ふとIEで見てみたらxmlのパースがうまく出来ていないことが判明しました。 どうもIEでは、明示的にヘッダーに Content-Typeにtext/xml; charset=utf-8としてあげないとだめみたいです。 なので、google app engineでxmlを返す際には きちんと以下のような感じでヘッダーを指定しないといけないようです。 self.response.headers["Content-Type"] = "text/xml; charset=utf-8" self.response.out.write(template.render(path, template_values)) ちなみにクライアント側のコードは以下のような感じです。 function hogehoge(va
久々にAjaxな画面を書いたらちょっと壁に当ったのでメモ。 当たった壁というのは、タイトルどおりJquery.ajax()を使い レスポンスにJSONデータを想定した際に FF3、Safari4、ChromeはOKなのにIE7、8だと正常に動かない件。 厳密にはerrorで指定したコールバック関数が呼ばれてしまう。 他のブラウザだとsuccessで指定したコールバック関数が動くのに。 ajax()にはオプション引数のうち、dataTypeというパラメーターがあり、 json、jsonp、textなどを指定できる。 これを指定するとレスポンスに対する解釈をしてくれて データの扱いが便利になるという代物。 いろいろ試してみたがIE8標準のデバッガ「開発者ツール」には 相変わらずparseerrorの文字が。 つまり、それ以前の問題っぽい。 JqueryにおけるAjaxを解説しているサイトを調べ
ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd
The Psychology of Greatness in Legendary AthletesWhat defines greatness in legendary athletes? Beyond physical prowess and skill, their characters, mental resilience, and the ability to inspire transcend their technical achievements. The enduring legacies of individuals like Lionel Messi, Cristiano Ronaldo, Michael Jordan, and Muhammad Ali suggest a deeper interplay of psychological factors and so
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
I recently came across a really compact array shuffling function on JSFromHell.com, which I thought would make a nifty jQuery plugin. This jQuery shuffle plugin could be applied to any HTML element or Array object. (function($){ $.fn.shuffle = function() { return this.each(function(){ var items = $(this).children(); return (items.length) ? $(this).html($.shuffle(items)) : this; }); } $.shuffle = f
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive des
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
以前、静岡の住宅建設会社さんのサイトをYahoo!カテゴリへの登録申請をした際に、外部サイトへのリンクが別ウインドウで 開いていない、という指摘を受けました。 対処方法は、外部サイトへのリンクは別ウインドウで開くようにAタグを書き直せば良いのですが、この静岡の住宅建設会社さんはページが多めなこともあり、今回はjQueryを使って、外部リンクの場合だけ別ウィンドウで開くように設定をしました。 （僕じゃなくてシステムの人がやってくれた。） 以下その方法 1.jQueryのサイトからjquery.jsをダウンロードしてくる。 2.ページのヘッダにjquery.jsを読み込む。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 3.ページソース内(ヘッダとか)に下記スクリプトを書く。 <head> <sc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
