modx＠GSF

 便利なスニペットを見つけたのでメモ。

pdfファイルとかzipファイルをアップしてダウンロードしてもらうとき、ファイルサイズが書いてあったほうがありがたいよね。
管理してるサイトで、実は今まで手動で書いてたのだが＾＾；
今後pdfのアップが増えることになったので、自動で計算できないかなぁ？　と検索したらスニペットありました。

SNIPPET: filesize

スニペットコール

[[filesize? &file=`filename` &unit=`unit` ]]

Where:

filename - the path to file (for example: assets/file/index.htm)
unit - the maximum unit (for example: KB)

ポイント
・filenameは最初に/なしでOK
・unitはKBにしても1MB超えると表示は1.19 MBみたいに出力してくれます。

便利です。

mootoolsとjQueryを一緒に使う方法でめでたく内容量に差があるボックスの高さをそろえるは完成したのだけど、IEで見てみたら、いろんなとこで背景やらボーダーやら消えまくり…。

ああーまたかよー、とがっくり。
IEはfloat使うと高確率で、ボックスの背景が消える。それも一回読んで、一瞬表示されるのに全部読み込みが終わると見えなくなってる、というなぞIE仕様。

参考サイト：IE6で背景が表示されない際にチェックすること

前にもやったけど、結局背景・ボーダーが消える要素に
position: relative;
をつけてやれば、ほとんど解決する。その要素にposition使ってなければだけど。

背景・ボーダーが消える要素にwidth指定という手もあるのだが、
floatを使って、入れ子のボックスにpadding、marginなんかを指定している場合、
すごくややこしいことになるので、position: relative;が使えないときの最後の手段にしてます。

しかし
position: relative;　とそのまま書くのは、どうも釈然としない。IEにしか必要ないんだからなおさら。

というわけで
参考サイト：CSSハック一覧 -- IE, Firefox, Safariなどなど:
を参考にIEハックで書くことに。

position/*¥**/: relative¥9;

これでIE7,IE8のみに適応される。IE6以下はもう無視ｗ。
こう書いておけば実際に必要なpositionと区別できるのでわかりやすいです。

ちまちまと各要素にIEハックをつけて、ようやく完成しました。へろへろ。

今日もmootoolsがらみです。
mootoolsのかっこいいにょろにょろメニューを使ってるるページで、スニペットMaxigalleryを入れて、画像をslimboxで表示したい！　と思った。

MaxiGallery（0.5.2）のスニペットコール

[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`4` &max_thumb_size=`80` &max_pic_size=`700` &order_direction=`ASC` &order_by=`pos`!]

としたら、slimbox動きません。サムネイル画像クリックすると、画像のみリンク先ページに表示する…。（mootoolsのにょろにょろメニューはうごく）

書き出したソース見るとheadの中で

<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
<script type="text/javascript" src="assets/templates/modxhost/drop_down_menu.js"></script>

<link rel="stylesheet" href="/assets/snippets/maxigallery/slimbox/css/slimbox.css" type="text/css" media="screen" />

    <script type="text/javascript" src="/assets/snippets/maxigallery/slimbox/js/mootools.js"></script>
    <script type="text/javascript" src="/assets/snippets/maxigallery/slimbox/js/slimbox_lang_en.js"></script>
    <script type="text/javascript" src="/assets/snippets/maxigallery/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="/assets/snippets/maxigallery/css/default.css" type="text/css" media="screen" />

となっていてmootoolsを2回読み込んでる。（赤字の部分）
また順番をいじるのかなーと思ったら、MaxigalleryにはJSライブラリを自動で挿入させないパラメータがあった。

&disable_js_libs=`1`（デフォルトは&disable_js_libs=`0`で自動挿入する）
をくわえてやったら

<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
<script type="text/javascript" src="assets/templates/modxhost/drop_down_menu.js"></script>

<link rel="stylesheet" href="/assets/snippets/maxigallery/slimbox/css/slimbox.css" type="text/css" media="screen" />

    <script type="text/javascript" src="/assets/snippets/maxigallery/slimbox/js/slimbox_lang_en.js"></script>
    <script type="text/javascript" src="/assets/snippets/maxigallery/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="/assets/snippets/maxigallery/css/default.css" type="text/css" media="screen" />

となって、mootools.jsは一回のみになり、無事slimboxが動くようになりました。

参考
Let's enjoy MODx Maxigallery - 0.5.2
MaxiGalleryのエラー（その２）

※MaxiGalleryのエラー（その２）にはMaxigalleryのマネージャー画面でもドロップダウンメニュー（mootoolsのにょろにょろメニュー）を動かす方法も出てますが、Maxigalleryのマネージャー画面は基本管理者しか入らないので、必要ないので修正していません。

G研のサイトでは使ってないけど、他のサイトで苦労したのでメモ。

modxのデフォルトテンプレートに入っているheader menuはwayfinderで作られてて、mootoolsというjavascriptのライブラリを使って、かっこよくにょろにょろと下に伸びる。
これいいわ、と使っていたのだけど、その後いろいろあって、jQueryのライブラリを使ったのにいいのがあって、一緒に使いたくなった。

使いたかったのは
複数のブロック要素の高さを揃えてくれる「fixHeight.js」

css3のdisplay: box;を使えばjavascriptいらないのだけど、相変わらずIEがダメだし、他のブラウザもいまいち挙動がぶれるしで、残念ながらまだ実用はきびしい。
なので　fixHeight.js　をつかってみることに。

しかしmootoolsと一緒に使うと、やっぱりというか、動かない…orz
どちらかのみなら問題なく動くのに。

mootools　jQuery　でググルと悩んでる人いっぱいいて、回避作も複数でてきた。
結局一番わかりやすかった
jQueryとmootoolsを同時に使う方法
を参考にしました。

問題なのは読み込む順番。
-------順番------
1番目　jQuery.js
2番目　fixHeight.js　←ボックスの高さそろえる
間に
jQuery.noConflict();
var j$ = jQuery;
3番目　mootools.js
4番目　drop_down_menu.js　←にょろにょろメニュー
------------------
以下にhead部分のソースです。

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/fixHeight.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
-->
</script>
<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
<script type="text/javascript" src="assets/templates/modxhost/drop_down_menu.js"></script>

さらにjquery.jsとfixHeight.jsを開いて
「$」をすべて「j$」に変換。
※！うまくいかなかったときのために変換前のファイルはとっておくこと！

保存して指定の場所にアップロードしたら、どちらもうまく動きました。

 CSSのid名に関してちょっと不思議な現象を発見しました。

div#Container ←外側ボックス、背景画像指定
div#contents ←本文部分　フロート右
div#MenuBox ←メニュー　フロート左
div#footer ←フロートクリアしてフッター

という構造の場合、div#Containerの背景が1画面分しか表示されなくてスクロールすると消える、という現象が起きます。
これを防止するためにcssには

html, body {
min-height: 100%;
height: auto !important;
height: 100%;
}
#Container{
height:100%;
}

とhtml, body両方にも高さ指定する必要があります。

ところがこれ、
div#container
と小文字にすると、html, bodyの指定がなくても、背景消えません！

古いページを修正していて、id名大文字小文字がバラバラで気持ち悪かったので、div#containerをdiv#Containerに直したら、背景消え現象が発生して気が付きました。cssよく見てみたら、div#containerのときはhtml, bodyの指定してなかった…。

クラス名やid名に大文字が使えないというわけでもないのに、これはなんでしょうねー？？
他のクラス名やid名でもこうゆうことはあるのでしょうか？