SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされず

前の関連記事:SyntaxHighlighterにfleXcroll(1)カスタムスクロールバーを表示させる


縦スクロールバーを消す方法がなかなかわかりませんでした。ところがfleXcrollではheight: auto;がサポートされていないのに気づいたのでそれまでのアプローチを変えて解決しました。

fleXcrollはheight: auto;がサポートされず


fleXcrollをclassにつけると高さが縮まって縦スクロールバーがでるのでもうこれはどうしようもないのでは、と諦めかけました。

しかし、fleXcrollはheight: auto;がサポートされず高さをpxで指定しないといけないということがわかりました。

ちゃんとユーザーガイドの最初に書いてありました。
height: auto; style is not currently supported.
fleXcroll V2.0 User Guide
ということでheightをそれぞれ測定して設定することにしました。

jQueryで.syntaxhighlighter.flexcroll.flexcrollactive tableのheightを測定して設定


Syntaxhighlighterが作成するtableの高さを測定しそれに17px加えたものをheightに設定すると丁度よくなることがわかりました。

たぶんスクロールバーの高さが15pxなのであとはマージンがどこかに1pxあってそれで15+1+1=17pxになるんだと思います。

高さの測定と設定はjQueryを使いました。

まずはjQueryをロードする必要があります。1.3.2でもいけました。
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
これを下のコードの前に書いておきます。
<script type="text/javascript">
   $(window).load(function () {
         $.each($('.syntaxhighlighter.flexcroll.flexcrollactive'), function(){$(this).height($(this).find("table").height()+17);});
         fleXenv.updateScrollBars();
      });
</script>
各.syntaxhighlighter.flexcroll.flexcrollactiveの中にあるtableのheightを測定してそれに17pxを加えたあと.syntaxhighlighter.flexcroll.flexcrollactiveのheightに設定しています。

最後に fleXenv.updateScrollBars();でfleXcrollをリロードしています。

fleXcrollでSyntaxHighlighterのスクロールバーをカスタマイズする方法:まだ未完成


SyntaxHighlighterはBlogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするまで設定してあると状態とします。

shCore.cssの変更箇所
.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;
}
2行目と47行目から49行目までが変更部分です。

45行目はiOS Safariで行番号がずれないための設定です。

44行目の設定は全てのpreタグのclass-nameにfleXcrollを設定するならいらないでしょう。
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
</head>の上行でjQueryをロード。

</body>の上行は以下のように入力。
 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で上記の設定のページを表示させると背景の色が消えて表示されます。

もちろんfleXcrollのスクロールバーも表示されません。


まあ見れないことはありません。

しかしもう一度同じページをリロードすると今度は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がダメならこれを使ってみようと思っていました。

次の関連記事:SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法

PR

0 件のコメント:

コメントを投稿