JavaScriptを圧縮、最適化するGoogleのツール
試そうと思ったときにさまよったのでメモ。 最近はJavaScriptファイルにminというファイル名で圧縮して少しでも実行速度を向上させようとするライブラリが増えている。 jsファイルを圧縮、最適化するにはGoogleが公開している「Closure Compiler」を使うと簡単にできそう。 詳しくは下記参照 IT Pro - グーグルのJavaScriptツール集大成「Google Closure Tools」 GmailやGoogle DocsやPicasaなど多くのGoogle製品に使われているjavascriptライブラリも公開されている「Closure Library」。 Googleのサイトと同じ使い勝手や機能を実装するときには参考になりそう。ただドキュメントは英語だし、使いこなすにはある程度のレベルが必要。 デモ一覧を見ると何ができるか分かる。 この辺はjQuery UIの方
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
Inset Border Effect
Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco
Essential jQuery Plugin Patterns — Smashing Magazine
Addy Osmani explores several time-saving design patterns and best practices that can be employed to improve your plugin development process. (Note: this post is targeted at intermediate to advanced developers.) I occasionally write about implementing design patterns in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
Learning JavaScript Design Patterns by Addy Osmani
Document has moved, if you aren't automatically redirected go here.
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
ASCII.jp：jQueryで自作するフローティングウィンドウ｜Web制作の現場で使えるjQuery UIデザイン入門
「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ＆ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ＆ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML／XHTML（以下、HTML）を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、
mailcheck.js – メールのドメインが間違えていたらsuggestしてくれるJavaScript – creamu
mailcheck.jsは、メールのドメインが間違えていたらsuggestしてくれるJavaScriptです。 以下のように、domainsにチェックしたいドメインを入れるようです。 <script type="text/javascript"> var domains = ['hotmail.com', 'gmail.com', 'aol.com']; $('input#email').mailcheck(domains, { suggested: function(element, suggestion) { // callback code }, empty: function(element) { // callback code } }) </script>
jQueryでTableにマウスオーバーすると拡大（詳細）表示する
Posted: 2012.03.23 / Category: javascript / Tag: jQuery Table（表）に情報量が多い表を入れようとすると改行がたくさん入り、読みにくくなってしまうことがあります。 そこで、普段は最小限の項目を表示してjQueryでマウスオーバーすると詳細な情報が表示されるということをしてみます。 テーブル全体を拡大するタイプ たとえばこんな普通の表があったとします。 html <table class="table01"> <thead> <tr> <th>ID</th> <th>タイトル</th> <th>URL</th> <th>説明</th> <th>公開日</th> </tr> </thead> <tbody> <tr> <td>10000000</td> <td>1行目のタイトル</td> <td>http://www.example.c
Persistent Headers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section. Header… persisting. Couple things to know before we get started: There are many like it, but thi
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
In this tutorial, we are making a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers. The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs - just edit the spreadsheet. You can eve
Making an Apple-style Splash Screen
The Beatles are on iTunes! Or, if you are like me and don't care that much about it, you've probably noticed the awesome splash screen that Apple used to promote the event. Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us. The HTML Encapsulating the splash screen functionality into a jQuery plugin mak
[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout
デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Image Gallery With Custom Sized Images (Bonus jQuery Plugin) | Envato Tuts+
https://www.entheosweb.com/tutorials/css/preloader/default.asp
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
お手軽WordPress Tips：カスタムタクソノミーで作成した特定のタームに属する記事の一覧を表示数を指定して表示する - かちびと.net
