スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」
スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」を公開します。 １．サンプル サンプルを用意しました。 サンプル スクロールして「タイトル4」が表示されると、ページ右下からおすすめ記事のボックスが表示されます。 また、逆スクロールして「タイトル4」が表示されなくなるとボックスが隠れます。 さらに、ボックスが表示されているスクロール位置でリロードを行うとボックスが再表示されます。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.recommendfooter.js」にリネームしてください。 jquery.recommendfooter_0.0.1.js 以下、設定方法です。 ３．HTML 下からにゅるっと表示させたいHTMLを、body終了タグの前に次のように記述しま
[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage
WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc
ページ下部で折りたためるメニュー実装サンプル:phpspot開発日誌
Creating a Toggle CSS3 Bottom Navigation Bar ? Script Tutorials ページ下部で折りたためるメニュー実装サンプル。 次のように、クリックで開閉して折りたためるメニューを実装するCSS3+jQueryなサンプルが公開されています サンプルのダウンロードも出来るので実装は簡単にできます。 スタイルもCSSで変えられるということで独自デザイン調整は簡単ですね。 サイトに収まり切らないようなメニューを入れておくと使いようによってユーザビリティ向上に繋げられそうです。 関連エントリ CSSのナビゲーションメニューサンプル５５ ミニマムで場所を取らないCSSメニューの実装例
ウェブページに固定表示させるエレメントの効果的な使い方
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 Fixed position web elements [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。 エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。 もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動
Flickrのphotostreamをサイト内でスマートにギャラリー化「Flickr photobar Gallery」
TOP > WebDesign > Flickrのphotostreamをサイト内でスマートにギャラリー化「Flickr photobar Gallery」 世界最大の写真共有サービスFlickr。国内でも利用していると言う方も多いのではないでしょうか？今日紹介するのはFlickrの写真を簡単にスマートなギャラリ−にすることができる「Flickr photobar Gallery」です。 クリックするとバーがせりでてくるように設計されていて、既存のWEBサイトにも無理なく、ギャラリーを統合することができます。実際のデモも公開されていましたので「Flickr Photobar Gallery Demo」からどうぞ。 詳しくは以下 ギャラリーはjQueryによるもので、サイトへの実装も単純です。呼び出すフォトストリームは解凍後のフォルダにあるjquery.Flickrphotobar.
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」:phpspot開発日誌
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」 2010年05月27日- Plugins | jQuery Plugins 指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」。 $(element).footer() みたいにするだけで、element に指定した要素をページのフッターに吸い付くように配置することが出来る便利なプラグインです。 ブラウザの高さを変更してもJavaScript側で調整してくれます。 通常の例。div#footerブロックは最初の要素の直下に来てます。 フッター設定した例。ブラウザの下部に常に配置されます。 色々方法はあると思いますが、実装が簡単なので便利かもしれませんね。 関連エントリ HTMLで雑誌のような美しい段組みレイアウト
ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」:phpspot開発日誌
jQuery Fubar ? How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」。 ページフッターに、ツールバーなどでソーシャルサイトへの投稿リンクなどが表示されていると便利なだけでなく、ソーシャルによって情報が広まる可能性も高めてくれます。 そういうツールバーを簡単に実装するためのjQueryプラグインがチュートリアルとともに公開されました。 実装された画面は次のようになっており、なかなかクールな上、ガクガク動かずに固定なので目障りにもなりません。 同じような物を実装したい場合があった際に覚えておくとすぐに実装でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA