jQuery
jQuery で簡単にイベントの ON/OFF を行う方法
イベントリスナー関係の難しそうな処理が不要で、初心者でもイベントのオン・オフを切り替えることができる方法です。 要は、イベントを起こさせたくないタイミングで、上記で設定した ID を消したり、つけたりするだけです。 HT […]
初心者のための jQuery の基本情報 （ jQuery 入門以前）
jQuery3 が2016年に正式リリースされました。 が、現場ではまだ1系、2系を使っているところも多いと思います。 また、なぜ3種類もあるのか、今からどれを使ったらいいのかなど、初心者向けに解説します。 公式情報 公 […]
[PHP x Ajax] 非同期でセッションを複数処理する場合の注意点
発生した問題点: 時間のかかる非同期処理を実行 -> その処理が終了する前に画面遷移 画面遷移後、セッションを更新していると、前の画面の処理が終わった瞬間、セッション情報が古くなってエラーが発生 どうやら、非同期処 […]
jQuery で作るシングルページ・アプリケーション(SPA) :70行で動くサンプル付き
こんにちは。jQuery 大好きです。 SPAが気になるこの頃です。 AngularJS や Vue.js を時間のある時にさわって、何とか使えることが分かりホッとしていますが、もっと簡単に使えないものかな、と思っていま […]
jQueryでクロージャ
JavaScriptでそのもので書けば早いかも知れませんが jQueryを使っているサイトなら簡単に書けるので 活用しないともったいない気がします。 ・最初の処理を確認するフラグを 用意するのがポイントです。 var I […]
jQuery でラジオボタンを選択するには
今まで属性の「checked」を true にしていましたが、 下記のやり方を見つけました。 $(“#hoge input[name=’hoge’]”).val([‘a’]); こちらの方が簡単ですね。val 値の中で […]
jQuery で選択された要素の属性値を取得するには
セレクトボックスの選択された値は、通常 val() で取得しますが、 option に属性を追加することで、複数の値を取得したい時があります。 会員1 ↓ たとえば title 属性を追加して、カテゴリIDをセットすると […]
CKEditor にプラグイン「codemirror」を追加する方法
思いのほか高機能で、手軽に導入できたのでメモしておきます。 CKEditorの他のプラグインもほぼ同じ手順で導入することができます。 このプラグインを入れると、「ソース」ボタンを押した時の 表示がきれいなシンタックスハイ […]
iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策
こちらの記事を参考にしました。 http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/ MacのSafari（webkit系）では、jQuer […]
HTMLを先に読んで、ﾍﾟｰｼﾞの一部分だけ Ajax で読み込む方法
作ってみると、用途が広がりそうだったのでメモしておきます。 ﾍﾟｰｼﾞの骨子にあたる部分(HTML)は先に読み込んでおいて、 時間のかかる読み込み部分をAjaxで読み込む時の 処理になります。 ローディング画像をページ全 […]
Ajax をオフにした jQuery Mobile でローディング機能を実装する方法
概要 jQuery Mobile を使ってウェブアプリを作ろうとすると container の部分にリンク先のページを読み込むので データベースからデータを頻繁にひっぱってくるページの場合、 遷移後にコンテンツがきちんと […]
ckeditorで複数のインスタンスを処理する場合
はじめはjQueryでやろうとしましたが、 調べてみたら、とてもシンプルに書くことができました。 for(var i in CKEDITOR.instances) { var data = CKEDITOR.instan […]
jQueryのあの書き方をJavaScriptで書き直す時の覚書
とある案件で、IE6時代に作られたサイトを改修しています。 得意のjQueryが導入できないという面倒な環境で、 JavaScriptで何かする時には、そのまま書くしかない状況です。 Ajaxの勉強も、昔はDOMを操作す […]
prototypeとjQueryの共存について
個人的には共存は極力避けた方がいいと思います。 お客様の現場で事例があったので、どういった 使われ方があるのか、確認してみました。 ① まず以下の順番で読み込みます。 prototype jQuery ② クロージャ内は […]
JavaScript マウスの位置情報について
横方向のX座標と、縦方向のY座標がありますが、 いくつか取得方法があり、性質がそれぞれ異なる上、 ブラウザによっては使えないものもあります。 以下はその見取り図です。 IE Firefox Safari O […]
JavaScriptでオブジェクトを削除するには
オブジェクトは delete で削除できる、と説明されているところが 多いのですが、実際、消えませんでした。 var positionXY = new Array(); delete positionXY; 上記だと、残 […]
jQueryプラグインを作るときのテンプレート
今後、よく使いそうなのでストックしておきます。 まずはヘッダー。 /* * hoge.js 0.0.0 – 簡単な説明 * * Copyright (c) 2013 Web Atlier Midori * License […]
要素をランダムで取得する方法と、undefined の対応
jQueryを使っています。 altに番号が振ってある複数の画像の中から ランダムで１つだけ抜き出す、というよくあるパターン。 画像の数は var length = $(“.picture img”).length; こ […]
表の行をドラッグできるようにする
シンプルにいきます。 CDNを使って、jQuery本体とjQueryUIを読み込みます。 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 […]
CDNの活用
通常、サーバ上に設置したjQueryファイルを使用する代わりに、 GoogleやMicrosoftがCDN(Content Delivery Network)にて 提供しているファイルを読み込んで使用することができます。 […]
FileAPIで画像を選択したらプレビューを表示する
HTML5の実装はまだ発展途上ではありますが、 インターネット・エクスプローラもバージョン10になって ようやくFileAPIでは、Firefox、Chromeと 肩を並べられるようになったようです。 ファイルの書き込み […]
オリジナルのコンテキストメニューの作り方
簡単なウェブアプリケーションが展開できる jQueryプラグインを作っていたところ、 どうしても独自のコンテキストメニュー （右クリックで出てくるメニュー）が欲しくなりました。 既存のものを探したのですが、どうもしっくり […]
jQueryでReferenceError: $ is not defined
jQueryやjQueryのプラグインを使う時は、 jQuery本体をまずロードして、 その後で必要なjsファイルを読み込んでいく、 という使い方でないと表題のエラーが出ます。 普段そうしているのですが、 はじめてこのエ […]
jQuery1.9では.liveが使えない
ちょっと驚きました。便利な.live()が使えないので もしやと思って検索をかけてみると、jQuery1.9からは .liveイベントがなくなり、.onになっているとのこと。 調べてみると、この.onは、jQuery1. […]
GitHubが使いたくなりました。jQuery公式プラグイン・レジストリが公開
今日もjQueryのおかげで、 ご飯が食べられていると思っています。 PHPやRails、XHTML、CSS、これらをシンプルに結びつけて、 便利だったり、面白かったり、楽しいものを 作りだしてお客様に喜ばれるのは、jQ […]
スマホ・タブレットの向きでVIDEOタグの大きさをコントロール
jQueryだと簡潔に書けます。 640pixel以下のときに、幅をきりのいい320pixelではなく 300pixelにしているのは、iPhone用です。 きっちり320pixelだと、はみだすので。 $(docume […]
