jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQueryで複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする - 雑想空間
はまったのでメモ。 jQuery でセレクタを複数条件で指定したい場合などがある。 例えばこんな場合 <table> <tr> <td class="a" id="1">a-1</td> <td class="a" id="2">a-2</td> <td class="a" id="3">a-3</td> </tr> <tr> <td class="b" id="4">b-4</td> <td class="b" id="5">b-5</td> <td class="b" id="6">b-6</td> </tr> </table>こんなテーブル構造があった場合。 classが"a"、idが"5"のカラムの色を変えたい場合。 $(function() { $(".a,#5").css("backgroundColor", "red"); });これでOK。 これは or 条件ですね。 cl
要素を無限スクロールさせるjQueryプラグインいくつか - かちびと.net
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
超面白！文字を選択してその文字にコメントできるJSライブラリ:phpspot開発日誌
Home - Annotator - Annotating the Web 超面白！文字を選択してその文字にコメントできるJSライブラリ。 ブログ等で記事のここにコメントしたい、といった場合に選択するとアイコンがあらわれます クリックするとコメント書き込みフォームがポップアップされます Saveボタンを押すと保存され、マウスオーバーでコメントが出るようになります コメント量の多いところはその分黄色く表示されます ストレージは自分のサーバに用意することもできますが、ホスティングを使う事もできます。 面白い上に、インタフェースが良い感じです。これを使ったサービスを作ってみるのも楽しそう。 関連エントリ スマホを判別するのに便利なJSスニペット ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 JavaScr
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
jQuery の .end() メソッドが便利ですよ | JavaScript | かたつむりくんのWWW
たぶん jQuery を使い始めたばかりの人はあまり使わないであろう .end() メソッドですが、これ、かなり便利なんですよね。 僕も最初はあまり使っていませんでしたが、最近は積極的に使っています。ソースも短くかけるうえに、パフォーマンス的にも良いので是非使っていきたいメソッドです。 今回は、簡単な例で .end() を紹介してみます。 今、次のようなソースがあるとします。アコーディオンさせる場所などで良く見そうなソースです。 <dl id="hoge"> <dt>.end()を使う</dt> <dd> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul> </dd> </dl> このような html に対して、次のような操作を行いたいとします。 dt 内のテキ
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
jQuery Gallery Plugin
jQuery Gallery Plugin jQuery Gallery Plugin take a grouping of images and turn it into an flash-like image/photo gallery. » Project page (Google code) » Download Demo Quick Start Starting with jQuery Gallery is really easy! Setup: Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and l
ウノウラボ Unoh Labs: 画像の遅延読み込み
yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer - かちびと.net
使い方次第ではなかなか便利かも、と思った のと諸事情でメモがてら記事にします。よく あるPDFファイルへのリンクを、その場で Google Docs Viewerで閲覧出来るように するjQueryプラグイン・gDocsViewerです。 このままだとアレですが、工夫すれば結構 便利になりそう。 アンカータグだけ貼ればビューアが貼り付けられるのでソースもすっきりします。まぁあんまり使用頻度は無いかもですけど、PDFへの直接リンクはなかなか不評だったりするのでこういう手を使うのもありかなと思いました。まぁアイデア的なメモですね・・ 普通にリンクしただけですが、このようにGoogle Docs ViewerでGoogleのSEOスターターガイドが貼り付けられています。 少し装飾された状態です。こちらもSEOスターターガイド。お前どんだけ始まりたいんだみたいな感じですみません。ほかに公開していい
» jQueryでもはまるクロスブラウザ問題まとめ: エスキュービズム ラボ Blog
IEとfirefoxなどのブラウザ間でjavascriptの仕様が違うというクロスブラウザ問題。最近はjQueryなどのライブラリを用いることによって、その違いをライブラリが吸収し、開発が容易になっています。しかし、残念ながら、jQueryを使っても、結構、クロスブラウザ問題にはまってしまいます。以下、そのようなはまった点についてまとめみます。 １．連想配列の最後のカンマ。firefoxだと無視されますが、IEだとエラーになります(例)。分かっていても、ついやってしまいます。 ２．width/heightの解釈の違い。前回のブログにも詳細が書いてあります。jQueryのwidth()/height()でもその違いは吸収できません。前回のブログにあるように、DOCTYPEをきちんと指定するしかないようです。 ３．z-Indexの解釈の違い。firefoxではz-Indexが最優先なのに対し、
jQueryでページ遷移時にフェードインフェードアウトの効果をつける | wald-grun/blog
公開日: 2011年11月3日更新日: 2017年3月28日著者: kngsmymカテゴリー: Javascript, jQuery, その他タグ: Javascript, jQuery jQueryのfadeInを使ってページ遷移時のフェードインフェードアウトをやってみましたので自分的メモ。 こちらのコードを参考にさせていただきました。 ページ遷移時にフェードイン・フェードアウト ※IEなどについて補足しました 20111206 jQueryでページ遷移時にフェードインフェードアウト・・・の補足 コード jQueryを読み込んで、以下のコードをheadに記述します。 フェードさせたい要素を#wrapで囲っているという前提です。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/ja
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしていたのです。
jQuery Easing Plugin | エフェクト動作パターン集プラグイン
jQuery Easing Plugin は、jQuery のエフェクト動作パターン集のようなプラグイン。jQuery にも、linear と swing のシンプルな動作パターン（ easing ）は用意されているが、jQuery Easing Plugin を導入すると、30種類以上もの、変化に富んだ動作パターンを使えるようになる。 エフェクト動作パターンは、animate などで使うことが多い。（参照：animate の動作パターンの指定方法） 導入 jQuery Easing Pluginより、jquery.easing.1.3.js を、ダウンロード。「 jquery.easing.1.3.js 」ファイルを、自分のサイトのサーバーにアップロード。 使用したいページで、下記のようにして読み込む。「 jquery.easing.1.3.js 」ファイルへのパスは、アップロードした場
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
pxt | 404 Not Found.