MixItUp | KunkaLabsMixItUp 3 A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more... MixItUp gives you beautiful animated DOM manipulation on top of native CSS layout.
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
どんなイベントが設定されているか一目で分かる·Visual Event MOONGIFT
Visual Eventはイベントが設定されているDOMをビジュアル化するライブラリです。 最近のWebサイト開発においてJavaScriptを使わないということは殆どなくなりました。jQueryなどを使って様々なイベントを設定しているサイトも多いでしょう。そこで使ってみたいのがVisual Eventです。 実行しました。色がついた部分がイベントを設定しているところです。 フローティングでアクションの内容が分かります。 Yahoo! Japanで実行しました。意外と色々なアクションが設定されています。 表示の切り替え系が多いようです。 Visual Eventを使うとjQueryで設定したり、onClickで指定したりしたアクションが一目で分かるようになります。jQueryで開発中に設定したイベントが正しく実装されているかどうか確認するのにも使えそうです。 Visual EventはJa
画像のズームと、ドラッグによる連続表示を使った360度ビューが可能なECサイト向けjQueryプラグイン・Dopeless - かちびと.net
ECサイトに良さそうなjQuewryの プラグイン・Dopelessのご紹介 です。画像のズームと、ドラッグ 操作で360度ビューを再現できる というもの。タッチデバイスに も対応しているようです。 ライセンスが非商用CCで、商用はライセンス購入のプラグインですが、ズーム機能と360度ビューがセットになっているのは素敵です。 画像をドラッグで動かすと、四方八方から撮影されたプロダクトを連続表示し、360度ビューを可能にしています。また、ズーム機能も付いていて、タッチイベントにも対応しているとの事。画像はPHPで自動ロードする仕様です。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text
[JS]ウェブページにGitHubのリポジトリを簡単に埋め込めるスクリプト -Repo.js
Rope.js: Basic Embed (with a hawt repo) Repo.jsの使い方 実装は3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="repo.min.js"></script> Step 2: HTML GitHubのリポジトリを配置する領域をdiv要素で記述します。 <div id="repo"></div> Step 3: JavaScript jQueryのセレクタで指定し、GitHubのuserとnameを指定します。 <script> jQuery(function($){ $('#repo').rep
モナド: お前はもう知っている | Webシステム開発／教育ソリューションのタイムインターメディア
はじめに 過去に私がHaskellを学び始めた時、 真っ先に疑問に思ったことはモナドの存在だった。 当時は全くと言っていいほど理解できなかったが、 最近Haskellを学び直して ようやく理解することができた(と思う)。 という訳で、現時点での私のモナドへの理解を示すためにこの記事を書く。 ここではモナドの本質が何なのか概要を示す。 正確な説明は数多あるモナドについてのチュートリアルを参照されたい。 Hellow World問題: IO, Monad, fail 新しい言語を学ぶ時、まず間違いなくHello Worldを書くだろう。 HaskellでHello Worldを書くとこうなる: この1行だけを見ると普通の命令型言語と大して変わらないように思える。 ところでHaskellには強力な型推論がある。 そのため型宣言を省略しても処理系がよしなに解釈してくれる。 ただ普通はコードの意図す
[JavaScript]jQuery のイベントとクロージャ | ブログが続かないわけ
以前のエントリ([JavaScript]僕、スコープとかクロージャとか曖昧でした )で書いた、Javascript のクロージャの話と全く同じことなのですが、あれをjQuery のclick イベントで書くとどうなるかということを、自分用にメモとして残しておきたいと思います。 例えば、div でブロックを3つ作って、それぞれにclick イベントを持たせるとします。そのとき、そのclick に反応して、そのblock が何番目に作られたものなのかをalert するようにしたいとします。 jQuery の.click は第一引数にコールバック関数をとるので、クロージャのことを意識せずに直感的に書くと、次のようなコードになるのではないでしょうか。 var div; var i; for(i=0; i<3; i++) { div = $('<div/>').click( function( e
![[JavaScript]jQuery のイベントとクロージャ | ブログが続かないわけ](https://cdn-ak-scissors.b.st-hatena.com/image/square/2302e44c95c7e474fefb218540004f95dc47a4bb/height=288;version=1;width=512/https%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YOLP 30分クッキング
CAS: Loading CAS
ある特定の要素の上に読み込み中とかのくるくる回るスピナーを簡単に表示できるjQueryのプラグイン