You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する
今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。 今回はその方法を解説する。まずはjScrollというjQueryプラグインで無限スクロールを実装する方法を解説し、これをSEOに最適化させる方法へ続く。 プロジェクト作り jScrollのダウンロード まずはGithubからjScrollをダウンロードする。 pklauzinski/jscroll: jScroll Infinite Scrolling Plugin for jQuery 落としてきたファイル一式から『jquery.jscroll.min.js』を取り出し
別のページをjQueryのajaxを使って読み込み表示させる | スターフィールド株式会社
jQueryのajaxを使って別のページ(html)をページ内のある部分に読み込み表示させてみました。 概要 index.htmlにて、メニューのボタンを押すと、 $.ajaxにて、1.html(~4.html)のファイルを読み込み、 ページ内に表示させています。 今表示させているページのボタンを押すと、なにも起こらないようにしています。 デモは以下になります。 DEMO 【html】 <div class="gnavi"> <ul> <li><a href="1.html">1のページ</a></li> <li><a href="2.html">2のページ</a></li> <li><a href="3.html">3のページ</a></li> <li><a href="4.html">4のページ</a></li> </ul> </div> <div class="pageDispl
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
Glitchを取り入れてカッコいいWEBサイトにする方法 | Web制作（フリーランスWebデザイナー）| visual hallucination
この記事は書いてから 約 5年 経過しています。 1年以上経過しているので情報が古い可能性があります。 Glitchは電子回路のバグで起こるノイズです。（上の画像は普通の画像をGlitchを何回も重ねて作った画像になります。）jQueryやcssを少し追加するだけで、ちょっとしたアクセントになったりします。ただし、やり過ぎは注意が必要です。 Glitchが出来るプラグイン等を紹介します 今回はGlitchの紹介になりますので、コードは無しです。参考ページを載せときますのでそちらで確認してください。 jQuery Glitch Plugin 画像をグリッチさせたい時に使うと便利です。試しに使ってみるのにはおすすめです。 参考：http://okikata.org/study/test28/ glitch.js 画像のみやdivごとGlitchを掛ける事ができる様です。glitch.jsは工夫
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。 jQueryでの実装例 たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。 // 10秒経っても通信が成功しない場合は失敗処理を実行す
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
jQueryTween - Lightest Tweening Engine for jQuery
jQueryTween - Lightest Tweening Engine for jQuery jQueryTween Welcome to jQueryTween - Lightest Tweening Engine for jQuery jQueryTween!! The Lightest Tweening Engine for jQuery This plugin is a bridge to tween.js and aims to drastically simplify your work. Each script does what it does best, for high performance hardware accelerated animations. Github Tween.js My Work Demo Developer Friendly Using
CSS Content Filter | CodyHouse
Content Filter A slide-in filter panel powered by CSS and jQuery. A well-designed filter is a powerful tool users can take advantage of. It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he's looking for. Building this kind
jQueryでjsonデータを扱ってみる【入門編】
Posted: 2010.07.25 / Category: javascript / Tag: jQuery, json javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェク
jQuery.post()で、JSON形式のデータを読み込みパースし表示
jQuery の jQuery . post( url [, data] [, success( data, textStatus, jqXHR ) ] [, dataType] ) メソッドを使った Ajax リクエストで、JSON形式のデータを読み込み、パースし、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-post-json.js」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。 読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。 「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-s
コピペで完了！12種類のプログレスバーを簡単に導入できるPACE.js | co-jin
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画面右上にパーセンテージが表示されます。 プログレスバーです。 ページの読み込みが完了して、100%になると消えていきます。 このプログレスバーはPACE.jsをいうプラグインを利用しています。 これがとってもお手軽だったのでご紹介します。 もしよろしければどうぞ。 PACE.jsは、プラグインを読み込んで、CSSだけで12種類のプログレスバーを表示できる、超お手軽なプログレスバーです。 PACE — Automatic page load progress bars PACE.jsの使い方：jQueryを読み込む jQueryを読み込んでいない方はjQueryをまずは読み込んでください。
Q. AngularJSとjQueryの違いは何でしょうか？ | POSTD
私が知っているJavaScriptライブラリといえばjQueryです。 しかし、新規プロジェクトのデフォルトのライブラリとして、プログラマ仲間がAngularJSを導入しました。 私はAngularJSについての知識が全くありません。jQueryと何が違うのでしょうか。 jQueryのタスクとして実行された関数群は、AngularJSでも使用できますか？ asked by user825904 Answer(s) jQueryはDOMのエレメントを操作・管理するための優れたツールです。 WebアプリケーションのようなデータのCRUDがなく、DOMのエレメント操作についてのみ言えば、 jQueryは最高のツールの一つです（AngularJSでも同様の操作が可能です）。 AngularJSは以下の特徴を持つフレームワークです。 双方向データバインディング MVWパターン（MVCの派生パターン）
タイルレイアウトjsIsotope
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
jQuery.serialScroll
Section 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit.
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
jQueryで簡単にドラッグ＆ドロップのソートを実装する方法
読む：3分 試す：15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQuery UIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ？」 心配ご無用！jQueryさんはやってくれます！！ まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ （24/7/19時点で ver 1.7.2） http://jqueryui.com/download （24/7/19時点で ver 1.8.21） ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
フロントエンド開発の為のコンポーネント集・「FORMSTONE」
