IE9.jsを使うと古いIEの挙動をW3C準拠にしてくれるので大変便利です。
が、あまり調子に乗って使っているとたまに妙なバグに出会うことも。
ある要素をクリックするとaddClassでクラスを付与し、もう一度クリックするとremoveClassでクラスを取り除くような切り替えスイッチを作ったんですが、どうも背景画像周りの動作がうまくいかない。
そこで、うまくいかない部分のclass名を取得して吐き出してみました。すると、
added ie7_class0
という表示。
「added」はaddClassで追加したものなので大丈夫です。それより問題は、追加した覚えのない謎の「ie7_class0」。
これ、気になったので他の部分でもクリック時のクラスを出してみると、「ie7_class4」など他のパターンもありました。
どうもこのよく分からない追加クラスがbackground-imageを独自に持ってしまっていて、そのままでは背景画像がきちんと表示されないようです。
こいつらの取り除き方が分からなかったので、結局実装方針をちょっと変えることで対応しました。
IE9.jsは便利だけど、JS結構使うサイトだと意味不明な不具合が起こるかもしれないので気を付けましょう。

more from fujii's IE9.jsが勝手にクラスを付与してしまう

・IE9.js
IE5.5～IE8の間の様々な制約やバグを解決、というか矯正してくれます。
べんり。

more from fujii's IEの動きをW3C標準に近づけるIE9.js

