BACKSTRETCH – 背景画像をブラウザいっぱいに敷くことができるjQueryプラグイン – creamuBACKSTRETCHは、背景画像をブラウザいっぱいに敷くことができるjQueryプラグインです。 ・背景画像を1枚敷く ・スライドショーでクロスフェードしながら切り替える ・クリックで背景画像を切り替える といったことができます。 これはいい。 BACKSTRETCH
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa
Build a Contacts Manager Using Backbone.js: Part 2 | Envato Tuts+
Welcome back to part two of this tutorial; in part one we looked at some of the model, collection and view basics for when working with Backbone and saw how to render individual contact views using a master view bound to a collection. In this part of the tutorial, we're going to look at how we can filter our view based on user input, and how we can add a router to give our basic application some U
jQueryのclone()を考察する（株式会社コネクティボしゃいん☆のブログ）
jQueryのclone()についてのお話です。 最近、clone()を使った実装を行う必要がありまして、私の想像とは違った動きをしていた部分がありました。 あくまでも「私の想像と」というのがミソで、閲覧いただいている方は「そんなの当たり前」と思われるかもしれませんが、その際はご容赦ください。 clone()は、バージョン1.5以上で2つの引数を設定することができます。マニュアルによれば、 .clone( [withDataAndEvents] ) .clone( [withDataAndEvents,] [deepWithDataAndEvents] ) といった使い方をするようです。 このwithDataAndEvents部分は、デフォルト値はfalseです。 そのため、単にcloneした場合にはイベントなどは一切引き継がれないことになります。 それは容易に理解できるのですが。 ここで
$.post()のコールバックが動くのはHTTPステータスコードが2xxのとき（jQuery）
前回の続き、というか補足メモ。 jQueryで作るAjaxな検索フォーム（テスト） | mutter JavaScript: 検索部分 function sampleSearchFilckr () { var word = $('#sampleSearchWord').val(); if(!word) { alert('検索語を入力してください'); return false; } //検索 $.post( '/sample/flickr', {"q": word}, function(data, status) { //searchに成功したら結果を表示する $('#sampleSearchResult').html(data); }, "html" ); } この部分がコールバックになるわけですが、 function(data, status) { //searchに成功したら結果を表
Plunker - Welcome to Plunker!
Plunker lets you edit, fork and preview web snippets onlineTry it out. Take any gist url and pop it in the box below. Alternatively, try out the Editor. What were you thinking?There are some pretty amazing services out there already. Why would anyone try and reinvent the wheel again? For fun and for profit. OK. Just for fun. And I had a lot of it learning about node.js, Express and the whole async
Post by @hamalog
var wait = function(millisec){ return $.Deferred(function(defer){ setTimeout(function(){ defer.resolve('I waited for ' + millisec); }, millisec); }).promise(); }; $(function(){ var fns = [ wait(200), wait(200),wait(500), wait(1000), wait(200) ]; $.when.apply(this, fns).done(function(){ var resArray = Array.prototype.slice.call(arguments); $.each(resArray, function(i, res){ $('#res').append('<li>'
jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験｜BLACKFLAG
iPhoneやiPad、Androidといったスマートフォンやタブレット端末では フリック／スワイプと呼ばれる指でスライドさせるUIが付き物になっています。 jQueryでもこのフリック／スワイプ動作を実装できるプラグインはたくさんありますが いざ自分で作ろうとすると意外と大変な動作だったりします。 この動作についていろいろ調べていたところ Sleipnirのフェンリルさんのデベロッパーズブログにて、 iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ) と題した、jQueryでiPhoneやAndroid、PCでタッチイベントを取得する方法がとても参考になったので この記事を参考にしてフリック／スワイプで操作するシンプルな画像ギャラリーを作ってみました。 まずは動作サンプルから。 下記の画像をフリック／スワイプしてみてくだ
Scraping Web Pages with jQuery, Node.js and Jsdom - Liam Kaufman
I always found it odd that accessing DOM elements with Ruby, or Python, wasn’t as easy as it was with jQuery. Many HTML parsing libraries employ Simple API for XML (SAX) that can handle extremely large XML documents, but is cumbersome and adds complexity. Other parsing libraries use XML Path Language (XPath), which is conceptually simpler than SAX, but still more of an effort than jQuery. I was pl
最近公開された表現力を高めるjQueryプラグインいろいろ
Adipoli jQuery Image Hov... / Sweet Tooltip a jQuery &... / FredHQ - Roundabout for ...他...全7件
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli
シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。
かわいらしいツールチップ
デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"
検索メモ:Javascript（ｊQuery）でのTwitterAPI・OAuth認証 - とうもろこし日記（改）
Twitter Developers oauth.jsJavaScript で OAuth 認証を行う方法TwitterクライアントのOAuth対応(Javascript編) | tomatomax.netTwitter API を OAuth で認証するスクリプトを 0 から書いてみた - trial and errorOAuth認証を使ってtwitterのhome TL(friends TL)を表示するgoogle chrome extensionを作ってみた - やる気のないはてだAIR の app-storage:/ はどこに保存される？ - てっく煮ブログ javascriptでのTwitterのOAuth認証にドハマリしましたが、このあたりを読んで解決。 でも、oauth.jsはそのままではTwitter認証できないので、ソースいじっちゃってます。 詳細は後日、時間あったら解説
embed.lyを利用してサイトにURLのプレビュー機能を埋め込む方法 - はなちん C-x C-c
#Favtileにembed.lyの埋め込み機能をつけました。 これによりリンク先の動画・写真・OpenGraphで設定されたサイトのアイコン等を埋め込み表示出来るようになりました。 今回はembed.lyを利用する過程を紹介します。 embed.lyって何が出来るの? embed.lyを使うと、Webサイトの中に他のサイトの動画や写真やWebサイトを埋め込み表示することが出来ます。 Twitter向けの写真サイト(yfrogやTwitpic)やUstreamやYouTubeはもちろん、InstagramやAmazonなど、218ものコンテンツサイトの埋め込み表示に対応しています。 有料プラン以外に、無料プランがあります。1万URLまで無料で埋め込み表示できます。 登録方法 無料プランへの申し込み方法を説明します。 1.embed.lyの登録画面へ行く Pricing on Embedly
[jQuery] テーブルやリストの背景色を１行ごとに変える | Web Tips - around design
jQueryでよく使うもののまとめシリーズ。 テーブルやリストの背景色を１行ごとに変えて見やすくする技です。 jQuery (Javascript) <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $('#itemlist li:even').addClass('even'); $('#itemlist li:odd').addClass('odd'); }); </script> HTML <ul id="itemlist" > <li>アイテム１（奇数の列）</li> <li>アイテム２（偶数の列）</li> <li>アイテム３（奇数の列）</li> <li>アイテム４（偶数の列）</li> <li>アイテム５（奇数
Web Design Tutorials | Envato Tuts+
Learn web design with thousands of free tutorials! Maybe you want to know how to build a site using WordPress themes, or maybe you want to master more advanced web design topics like interface design or responsive design. Whatever you need, you'll find it here. Stay up to date with the latest features and developments in CSS, Shopify, WooCommerce, and more. Learn how to design landing pages and em
jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる – bl6.jp
すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。 （※ CSS3だけでもできましたので追加しておきます。） [ads_center] CSSのtransitionを使って背景色もアニメーションで変わるようにしています。要素の拡大はjQueryのanimateを使ってpaddingの値を変えています。で、普通にpaddingの値だけ変えると左上が固定されて右下方向だけアニメーションして拡大していくので、拡大する分positionでマイナスの値も指定します。ちょっと分かりずらいので図にするとこんな感じ
Building Decoupled Large-scale Applications Using JavaScript (And jQuery)
These are the slides for a talk I gave at jQuery Conf UK, where I explored a number of effective design patterns for scaling applications using JavaScri…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.blurjs.com/