Tips – ページ 8 – Satake Studio Dev

CSSで指定したフォントサイズを使ってくれないときの対処

お客様からレイアウトが崩れるというクレームがあって、IE7、IE8、Firefox、Chromeで調べてみたんだけど、こっちでは全然再現せず。
打合せのついでに訪問して確認してみたら、確かにずれてる。

でも、なんか字が大きくて変だ。
IE8の設定（ツール ≫ インターネットオプション ≫ ユーザー補助）を確認したら『Webページで指定されたフォントサイズを使用しない』になってた。orz…
でも、お客様がわざわざこれを設定してるということは、一般的なWebサイトの字が小さくて見ずらいということだろうから、うちのサイトを見るときだけ設定変えてくれというわけにもいかず。


if (jQuery("#notice a").attr("offsetHeight") &gt; 15) {
  jQuery("#notice").css("left", "670px");
}

苦肉の策でこうしました。
#noticeブロックは position absoluteで配置してあるので、#notice aの文字の高さがCSSで設定した高さ（ling-height:14px）を超えているようなら、もう少し左から書くようにすると。
こうやっても、表示の文字サイズを大とか最大とかにされると同じようになるんですけど、それは自分で調整可能なので。
（あと、ちゃんとやるなら、offsetHeightの値から文字サイズを判定して、leftを変えればいいんですけど、とりあえずはこれでOK）

2010年5月3日/作成者: staff

なんでもメモ

Tips

最短一致について
正規表現で最長一致じゃ困るときの対処。？を使う。/SELECT(.+?)FROM/i
　
PHP による日付・時刻・時間の計算・演算のまとめ
『2つの日付の差（何日間あるか）を求める』。mktime(0, 0, 0, $month1, $day1, $year1)の引数の順番にイラっと来た。
　
preg_match — 正規表現によるマッチングを行う
つい、忘れがちなので。
　
sprintf — フォーマットされた文字列を返す
ゼロ・パディングするのに本当にこれしか方法がないのかよ、と思う。

2010年5月1日/作成者: staff

List-style がずれるとき

Tips

list-style-imageに設定した画像と文字がずれて気持ち悪いときがありますよね。
でも list-styleでは微調整ができなくて、「ああ、こんなもんか」と思うだけなんですけど、そういうときは backgroundでやったらどう？ということです。


ul {
  list-style-type:none;
}
li {
  background:url(images/sankaku.gif) left no-repeat;
  text-indent:10px;
}

こんな感じです。それだけですけど、なにか？

2010年5月1日/作成者: staff

jCarousel Liteの要素を jQueryで append

Tips

jCarousel Liteでカルーセル（縦横スライド）してるとき、スライドする要素を入れ替えたいなと。
　

<div class="carousel">
  <div class="jCarouselLite">
    <ul>
    <li><img class="c1" src="images/thumb-01" /></li>
    <li><img class="c2" src="images/thumb-02" /></li>
    <li><img class="c3" src="images/thumb-03" /></li>
    </ul>
  </div>
</div>

　
普通、こんな風に書きます。（idとclassは普通付けませんが説明のため便宜的に付けました）
この＜li＞要素をこういう風に書かないで、投稿のカテゴリ一覧から取ってきて、動的に突っ込むのはどうだろうということです。（最初の＜ul＞は空っぽということですね）
　


jQuery("#xxx").append("<li><img src='images/thumb-04' /></li>");

　
こうして appendすると確かに要素としてはアペンドされてるっぽいんですけど、アペンドされた内容がカルーセルしません。
じゃあ、最初に必要な分だけ並べておいて、srcを書きかえればいいじゃん、ということで、
　


jQuery("#i1").attr("src", "images/thumb-04");

　
こうやってみましたが、うまくいきません。正解はコレ！
　


jQuery("#c1").attr("src", "images/thumb-04");

　
jCarousel Liteのコードを読んでみるとわかるんですが、サーキュラー（くるくる回る）のときは、＜li＞要素をクローンしているんですね。
　

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

　
だから、idでソースを指定してもクローンされる前のソースが書き変わるわけではないのでダメ、なのかな？
クラス指定だったら、元のもクローンのも全部書き変えちゃうからOKね。
appendがダメなのは、クローンされる前に appendできないからだろうか。jCarousel Liteより先に appendしてるつもりなんだけど、難しいね。
　
参考：jQuery でoption要素を追加した際の諸問題

2010年4月27日/作成者: staff