Chromeで超簡単にUser Agentを変える方法 :: 5509
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。 通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと 右下にギアアイコンがあって、そこからインスペクタのSettingが開けます すると Override User Agent という項目があるので チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます 試しに iPh
iPhone AppのPathみたいなナビゲーションを実装できる Swpnav.js :: 5509
PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@が作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。 サンプル（Webkitのみ ホスト githubにあります 5509/Swpnav – GitHub 使い方 ソースコードをダウンロードして、任意の場所に swpnav.js を置き、
Edit in placeエディタを実装するEIP :: 5509
シンプルで使いやすいEdit in placeエディタを。 EIPは指定の要素にEdit in placeエディタ機能を付加します。データの保持はカスタムデータ属性で行い、コールバック関数を呼べるためある程度自由にデータのやりとりができます。 EIPのサンプル ダウンロード Githubから 使い方 jQueryとeip.js、eip.cssを読み込みます。 次にHTMLを用意します。このとき、HTMLにはdata-eipが必須です。実行対象はdivでもspanというか何でも大丈夫ですが、display: block指定がされているか、ブロック要素がいいと思います。（※data-eipについては後述
個人的に使うことが多い9つのjQuery・JavaScriptスニペット :: 5509
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎） 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
いまさらjQueryのLightboxぽいプラグインいろいろ :: 5509
最近あまり見なくなってきたし、個人的にも使う機会も減ったLightbox系のプラグインを久しぶりに探したついでにメモ。またいつか使うときのために・・・ライセンス形態と対応メディアも付けたのでそれなりに見やすいかもかもかも。 （デモもつけようと思ったけどめんどくさいからやめた・・・ jQuery LightBox plugin いつものLightbox。お世話になった人も多そう。 ページ
コピペで実装する「ユーザーに優しいドロップダウンメニュー」 :: 5509
ドロップダウンメニューが便利な場合もありますが、ドロップダウンしてるエリアからカーソルが離れた際の素っ気なさときたら・・・ とりあえずサンプル2つ用意したので比較してみてください。 比較用サンプル 素っ気ないドロップダウンメニュー 優しいドロップダウンメニュー ちょっとした気遣いで優しいUIに 彼女（彼）とバイバイしたあと見えなくなるまで見守ったりしませんか？名残惜しい的なのでもいいです。振り返ったとき既にいないとか寂しいじゃないですか。そういう気持ちって重要じゃないですか。 UIにもそういう小さな優しさというか思いやりを持たせてあげましょう。普通のことですけどね。カーソルが離れてもすぐ消えずにちょっと待ってくれるドロップダウンメニューを簡単に実装できるコードを用意したので、ちょっとした優しさを持ってコピペで使ってやってください。 こっからコード HTML CSS ul#nav { mar
今までに公開したjQueryプラグイン :: 5509
はじめに、この記事は役に立つリンク集ではないです。 ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。 そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。 ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで… いままで公開したjQueryぷるぎんたち プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js サンプル この頃は些
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
知っておくべきjQueryオブジェクトの扱い :: 5509
jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基本といえば基本ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。 jQueryオブジェクトからDOMにアクセスする $(‘#id’)にすれば#idを取得できますが、この状態だとDOM要素を選らんでいる状態ではないので、DOM要素のプロパティにはアクセスできません。 $('#link').href // これは無理 1-1. $()[0] 要素を引数にしたjQueryオブジェクトはDOM要素が配列で格納されている状態なので $('#link')[0] // DOM要素の参照になる console.debug($('#link')[0]); // 評価結果 - DOM要素 // とすることで配列の中からDOM要素を指定することができるので、プロパティにアクセス
マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法 :: 5509
jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。 何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。 どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。 で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。 結論は簡単で .stop(true, false)を.animate()の前に入れる .animate()メソッドのオプション部分でqueue: falseを指定する のいずれかです。 このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 :: 5509
Chromeのキャッシュをオフにする方法 :: 5509
5509.me
5509.me
5509.me
5509.me
5509.me
5509.me