CSSのiframeを二つ並べて、スクロールを連動させる
僕が使う都合上、左はoverflow:hiddenにして、右のフレームにしかスクロールバーが出ないようにしている。 右のスクロールバーを動かすと両方のフレームが連動してスクロールされるようにするにはjQueryを使ってこう書く。 #migiでscrollイベントが起こったら、#hidariのscrollTopを#migiのscrollTopと同じところまでスクロールする。 ってことをしている。 上のサンプルもちゃんと連動してスクロールされるはず。 MacのSafari, Firefox, Google Chrome, Opera,あとiPhoneのmobileSafari(二本指スクロール)で動作確認した。
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
Webサイトにスライディングサイドバーを設置したい
Webサイトにスライディングサイドバーを設置したいです。 下記サイトのようなスライディングサイドバーをsidebar-leftに表示したいと思っています。 仕組みの解説をご教授お願いします。 Sliding Side Bar http://www.andrewsellick.com/examples/sliding-si … やりたいこと： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜sidebar-left｜ main ｜sidebar-right｜ ｜＿ ｜ ｜ ｜ ｜こ｜ ｜ ｜ ｜ ｜こ｜ ｜ ｜ ｜ ｜に｜ ｜ ｜ ｜ ｜表｜ ｜ ｜ ｜ ｜示｜
3_greenblue01 - スクロールしても追従するメニュー （改良版）
3_greenblue01 当画面のデザインは、 3_greenblue01 を使用しています。 スクロールしても追従するメニュー (改良版) スクロールしても追従するメニューを作成しましたが、ちょっと気に入らない仕様だったので、改良版を作成してみました。この方法は、北研のQHM Proのサイトと同じような動きをします。 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ常に表示する方法です。下までスクロールしてフッターが表示されると、フッターがすべて表示されるまでスクロールしますが、そのときメニューは固定しているのではなく、上にスクロールし自然な感じで見やすくしてくれます。文章での説明は難しいので、画面サイズを小さくして実際の画面で確認してください。 ２カラムと３カラムの両方に対応しています。CSSとjQueryを使用します。 ３カラムの場合、どちら
知っておくべきjQueryオブジェクトの扱い :: 5509
jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基本といえば基本ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。 jQueryオブジェクトからDOMにアクセスする $(‘#id’)にすれば#idを取得できますが、この状態だとDOM要素を選らんでいる状態ではないので、DOM要素のプロパティにはアクセスできません。 $('#link').href // これは無理 1-1. $()[0] 要素を引数にしたjQueryオブジェクトはDOM要素が配列で格納されている状態なので $('#link')[0] // DOM要素の参照になる console.debug($('#link')[0]); // 評価結果 - DOM要素 // とすることで配列の中からDOM要素を指定することができるので、プロパティにアクセス
画面いっぱいに背景画像 サンプル #4 ::: Webデザインレシピ
Web Design Recipes Sample Perfect Full Page Background Image with maxImage Scaling Plugin maxImage Scaling Plugin jQueryのプラグイン、maxImage Scaling Pluginを使って画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 1024 x 768 ピクセルというサイズですが、横幅がディスプレイサイズに合わせて表示されていると思います。 当然拡大しているので画像はぼやけて表示されますが、元画像の大きさを大きくすれば軽減されます。 jsのパラメータにoverflow:'auto'とするとスクロールOKになります。たくさんのパラメータが用意されているので色んなニーズに応えてくれそうです。 画像の縦位置もtop、center、bottom の3種類から選
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
impress.jsライクなダイナミックなプレゼンテーションを作成するjQuery依存タイプのライブラリ・jmpress.js - かちびと.net
なかなか斬新なプレゼンを作成出来る事で ちょっと話題になった impress.jsという jsライブラリがあるんですが、これのjQuery 依存型があったのでご紹介します。元々 jQueryを使用しているサイトならこちら のほうが導入が楽かもですね。 3Dなプレゼンを作成出来るライブラリ、impress.jsのjQuery版です。impress.jsに関しては以下をご参照下さい。 3Dで斬新なプレゼンが作れる『impress.js』の使い方をざっと説明してみるよ で、このjQuery依存型が出てきました。 デモを作りたかったんですが、昨日今日は少し時間がなくて出来ませんでした。というわけで公式のデモをどうぞ。 Sample もちろんキーボードでも操作できますし、impress.js同様にハッシュチェンジイベント対応済みです。 コード <script type="text/javascrip
Beautiful Background Image Navigation with jQuery | Codrops
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the […] In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
MagicEdit.com
Updated December 21, 2011 One of the most effective ways of managing your HTML is to use server side includes (SSI) for blocks of HTML that are reused across many pages of your site. Using an include for your navigation menu in particular is a great idea, since updating links when you add a new page can be done in only one file and propagate instantly across your whole site. From a design and usab
ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」:phpspot開発日誌
Minimit Gallery Plugin - Download ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 このギャラリー他にはない感じで次のように要素をCSS3のプロパティなんかを駆使して変形、アニメーションさせながら切り替える等のインタフェースを提供します。 デモを見てみるのが一番速いですが、とても面白いです トランプのカードを拡大するような（？）。ちょっと動きを見ていただくのが一番速そう。 リストもマウスに応じてクネクネ動きます。 クネクネ。 マウス位置に応じて拡大。 CSS3とjQueryを組み合わせることで、もっといろんなことができそうですね。 数年後にはこうしたライブラリはCSS3等を応用しまくっていて、ちょっとソース見ただけだとどうやって実装しているか、よく分からないなんていう状態になっていそうな気がします 関連エントリ PCでもスマホでもスワ
jQuery plugin: Tablesorter 2.0
tablesorter.com 2024 著作権. 不許複製 プライバシーポリシー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/
finefinefine.jp