mootoolsとjQueryを一緒に使う方法

  • 2011.08.22 Monday
  • 17:08
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$」に変換。
※!うまくいかなかったときのために変換前のファイルはとっておくこと!

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

id名の大文字小文字のなぞ

  • 2011.07.08 Friday
  • 11:33
 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名でもこうゆうことはあるのでしょうか?

PHxでelseifみたいな使い方をしたいとき

  • 2011.04.21 Thursday
  • 14:58
 PHxはMODxのテンプレート変数などの値によって、条件分岐や表示非表示を切り替えることのできるプラグインです。
便利なんだけどプログラム系でないわたしは、まず書き方を理解するのが大変でした^^;

■書き方の例
・テンプレート変数hogeの値が1のときは画像1を表示し、それ以外のときは画像2を表示する。
[*hoge:is=`1`:then=`<img src="assets/images/1.png" alt="1の画像" >`:else=`<img src="assets/images/2.png" alt="2の画像" />`*]


・テンプレート変数hogeの値が1のときは画像1を表示し、それ以外のときは何も表示しない。
[*hoge:is=`1`:then=`<img src="assets/images/1.png" alt="1の画像" />`:else=``*]

こんな感じでチャンクやテンプレートに書きます。
dittoのテンプレートに使う場合は[+hoge でプレースフォルダにします。

詳しくはMEGUさんのとこの解説などをご覧ください。


さて、ここで以下のような振る舞いをさせたいときどうするか?
テンプレート変数hogeの値が1のときは画像1を表示し、値3のときは画像3を表示し、それ以外のときは何も表示しない。

実はPHxにはelseifに相当する文法がない!
参考:MODx : phx の使い方


これでしばらく悩みましたが、あっけなく解決。値1のときの振る舞いと値3のときの振る舞いを別々に書けばいいのです。

[*hoge:is=`1`:then=`<img src="assets/images/1.png" alt="1の画像" />`:else=``*]
[*hoge:is=`3`:then=`<img src="assets/images/3.png" alt="3の画像" />`:else=``*]

どちらも値がちがう場合は何も表示しないので、実際に表示されるのは片方のhogeの値のみです。

ロリポでMySQL4→MySQL5でmodxが文字化けしたときの対処法

  • 2011.01.27 Thursday
  • 18:08
MODx Evolution における SQL インジェクションの脆弱性」をうけて、ほったらかしにしていたmodxの某サイト(G研サイトじゃないよ)もアップデートすることにした。なんせmodx0.9.6のままだ。そこもロリポ使ってまして、MySQLもバージョン4のままだったので、こいつもバージョン5に移行することにした。

ロリポのユーザーページから、データベース移行ツールでバージョン5に移行。以前もやったし、問題ないと思ったのだが、MySQLではちゃんと表示されてるのに、なぜかmodxでは日本語が文字化けしたorz
modx上でに化けてるところを入力して保存しなおすと直るのだが、こんどはMySQL上で化けてる。
このサイトはコンテンツページが少ない(一桁だ)ので、もう新しいmodxをインストールしてページ手動で直そうかなぁ〜、と思ったけどぐぐったら解決策でてました。

SOHO KOEDAをMODxで(文字化け解消)

こちらを参考に
/manager/index.php(143行目)
/manager/includes/extenders/dbapi.mysql.class.inc.php(107行目)

mysql_query('SET NAMES utf8;');
を追加してアップしたらMySQL5でも文字化け直りました。

んで無事modxのほうも1.0.5Jにアップデート完了です。
このサイトはAjaxSearch使ってなかったので、特にスニペットコールの変更もなしです。

ajaxsearch1.8.4で検索の最大文字数を変更する

  • 2010.12.07 Tuesday
  • 17:56
ajaxsearch1.8.4デフォルトでは検索の最大文字数が30文字(日本語だと15文字)です。
英語圏では問題ないでしょうが、日本語で少し長い商品名などをいれるには少々足りないことも。

AjaxSearch Wikiをみると、パラメータに 最小文字数 &minChars  と 最大単語数 &maxWords はありますが最大文字数がありません(ToT)

いったいどこで変更するのか探し回りましたが
最大文字数の変更は全角スペースでも検索の変更と同じファイルにありました。

assets/snippets/ajaxSearch/classes/search.class.inc.php
の18行目
define('MAX_CHARS',30); // maximum number of characters
の30を任意の文字数に変更すればOKです。

calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>

たいやき

selected entries

categories

archives

recommend

recommend

recommend

終わり続ける世界のなかで
終わり続ける世界のなかで (JUGEMレビュー »)
粕谷 知世
2011年度SOG賞 シスターフッド賞

recommend

魔法少女まどか☆マギカ 1 【通常版】 [DVD]
魔法少女まどか☆マギカ 1 【通常版】 [DVD] (JUGEMレビュー »)

(全6巻)2011年度SOG賞 シスターフッド賞

recommend

recommend

音楽の在りて
音楽の在りて (JUGEMレビュー »)
萩尾 望都
2011年度SOG賞 候補作

recommend

私のミトンさん
私のミトンさん (JUGEMレビュー »)
東 直子
2011年度SOG賞 候補作

recommend

recommend

recommend

recommend

recommend

玉工乙女
玉工乙女 (JUGEMレビュー »)
勝山海百合
2010年度SOG賞 候補作

recommend

recommend

MODxでつくる!最強のCMSサイト
MODxでつくる!最強のCMSサイト (JUGEMレビュー »)
MODxフォーラムJapanese Co
初心者はとりあえず買っとけ。

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM