5分で作るChrome拡張機能 - Qiita
株式会社アンティー・ファクトリー、株式会社アンティー・システムのXA（マークアップエンジニアチームの名称）メンバーによるAdvent Calendar __11日目__担当の@k__watanabeです。 普段からなにかとお世話になっている__Chrome拡張機能（エクステンション）__ですが、そういえば自分で作ったことがなかったので、この機会に作ってみました。 Chrome ウェブストア - 拡張機能 クオリティの高いものを作り込んで、__Chromeウェブストア__に公開するとなると、技術や時間、登録料などもかかり大変そうですが、とりあえずローカルで動かすまでをゴールとしたら5分で作れそうです。 What are extensions? - Google Chrome サンプルが豊富なので助かります。 Sample Extensions - Google Chrome 機能の内容は、拡
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
fullPage scroll snapping. Create full screen pages fast and simple
The best! Proud of being the most complete framework of its kind. Trusted by the most innovative companies. Compatible Working in modern and old browsers too! Make a beautiful site for all! Not just a few! Easy! fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation and both community and personal support.
[JS]エイプリルフール用のネタをあなたのブログに仕込むスクリプト -Fool.js
ウェブページを逆さまにしたり、傾けたり、クリック禁止にしたりなど、ちょっとしたイタズラをブログなどに仕込むjQueryのプラグインを紹介します。 Fool.jsの「Pranks」にイタズラの一覧があります Pranksの各アイテムをクリックすると、次のイタズラを実行します。 fallingScrollbar スクロールバーの消失 rick リック・アストリーの動画をスクリーン外で再生 hiddenVideos 意味不明な動画を再生 vanishingElements 任意の要素を消失 questionTime 米のアニメスポンジ・ボブのテーマソングを歌う upsideDown ページ表示を逆さまに h4xx0r ページを編集可能に wonky ページを傾ける flash ページをチカチカ表示 crashAndBurn エンドレスなループを実行 ※ブラウザクラッシュっぽいけど、実行しないよう
tips! | Tumblrの画像ポストを表示するブログパーツ「jQuery blrblrTumblrImage」を設置してみた
Tumblrの画像ポストを、ブログパーツっぽく表示できるjQueryプラグインを作成されていた方がいたので紹介です。 小さな領域でもスライドショーができるのがいい感じ。 ethertank diaryさんのjQueryプラグイン 『jQuery blrblrTumblrImage』という記事から、 そんなjQueryプラグイン「jQuery blrblrTumblrImage」を試しに忍者ブログに埋め込んでみたので、その備忘録です。 公式デモ：jQuery blrblrTumblrImage - jsdo.it - Share JavaScript, HTML5 and CSSブログサンプル：【tips?】http://samplechiiips.blog.shinobi.jp/ 設置も設定も簡単なので、特にサイドバーのあるテンプレートとかで使いやすいと思います。 【目次】準備するものブロ
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）
Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http
jquery.cookie.jsのCookie(クッキー)を削除する3つの方法
$.removeCookie("hoge")で削除する おすすめの方法。削除することが明確になる。 ※古いバージョンのjquery.cookie.jsだと使えない $.cookie("hoge", "fuga"); $.removeCookie("hoge"); $.cookie("hoge", null)で削除する よく見かけるやり方。保存するCookieをコピペして作成しやすい。 $.cookie("hoge", "fuga"); $.cookie("hoge", null); $.cookie("hoge", "", {expires: -1})で削除 Cookieを空にして期限を-1にして削除する方法。パスが指定されているCookieだとこれにパスを追加したもので削除しないとCookieが正しく消えないことがある。 $.cookie("hoge", "fuga"); $.cooki
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad
jQuery でなんか書くときのちょっとした規約 - 犬ターネット
規約ってほどでもないけど、jQuery でコード書くときは以下みたいな感じで書くことが多くなった。 どう書こうが好みだろうけど、jQuery オブジェクトに $ を付けるくらいはしといたほうがよい。
PayPalショッピングカートの導入を容易かつクールにできる「Minicart.js」:phpspot開発日誌
Minicart.js - The minicart is a great way to improve your PayPal shopping cart integration PayPalショッピングカートの導入を容易かつクールにできる「Minicart.js」 ボタンクリックでポップアップでカートに追加されすぐにPayPalチェックアウトできるというJSライブラリ。 Localizationにも対応していて日本でも利用できそう。Paypalでの決済導入の際に覚えておくと使えるかも。 関連エントリ クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」 クレジットカード番号の入力を直感的にできる「Card.js」 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard」
jQueryを使った文字数カウントとthrottle/debounce - ELAB.
はじめまして、こんにちは。 軽めのjQuery Advent Calendar 2012の9日目の記事です。 今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。 初記事ですので、どうぞお手柔らかにお願いさせていただきたく。（ちなみに現時点ではこれ以外にページはありません！） 文字数カウントの実装 早速ですが、こんな感じでHTMLとJSを書いていきます。 textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。 HTML <textarea></textarea> <div id="result">0</div> JavaScript $(function(){ var cnt; // キー入力が発生する度に実行 $('textarea').on('keyup', function(){ // テキストエリアのval
軽めのjQuery Advent Calendar 2012ランキング
軽めのjQuery Advent Calendar 2012ランキング 本エントリーは軽めのjQuery Advent Calendar 2012の幻の26日目のエントリーです。 jQuery Advent Calendar では25個のすばらしい軽めのjQueryエントリーが書かれている訳ですが、それを全部チェックするのがめんどくさい！といった方向けに反響が高かった軽めのjQueryエントリーベスト10を勝手にご紹介します。反響は集計が簡単なのではてなブックマークのブックマーク数で集計しました。 jQuery モダンAjaxな書き方を目指して 〜deferredを使ったAJAX〜 - Hack Your Design! jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。（軽めのjQuery Advent Calendar 2012 - 01日目） | Ginpen.co
Item Blur Effect with CSS3 and jQuery | Codrops
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item. Today we want to show you how to create a simple blur effect for text-based item
Web Designing: 2012年6月号「特集1：定番jQueryプラグイン2012」詳細目次＆リンク集
Web Designing 2012年6月号「特集1：定番jQueryプラグイン2012」詳細目次＆リンク集 01＿メニュー スプライト画像を利用したメニューをCSSを書かずに設置できる imagineMenu マウスオーバーで項目が拡大するメニュー Kwicks for jQuery ユーザビリティを向上させるページ内ナビゲーション jQuery One Page Navigation スクロールに追従して移動するメニュー jQuery Floating Widget 階層構造のコンテンツを整理して表示する jsTree カスタマイズ可能なドロップダウンメニュー jQuery Mega Drop Down Menu 02＿ユーザーインターフェイス jQuery UIで手軽にタブインターフェイスを実現 jQuery UI Tabs jQuery UIのシンプルなアコーディオンUI jQue
はてなブログにjQueryのスクロールでtopへ戻るボタンを導入するソース - BLOG-BOX
こんばんは。 そのうち勉強しようとか随分前から思ってたのですがここに来てやっと勉強する気になりました。jQuery。 とりあえず一番簡単そう（数行で完結）で、サイトを作るにあたってよく使うであろうスクロールでtopへスルスルッと戻るボタンを作りましたのでメモ。 デモはこのブログの右下にある角丸で四角のボタンになります。マウスホバー時にうっすら濃くなるcssも付けました。親切設計ですねｗ まずは何をするにもjQuery本体がないと動きません。 はてなブログのデザイン＞カスタマイズ（タブ）＞フッタ に下記のソースを貼り付ける。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 同じ場所に下記のjQuery・css・htmlを
「最近はてなブログでタグクラウドがうまく表示されない…」→解決！ - マトリョーシカ的日常
あれ、おかしいぞ 一二週間前だろうか。突然タグクラウドがうまく表示されなくなった。(※サムネは修正後) はてなブログは通常のサイドバーではカテゴリと件数をずららと一列に表示させることしか出来ない。しかし有志の方（たま● (id:tmd45)さん）がすてきなスクリプトを書いてくださった。 【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする！ - TMD45INC!!! 何人かの方に気に入って使っていただいたようなのですが、以前の記事では jQuery だけベ... これを設定するとサイドバーにきれいなタグクラウドが表示させる。そう、このまえまでは。今は一列には表示されないものの、フォントの大きさが全て同じになってしまい、件数も表示されるようになってしまった。 解決法 「調べるの面倒だしこのままでいいかな」と思っていたら、今日、はてなブログ開発ブログ（言いにくいな）から以下の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1文字目を綺麗に大きくするAdobeのJSライブラリ「dropcap.js」 - WEB情報アンテナ
はてな jwuery - Google 検索