どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s
2010年08月14日20:45 カテゴリトピック JQueryプラグインJScrollPaneのIE7でのバグ http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html どんな要素にでもスクロールバーを表示させることができるJQueryプラグインです。 IE7でのみ起こりうるエラーを見つけたので書いておきます。 （７のみ検証。IE全部かも？Chorome6.x、firefox3.6.xは問題なし） scrollbarMargin + scrollbarWidth <= 要素の幅width でないとエラーが発生してスクロールバー表示されません 気をつけましょう あまりこういう使い方する人はいないと思いますがね・・ 正しい例 <head> <script type="text/javascript"> $(fun
jQueryプラグイン「jscrollpane.js」がchromeでうまく動かない。
jQueryのプラグインで、divのスクロールバーのデザインを変更できるjscrollpane.js、基本的に簡単端で便利なんですが、うまく動かない現象が発生しました。 【Google Chromeで確認された現象 】 jscrollpaneを組み込んだページを表示したときはスクロールバーがきちんと表示されるのに、リロード（更新）するとスクロールバーが出なくなる。 Chromeの他にもwebkit系のブラウザでは発生するようです。 スクロールバーが出なくなってしまうので、コンテンツが途中で切れてしまい、みられなくなります。 発生条件はやや不安定、というか起こるときと起こらないときがあるようで最初混乱しましたが、リロードすると発生するというのはほぼ確実なようです。 【原因】 スクロールさせようと思ったdivの中身がimgのみで、高さを指定していなかったことが原因でした。 jscrollpan
前回の日記からだいぶ時間が空いてしまいました…。 実は今、WordPressで「ゆうひ＊はうす」を構築しようと、いろいろやっている最中なのです。 その中で一つ、スクロールバーのデザインを変えてくれる、jQueryを使った「jScrollPane」を設置しようとしてつまづいてしまいました…。 スクロールバーはCSSだけでも変えられますが、それはIEのみ対応なので、他のブラウザを使っている人には普通のスクロールバーに見えてしまうわけです。 でもこのjScrollPaneを使えば、どのブラウザでも同じデザインで見ることができます。 だからどうしてもこのjScrollPaneを使いたかったんです！ 3日ほどあれこれ試して、やっと正常に動きましたヽ(´▽｀)/ jScrollPaneの設置方法はいろんなサイトで紹介されていますが、だいたいのところがHTMLでの設置方法。 でも私は、WordPress
束雪qq玩网提供QQ图片、QQ美女照片、QQ帅哥照片、非主流QQ头像、QQ个性签名、QQ情侣头像图片、女生头像、男生头像以及新增的QQ文字图片等内容。
FirefoxもChromeもなかったころ、乙女の間で行われたスクロールバーの装飾はCSSが基本でした。今はというと、CSSで装飾してもIEでしか見られません。FirefoxやChromeでは普通のスクロールバーです。どうしても装飾したい場合、jQueryを使います。 使いドコロ ページ全体のスクロールバーの装飾は、今あまり見かけません。このjScrollPaneも基本的には、更新履歴など、限られた範囲内に多くの情報を掲載する、インラインフレームの様なスクロールエリアに使います。 今回紹介するjScrollPaneはgirl! vol.3告知サイトの下部にあるサンプル集や、PSP用乙女ゲーム青春はじめましたの更新履歴部分などに使われています。 1.使うもの 公式サイトから必要なものをDLします。 jQuery jquery.jscrollpane.min.js jquery.mousewh
jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te
スクロールバーのデザインが簡単に変更できます、ブラウザのスクロールバーがサイトのデザインになじまない時等によいですね。 マウスのスクロールにも対応しています。パラメータを指定したり、スタイルシートを変更することで、垂直スクロールや横スクロールや色などデザインを変更できます。 配布先と使い方 jScrollPane 配布先の「download」の箇所より jquery.jscrollpane.cssとjquery.jscrollpane.min.jsと、 マウスホイールの為にjquery.mousewheel.jsをダウンロードします。 jQuery本体とjquery.jscrollpane.cssとjquery.jscrollpane.min.jsとJQuery.mousewheel.jsをヘッド内で読み込みます。 <script type="text/javascript" src="j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
