前の関連記事：SyntaxHighlighterにfleXcroll(1)カスタムスクロールバーを表示させる
縦スクロールバーを消す方法がなかなかわかりませんでした。ところがfleXcrollではheight: auto;がサポートされていないのに気づいたのでそれまでのアプローチを変えて解決しました。
fleXcrollはheight: auto;がサポートされず
fleXcrollをclassにつけると高さが縮まって縦スクロールバーがでるのでもうこれはどうしようもないのでは、と諦めかけました。
しかし、fleXcrollはheight: auto;がサポートされず高さをpxで指定しないといけないということがわかりました。
ちゃんとユーザーガイドの最初に書いてありました。
height: auto; style is not currently supported.ということでheightをそれぞれ測定して設定することにしました。
fleXcroll V2.0 User Guide
ｊQueryで.syntaxhighlighter.flexcroll.flexcrollactive tableのheightを測定して設定
Syntaxhighlighterが作成するtableの高さを測定しそれに17px加えたものをheightに設定すると丁度よくなることがわかりました。
たぶんスクロールバーの高さが15pxなのであとはマージンがどこかに1pxあってそれで15+1+1=17pxになるんだと思います。
高さの測定と設定はjQueryを使いました。
まずはｊQueryをロードする必要があります。1.3.2でもいけました。
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
1 2 3 4 5 6 |
<script type="text/javascript"> $(window).load(function () { $.each($('.syntaxhighlighter.flexcroll.flexcrollactive'), function(){$(this).height($(this).find("table").height()+17);}); fleXenv.updateScrollBars(); });</script> |
最後に fleXenv.updateScrollBars();でfleXcrollをリロードしています。
fleXcrollでSyntaxHighlighterのスクロールバーをカスタマイズする方法：まだ未完成
SyntaxHighlighterはBlogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするまで設定してあると状態とします。
shCore.cssの変更箇所
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.syntaxhighlighter a,/*.syntaxhighlighter div,*/.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea { -moz-border-radius: 0 0 0 0 !important; -webkit-border-radius: 0 0 0 0 !important; background: none !important; border: 0 !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0 !important; outline: 0 !important; overflow: visible !important; padding: 0 !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; min-height: inherit !important; min-height: auto !important;}.syntaxhighlighter { width: 100% !important; margin: 1em 0 1em 0 !important; position: relative !important; overflow: auto !important; font-size: 1em !important; overflow-y: hidden !important; -webkit-text-size-adjust: 100%;}.syntaxhighlighter.flexcroll.flexcrollactive{ overflow: visible !important;} |
45行目はiOS Safariで行番号がずれないための設定です。
44行目の設定は全てのpreタグのclass-nameにfleXcrollを設定するならいらないでしょう。
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head> |
</body>の上行は以下のように入力。
1 2 3 4 5 6 7 8 9 10 11 12 |
SyntaxHighlighter.defaults['class-name'] = "flexcroll"; SyntaxHighlighter.all(); </script> <link href='flexcrollstyles.cssのURL' rel='stylesheet' type='text/css'/> <script src='flexcroll.jsのURL' type='text/javascript'/> <script type="text/javascript"> $(window).load(function () { $.each($('.syntaxhighlighter.flexcroll.flexcrollactive'), function(){$(this).height($(this).find("table").height()+17);}); fleXenv.updateScrollBars(); }); </script></body> |
IE10でもiOS Safariでも問題なく表示されます。
弱点は一旦普通のスクロールバーが表示されてから入れ替わることと、動作が遅いことです。
IE8ではなんかおかしな表示になります
IE8ではおかしな表示になったのは確かですがデフォルトテンプレートから導入すると問題ありませんでした。原因はfleXcrollには関係なく、なぜかモバイルサイトを無効にすると背景が消えるようです。（SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法）
WindowsXPにはIE9以上はインストールできないそうですね。知りませんでした。
WindowsXPのIE8で上記の設定のページを表示させると背景の色が消えて表示されます。
もちろんfleXcroｌｌのスクロールバーも表示されません。
まあ見れないことはありません。
しかしもう一度同じページをリロードすると今度はfleXcrollのスクロールバーが表示されましたが、heightの設定がない状態です。
ちょっとこれはいけませんね。同じページなのに表示のされ方が変わってくるのも変ですね。
参考にしたサイト
fleXcroll V2.0 User Guide
fleXcrollではheight: auto;はサポートされていません。height: pxの設定が必須です。
Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers
GoogleによるjQueryホストサービスです。
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法
thisの使い方。$(this).children("ul")ではgrandchildはダメなようです。
ページ読み込み後にjavascript(jQuery)を実行する方法｜Webのこと｜-No Fate-
SyntaxHighlighterが作ったtableが出来上がってからheightを測定しないといけません。
スタイル操作：高さと幅｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
サンプルがあってとてもわかりやすかったです。
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
網羅的に解説してくれています。
jScrollPane - cross browser styleable scrollbars with jQuery and CSS
fleXcrollがダメならこれを使ってみようと思っていました。
0 件のコメント:
コメントを投稿