innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() }
[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB
ランディングページやバナーなどで、クリックされるテキストはどっちだろう？ カラーを変えるとクリック率があがる？ など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。
自作オブジェクトのイベントのやりとりにはjQuery.triggerではなくjQuery.triggerHandlerを使うほうがよいと思った - hitode909の日記
DOMオブジェクトには昔からdispatchEventとか，addEventListenerとかあって，最近だと，node.jsのEventEmitterとか，jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる． これまで，自作オブジェクトからイベントを発行するのに，jQueryのtriggerを使ってたけど，意図しない挙動をすることがあることが分かって，triggerHandlerを使うように変えた． jQuery.trigger()は，イベントタイプと一致する関数をレシーバが持ってるとき，その関数が呼ばれる． イベントのやりとりと，メソッドの呼び出しは独立しているというイメージがあったので，うっかり同名のメソッドを定義したときに，一見するとよく分からない挙動になって，難しい． なので，自作オブジェクトがイベントを発行
モダンなJSライブラリのディレクトリ構成まとめ - CODESCRIBBLE
JavaScriptのプロジェクトを新しく作るにあたってディレクトリ構成をどうするか悩んだので、オープンソースのライブラリなどを参考にすることに。ということで、モダンなJavaScriptライブラリ・フレームワークのディレクトリ構成をまとめてみました。 モダンと言ってはいますが、全然モダンじゃないライブラリも混ざってるかもしれないです。 jQuery jquery ├── build │ └── lib ├── speed ├── src │ ├── ajax │ └── sizzle └── test ├── data │ ├── offset │ ├── selector │ └── support ├── qunit └── unit jQuery Mobile jquery-mobile ├── build ├── css │ ├── structure
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
郵便番号から住所を検索するJavaScriptの再々発明 - Webtech Walker
先日勉強会で@kotarok先生が見せてくれたjQuery.zip2addrを元に車輪の再々発明（kotarokさんのが再発明と言っていたので）してみました。 jQuery.zip2addrはGoogle日本語入力APIを利用して郵便番号から住所を検索するという画期的アイデアのスクリプトなんですが、これのjQueryとかHTMLに依存してない版です。 DEMO hokaccha’s js-zip2address at master - GitHub zip2address('150-0001', function(address) { address.all; //=> 東京都渋谷区神宮前 address.pref; //=> 東京都 address.city; //=> 渋谷区神宮前 }); ハイフンはあってもなくてもいいです。郵便番号が間違ってたりするとaddressにはundefin
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう - monjudoh’s diary
↓でtxtファイルとしてダウンロードできる。 http://plugins.jquery.com/project/cookie 使い方はデモを触ってみてソース見るとか、 jquery.cookie.jsのソースのコメントの@exampleを見るとかすればいいと思うけど簡単に説明しておくと、 基本的には$.cookie(クッキー名);で値の取得、$.cookie(クッキー名,値);で値の設定が出来て、 第3引数でoptionがいろいろ指定できる。 $.cookie(クッキー名,値,{ expires: 日数, path: '/', domain: ドメイン});とか。 expiresをDateオブジェクトだけじゃなくて日数の数値としても指定できる(というか基本的にこっちを使うはず)。 jQuery pluginだけど$.関数名で使う関数であり、 依存しているjQueryの機能がjQuery.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/SELECTカスタマイズ
Home