Twitter関連のjQueryプラグイン｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
スクロールパネルを実装するjQueryプラグイン「jScrollPanel」を使用して、指定したユーザー（複数指定可）のTLをコンパクトに表示する方法が掲載されています。 マウスホイールイベントをJSで制御するjQueryプラグイン「jquery.mousewheel.js」を使用することで、マウスホイールでスクロールできるようになっています。 鳥アイコンやデザインはCSSで変更できるようになっています。角丸は画像でなく、CSS3を使用して実装されています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml
jQueryでTwitter風のスクロール自動読み込みADN LAB's Blog | ADN LAB's Blog
ADN事業部のh_nagayamaと申します、よろしくお願いいたします。 今回は「twitter風に、スクロールした時に次のコンテンツを自動で追加表示する」 という改修を行った際に使用したjQuery.Bottomプラグインの導入例を、 いくつか調査した内容と合わせて投稿します。 ■概要 jQuery.Bottomで行っていること ・scrollイベントが発生する都度、(指定した)全体の高さと現在の位置を取得して ・現在の位置が(指定した)末尾に到達または超えた時に、bottomというイベントを発生させます ■導入手順 1. githubからpluginをダウンロード https://github.com/jimyi/jquery_bottom 2. 処理を記述 githubのdemoを参照にしています、jquery1.3.2で動作することを確認済です。 <script type="tex
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
Facebookのウォールをブログに表示させるjQueryプラグイン
Twitterのツイートをブログに表示させる方法というのはいろいろありますが、今回は同じようにFacebookに投稿したウォールの内容をブログに表示させられんかなーと思って調べてみたら、「fb.wall」というjQueryプラグインがあったので、試しに実装してみました。 このjQueryプラグインを導入することで、ブログの任意のところにFacebookのウォールをデザインそのままに表示させることが出来ます。 実際の表示イメージ 導入方法はいたって簡単 導入は至って簡単です。 まずは、ここからファイルをダウンロードし、解凍したフォルダをサーバに設置しましょう。 このとき、フォルダ名とjsファイル、CSSファイルの名称を変更しておくといいかも。かなり長ったらしいので。 変更したところで支障はありませんしね。 次に、ブログのテンプレートを変更します。headタグ内に入れ込んで下さい。 <head
jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サンプル – 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http://miracle-ysdesign.com/blog/javascript/443.html
ASTRODEO 株式会社アストロデオ
ITクオリティ jQueryでできたメニューからひょっこり顔を出すアイコンの仕組み