ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita
「ブックマークレットで jQuery を使う魔法の 210 文字」という記事を ブログ に書いたのですが、ここ Qiita ではその技術的な解説をしてみようと思います。 やりたい事はそのものずばり、ブックマークレットの中で jQuery を使うという事です。 ちょっとした処理の自動化や簡単なツールなど、よくブックマークレットを書いて活用しているのですが、ブックマークレットだと素の JavaScript を書かなければならず、DOM 操作が含まれる事をやろうとすると、jQuery に慣れた身には面倒くささが先に立ってしまいます。 ならば、ブックマークレットで jQuery を使えるようにすればいい！というのが今回の趣旨になります。 まず方針として、どんなページでブックマークを起動してもちゃんと jQuery が使えるようにしたいです。ですので、jQuery 本体は自前で調達しなければなりませ
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく | DevelopersIO
そんな訳で、jQuery UI プラグイン(※以下、jQuery UI Widget) の作り方について学んだので、ここに書き記しておくとします。忘れっぽい自分のための備忘録として書いた内容なので、割りと基礎的な部分にフォーカスした入門編のような内容になっています。 ウィジェット作成のための前準備 当然ですが jQuery UI のプラグインなのだから、作成には jQuery エンジンだけでなくjQuery UI ライブラリが必要となります。 手順A | CDN で手軽にロードする 学習目的やちょっとしたテクニカル調査といった場合は、わざわざファイルをダウンロードするのも大げさなので、CDN (コンテンツ・デリバリ・ネットワーク)を利用させてもらうのが妥当です。 jQuery UI オフィシャルページのフッター部分に必要なURLがすべて記載されているので、これらをアナタが作成する HTML
Zepto.js (v1.0rc1) の jQuery との互換性 - メモ用紙
現在は 1.0 正式版が出ています。こちらをご覧ください：App Framework, Zepto.js 1.0 と jQuery との互換性 jQuery と互換性があり、とっても軽い JavaScript ライブラリ Zepto. jquery-1.7.2.min.js が 93 KB なのに対し、zepto.min.js (v1.0rc1) はわずか 23 KB。ファイルサイズだけでなく、スクリプトの初期化も圧倒的に速い。（jQuery 2 では初期化の遅さが改善されるという情報あり） $() 関数での動作の違い 属性セレクタの値は、必ず引用符で括る必要がある。DOM Exception が発生する。 $("a[href^=#]") → エラー $("a[href^='#']") → OK 次のセレクタはプラグイン selectors.js が必要 :visible, :hidden
jQuery File Upload Demo
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
[IE6|IE7|IE8]cloneNodeで複製したエレメントのidをjQueryから参照出来ない時のTips - Web 業界の技術屋 | VIVID Labs.
var content = document.getElementById('listBox'); var clone = document.getElementById('list1').cloneNode(true); clone.id = 'temp'; clone.style.position = 'absolute'; clone.style.left = '600px'; content.appendChild(clone); $('#temp').animate({left: 400}); cloneNode して、id を書き換えて親要素に appendChild して動かそうとした訳です。 IE 以外のブラウザはこれで問題無く動きます、IE 以外は。 IE だけは #temp を呼ぶと複製元である #list1 を参照して、そちらを動かそうとします。ちなみにリスナを仕掛け
basket.js - a simple script loader that caches scripts with localStorage
A simple (proof-of-concept) script loader that caches scripts with localStorage Tweet Version 0.5.0: basket.js (2.2 kB) basket.min.js* (0.7 kB gzipped) basket.full.min.js (3.8 kB gzipped) CDN-Usage * = Use this version if you want to manually handle the rsvp.js dependency If you're seeing this message, something has gone wrong. Please ensure you are testing this page using a HTTP server. Introduct
おしゃれjQuery、Good Parts、Bad Parts - 素人がプログラミングを勉強していたブログ
jQueryは互換性を保ちつつも洗練されたAPIを取り入れているので、新しく書くときは新しいAPIを使った方が良い。 liveとかセレクタの:hoverとかはBad Partsだ。 jQuery.fn.on / jQuery.fn.off live/delegate/bind/click等は滅びた。全てonを使おう。 また、data引数を使う場合は必ずdataをオブジェクトかnullにする。dataが文字列の場合、関数の場合にセレクタ等と区別がつかないからだ。 $("body").on("click", function (event) { alert("Clicked!"); }, false); また、querySelector/querySelectorAllの登場によって、:hover等のjQuery固有のセレクタは滅びた。validなCSSセレクタと、jQueryのメソッドをch
Future と Stream という同期/非同期処理の混在をシンプルにコード化できる車輪を再発明したよ - latest log
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ～ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな
JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。 今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。 $("#box").fadeIn("fast"); たった一行で、アニメーション効果を付加することができるので、 プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。 しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。 あるいはアニメーション効果なんて無駄！ ということで、全然使っていない人もいると思います。 ですが、アニメーシ
jQueryUIのsortableをiPhone/iPadで使うときにマルチタッチを無効化する方法 - tech-kazuhisa's blog
jQueryUIのsortableって便利ですよね。でも、iPhoneやiPadだとタッチイベントをうまく検出してくれずそのままでは動作しません。 そこでjQuery の sortable を iPad 対応するで紹介されているようにタッチイベントをマウスイベントに置き換えて動作させる方法があります。 function dispatchMouseEvent( event_type, touch_event ){ var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent( event_type, true, true, window, 1, touch_event.screenX, touch_event.screenY, touch_event.clientX, touch_
jQueryのliveやdelegateは実際何をやってるのか
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
はじめてのjQueryMobile - WCAN 2011 Autumn フォロー記事
当日のスライド さる2011年9月10日に，WCAN 2011 Autumnのセッション2-Cで，jQuery Mobileについて紹介させていただきました．jQuery Mobileを都合良く取り回して，モバイルサイトに役立てようという主旨でございます． WCAN 2011 Autumn ~ はじめてのjQuery Mobile HTMLスライドですが，なるべくWebKit系のフルブラウザでご覧ください．（FirefoxやIEは閲覧を確認できておりませんので...） 当日の要点 当日は，下記のように各トピックにフォーカスをあてて，jQuery Mobileの光と闇（嘘）について紹介させていただきました． スマフォサイトを取り巻く背景 jQuery Mobile自身の特徴・メリット 実装のデモンストレーション jQueryMobileを活用している国内外の事例 使い所を選びつつも，モバイル
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery
Loading...