前の関連記事：SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされず
SyntaxHighlighterだけでも遅いのにFleXcrollを併用してからめちゃくちゃ表示が遅くなりました。もう少しスマートな導入方法を整理してみました。(2015.9.25追記。テーマ変更を機にfleXcrollの使用はやめました。）
もう一度デフォルトテンプレートから設定してIE8の表示がおかしい原因をさがす
（追記 結論としてはIE8の表示がおかしいのはSyntaxHighlithter+fleXrollが原因ではありませんでした。Blogger:IE8で背景の色が消える問題(1)どのあたりが原因かはわかったへどうぞ。）
あれこれ削ったりしてみたのですがIE8の表示がおかしなところがつかめませんでした。
IE8の表示を確認しながらデフォルトテンプレートからSyntaxHighlighterとfleXcrollの導入をしています。
さらに前回はfleXenv.updateScrollBars();を使ってfleXcrollを2回適用させていましたが、これも無駄なので再適用させないでいいように工夫しました。
まずSyntaxHighlighterの導入。
Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする
1 2 3 4 |
<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/><link href='shThemeDefault.cssのURL' rel='stylesheet' type='text/css'/><script src='shCore.jsのURL' type="text/javascript"></script><script src='shAutoloader.jsのURL' type="text/javascript"></script> |
shCore.cssもデフォルトのままです。
以下の部分を</body>の上行に挿入します。
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 |
<script type='text/javascript'> function path(){ var args = arguments, result = []; for(var i = 0; i < args.length; i++) result.push(args[i].replace('@', 'GoogleサイトにアップしたブラシファイルのページのURL/')); return result }; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js' )); SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all();</script> |
shCore.cssがデフォルトのままですので不要な縦スクロールバーも表示されています。
IE8では既に縦スクロールバーが表示されていません。
shCore.cssの.syntaxhighlighterに縦スクロールバーを消すoverflow-y: hidden !important;とiOS Safariの行ずれを修正する-webkit-text-size-adjust: 100%;を追加します。
1 2 3 4 5 6 7 8 9 |
.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の適用前にSyntaxHighlighterにjQueryでheightを設定しておく
SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされずではfleXcrollを適用してからheightを設定しましたが、今度は逆の順序にします。
SyntaxHighlighterにflexcroll_heightというclassをデフォルトで設定します。
</body>の上行に挿入した SyntaxHighlighter.all();の上行に以下を追加します。
1 |
SyntaxHighlighter.defaults['class-name'] = "flexcroll_height"; |
1 2 3 4 5 6 7 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"> $(window).load(function () { $.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);}); $('.flexcroll_height').addClass("flexcroll"); });</script> |
さらにflexcroll_heightクラスがついた<div>にflexcrollクラスを追加します。
再度表示を確認しましたがIE8は特に問題ありません。
$(window).loadを$(document).readyにするとfleXcrollは適用されませんでした。
shChore.cssをfleXcroll用にカスタマイズ
Chrome、IE8ともに影響なし。
次に以下を導入。
1 2 3 |
.flexcroll_height{ overflow: visible !important;} |
最後にfleXcrollの導入。</body>の上行に以下を挿入。
1 2 |
<link href='flexcrollstyles.cssのURL' rel='stylesheet' type='text/css'/><script src='flexcroll.jsのURL' type='text/javascript'/> |
ところが同じ方法をこのブログに導入しなおしてもIE8はおかしな表示のままです。
どうしたらいいのやら、、、
うーん、よく考えたらfleXcroll導入前にIE8は見たことがなかったのでいつから変になったのか気づかなかったのかも。
何が原因かさかのぼってみます。
jqueryで属性を変更させる方法
jQueryでclassを追加する方法
Jqueryで指定したIDのclassを変更したい - Yahoo!知恵袋
jQueryでclassを置換する方法
参考にしたサイト
jqueryで属性を変更させる方法
jQueryでclassを追加する方法
Jqueryで指定したIDのclassを変更したい - Yahoo!知恵袋
jQueryでclassを置換する方法
0 件のコメント:
コメントを投稿