Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
たまたま勉強中だった時に見かけたTips。 個人的なメモです。HTML5には、IEで採用 されていたcontenteditable属性が追加され、 ページ内を編集することが出来ます。更に、 localStorageを使って編集状態を保存できる んですが、この処理的なものをjQueryで 行う、みたいな方法です。 僕自身はまだ使う機会は無さそうなんですが、ちょっと面白かったのでメモ的に。技術的な話はリファレンスでご確認下さい。 contenteditableとlocalStorage まず、contenteditableとlocalStorageに関してどういうものか、なんですが、僕も大して理解してないんですけど、大雑把に言うと、ユーザーが閲覧中のページを編集、保存できる、というもの。 contenteditableはIEですでに実装されていた属性なのでHTML5で新たに追加、というものでは
Yamada Program: CanvasとjQueryを使って図形をドラッグ
2011/09/24 CanvasとjQueryを使って図形をドラッグ 現在、HTMLやらJavaSvriptやらを勉強中。 HTML5の「Canvas」と「jQuery」と「jQuery UI」を使って、図形をドラッグする処理を実装してみました。 jQueryはバージョン1.6.4を使用。 jQuery UIはバージョン1.8を使用。 サンプルの概要 「四角」をクリックすると、四角形が追加される。 「楕円」をクリックすると、楕円形が追加される。 テキストボックスにテキストを入力すれば、図形の中にそのテキストが描画される。 追加された要素はドラッグして移動できる。 ドラッグして移動できるのはグレーのエリア内のみ。 ※HTML5に対応するブラウザでないと動作しません。 ※iOSのSafari及びAndroid標準ブラウザでは、描画は出来ますがドラッグ操作ができません。 （And
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
先日、ふと小粋空間さんを覗いてみたら「HTML5のcanvasを使ったお絵かきツール詳説」という記事がありました。HTML5もjQueryもよく知らないのですが、「お絵かき」と聞いては素通り出来ません～（笑。さっそく落書きさせてもらいました。 これ、面白い～！！ ブラウザだけで描けるってすごい。でも遊んでたら不満が色々と。もっとたくさん色が欲しい。線の太さも変えたい。で、小粋空間さんのJavaScriptをお借りして自分でも作ってみました。 ■色を増やす これは簡単です。<li>の部分を好きなっっっだけ増やせばいいだけ。 ■線の太さを変える ASCII.jpの「HTML5とjQueryでブラウザーがペイントツールに！」を参考にjQuery UIからjquery-ui-1.8.17.custom.zipをダウンロード。解凍するとファイルがいっぱい入ってますが、ここで使うのはjquery-ui
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
Instagram APIを使用し、タグで絞った画像を一覧表示する方法 | Stronghold Archive
どうもこんばんは。今回のtipsは【Instagram APIを使用し、タグで絞った画像を一覧表示する方法】になります。方法に関してはとても便利なプラグインがありましたのでそちらを使用してみます。 実装方法 クライアントIDの取得 まずはクライアントIDが必要になります。コチラより開発者登録をしてください。 コード Potomakのダウンロード JS <script src="jquery.1.X.X.js"></script> <script src="jquery.instagram.js"></script> <script> $(function() { $(".instagram").instagram({ hash: ‘検索対象のタグ（ハッシュ）’, show: 12,//表示件数 clientId: ‘ここにクライアントID’ }); }); </script> HTML <
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
私自身はあまり馴染みはなかったのですが、最近はどこのサイトも当たり前のようにjQueryが導入されており、使用する機会が増えてきました。 これを機に色々試しつつ勉強せねば、ということで、シンプルなスライダーのプラグインを作成してみました。 サンプル サンプル－ダウンロード 使い方 HTML＋JavaScript <div id="slider00"> <ul> <li style="background-color:#FFF;">ああああああ</li> <li style="background-color:#EEE;">いいいいいい</li> <li style="background-color:#DDD;">うううううう</li> <li style="background-color:#CCC;">ええええええ</li> <li style="background-color:#B
軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス jQuery(callback) – jQuery 日本語リファレンス jQuery(elements) – jQuery 日本語リファレンス jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。 というわけで、以下使い方。 5種類の使い方 セレクター : $('#tar
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
potomak/jquery-instagram @ GitHub