良いソースを見つけたのでメモで。
——————————–
var wholeheight = Math.max.apply( null, [document.body.clientHeight , document.body.scrollHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight];
——————————–
以下の4つの値を比較して一番大きいものを全体の高さとして取得しています。
document.body.clientHeight
document.body.scrollHeight
document.documentElement.scrollHeight
document.documentElement.clientHeight
長いページだとclientHeightよりscrollHeightのほうが大きいですが、スクロールバーが出ないほど短いページだった場合は、clientHeightのほうが大きくなります。
というわけで、比較してどちらか大きいものを採用と。
document.body.scrollHeight
document.documentElement.scrollHeight
のように2つ書き方が混ざっているのは、互換モードと標準準拠モードのどちらにも対応するためです。
これ使ったらすごくラクでした。

more from fujii's javascriptでコンテンツ（表示領域外に隠れたものも含む）全体の高さを取得したい

Smartyのテンプレートをいじっていたら、ここでPHP使いたいなー、みたいな場面があることでしょう。
そういうときは、{php}{/php}でPHPのコードを囲めば普通に使うことができます。
以下サンプル。
——————————–
{php}
include(’hoge.php’);
{/php}
——————————–
そして、JSやCSSを挿入したいときは{literal}{/literal}で囲みます。
例えばJSの場合。
——————————–
{literal}
<script language=”JavaScript” type=”text/javascript”>
//<![CDATA[
alert('test');
//]]>
</script>
{/literal}
——————————–
まあ基本、JSとCSSは外部ファイルにして読み込めば問題ないはずですが。
PHPはテンプレート中に埋め込まざるを得ないときがあるので、結構使えると思います。

more from fujii's SmartyのテンプレートファイルにJS、CSS、PHPを書く

もしかしたら汎用的じゃないかもしれないですが、同じような解決方法でいける人がいるかもしれないので念のため。
基本的にwordpressのサイトは「アドレス/wp-admin」でログイン画面が表示されますが、そこで正しいログイン情報を入れてもリダイレクトされてばかりでログインできない場合の対処法。
まず/wp-adminで入るのは諦めて、「アドレス/wp-login.php」と打ってみてください。
これでも管理画面が出るはずなので、ここで正しいログイン情報を入れるとログインできます。自分の場合はログインできました。
上記のような現象の場合、可能性の一つとして考えられるのがwordpressの一般設定の「WordPressアドレス」と「サイトアドレス」に相違がある場合です。
例えば今回、自分の場合は
—–
WordPressアドレス・・・ http://hoge.sakura.ne.jp/
サイトアドレス・・・ http://fuga.jp/
—–
となっていました。
独自ドメインを割り当てた後のアドレスが、「WordPressアドレス」のほうにだけ適用されていなかったわけです。
これをサイトアドレスと同じにしたら、無事/wp-adminからでもログインできるようになりました。
よっぽど特殊な場合じゃない限り、「WordPressアドレス」と「サイトアドレス」は同じ状態にしておきましょう。
いや俺だっていつも同じにしてますよ。
マジ他の人が作ったもの修正するのって難しいよね。
自分だと絶対やらないようなとこでミスってたりするので原因が特定しにくい。

more from fujii's wordpressの管理画面でログインするとリダイレクトされる

普通にiframe内のコードをjavascriptで動的に修正すると、修正前の状態が履歴に残るらしいです。
このままだとブラウザの「戻る」ボタンを押したとき、一旦修正前の画面を挟んで元の画面に戻るので見栄えや操作性が悪い。
じゃあiframe内での動的変化の履歴を残さないようにすればいいんじゃないか、ということでいくつか検索してみた結果が以下。
・JavaScriptで履歴管理
http://d.hatena.ne.jp/tkkochan/20080613/1213377282
・履歴に残さない画面遷移
http://jsdo.it/ginpei/fGjv
iframe内の動的変化をlocation.replaceで実装すれば履歴に残さずに遷移が可能、ということだそうです。

more from fujii's iframe内の遷移を履歴に残さない

タイトル通りなんですが、すごい謎現象に突き当たりました。
ある画像を右クリック → 図の書式設定 → 圧縮
と進んでいき、
「図を圧縮・図のトリミング部分を削除」にチェックを入れるんですが、なぜかトリミング部分が削除されない。
それどころかトリミングが解除されて元の画像に戻ってしまいます。
図のツールバーの「図の圧縮」アイコンからやるとうまくいくらしい・・・という情報があったので試してみましたがこれもダメ。
良い解決策が出てこないので結局原因不明のまま諦めました。
前は普通に削除できてたのに、いきなりできなくなったというのが不思議です。
wordのバグなのか何なのか。

more from fujii's 【word】図の圧縮でなぜかトリミングが解除される

文字サイズや背景色とかをユーザー側で選択できるサイトを作る場合、選択された値をcookieに保存して管理することがあります。
jQueryとjquery.cookie.jsを使ってcookie制御する機会があったので注意点を。
——————————–
下のような構成のサイトで、
hoge1.html
— fuga(directory)
— hoge2.html
選択された値をこんな感じでcookieに詰め込みました。
$.cookie(’config’, settingvalue);
これでcookie「config」に、「settingvalue」の値が入るはずです。
が、どうも挙動がおかしいので調べてみたところ以下のような現象が起こっていました。
・hoge1.htmlで値を詰め込んだときは、hoge2.htmlに遷移した時も値が保持されている
・hoge2.htmlで値を詰め込んだときは、hoge1.htmlに遷移した時に値が保持されていない
そこでちょっと調べてみたところ、階層が変わるページ遷移を伴う場合、cookieのパスを明示的に指定しないと外れてしまうことがあるそうです。
というわけで
$.cookie(’config’, settingvalue,{path:’/’});
と修正したところ、解決。正常に動作するようになりました。
——————————–
調べてみた限りでは、パスを省略すると値を詰め込んだページのパスでのみ有効になるそうです。
確かにパスを指定する前は、それぞれのページで最後に設定された値が使われてたなー。
jquery.cookie.jsでcookie制御する場合は、例え階層変更が伴わなくてもパスは指定しといたほうがよさそうです。あとから階層追加になる可能性もなくはないし。

more from fujii's ページ遷移によって、jquery.cookie.jsで設定したcookieが外れてしまう場合の対処法

デフォルトテーマでは普通にでます。
自分で作ったカスタムテーマだと表示されない。
解決方法を探してみたら全く同じ症状の方がいたらしく、
——————————–
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”>
{lang: ‘ja’}
</script>
——————————–
をheadタグ内に入れれば動くとのこと。
で、入れてみました。動きました。ありがとう。
多分ですが、自分のカスタムテーマでは「wp_head();」を抜いていたのが原因じゃないかと。ていうか挿入コードから考えて絶対これだろ・・・。
試してないですが多分根本的な原因はこれです。次からは入れます。

more from fujii's 「WP Social Bookmarking Light」でGoogleプラス1を有効にしたのに表示されない場合

Wordpressのバージョン3くらいから追加された「アイキャッチ画像」、これは結構便利です。
管理画面からの画像登録も分かりやすいし、実際に表示するときも下の１行だけでOK。

ただ俺の入れ方が悪いのか、かなり大きい画像を入れた時になぜかフルサイズで表示されることがあります。
そうなるとかなりデカいので枠からはみ出してしまい、非常に困ります。
そこでアイキャッチ画像のサイズ調整をするわけですが、引数に配列で縦横サイズを入れてやればOK。

が、これだけでは不十分なときがあります。多分。
例えば600×300の画像を入れた場合、確か上記のコードだと長辺が150に収まる範囲に修正されると思います。すなわち150×75。
これだと元画像が正方形でないとアイキャッチ画像も正方形にならない、ということになります。
そこでどうするかというと、管理画面の「設定　>　メディア」でサムネイルや中サイズの縦横比率を１：１にします。
これなら画像登録の時点で画像を指定の比率にトリミングしてくれるのでいけるはず。

more from fujii's Wordpressのアイキャッチ画像サイズ調整