jQuery:$(document).ready(fn)でハマったこと
2014.11.05
$(document).ready(fn)の実行はCSSが読み込まれた後。
と思い込んでいましたが、実はそんなことはなかったようです。

普通にスタイルシートでページをレイアウトし、
$(document).ready(fn)で要素の位置を取得するようなJavaScriptを書いたのですが、
どうもスタイルが当たる前の位置を取得してしまうようでした。

この時点で
$(document).ready(fn)が実行される = DOMの準備が出来ている = CSSの読み込みも終わっている
という思い込みをしていたのでハマってしまったのですが、
記述の順番次第でCSSの読み込み前にJSが実行されてしまうようです。

英語ですが、こちらのやり取りの中で解説されています。
http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready

CSSの読み込みはJSの読み込みより先に記述しないと保証されないようです。

<link rel="stylesheet" type="text/css" href="aaaaa.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="bbbbb.js">

この順番であれば大丈夫です!

| コメント(0)
要素のクリック動作を無効にするCSS
2014.05.14
ある条件でaタグを無効にする必要がありまして、
JavaScriptで出来そうだけど、さてどのようにしようかな・・

と考えつつ検索していたところ、なんとCSSで実現できるとの記事を発見。

YoheiM .NET
[CSS] CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法

---------------------------

pointer-events : none;

---------------------------

上記のスタイルを指定することで、
aタグの動作や JavaScript の onClick 等のイベントを無効にすることができます。

今回はレスポンシブなサイトで、

・大画面の時はサムネ + LightBox
・スマホ等の小画面では画像100%表示でクリックなし

という用途で使いました。
レスポンシブ案件が今後増えれば、さらに使いどころが出てくるかもしれません。

しかもIE7以上で動くそうなので安心です!
2016.12.15
盛大に間違えていたようで、IEでは11以上から対応でした。
とても便利なスタイルですが、使用する場合は対応ブラウザと相談になりそうです。

ご指摘があり修正しました。
誤った情報を掲載してしまい申し訳ありませんでした。
| コメント(2)
Select要素とFirefox
2013.12.10
以前このようなエントリを書きましたが、
久しぶりにselect要素の装飾について検索してみたところ、
Firefoxのselect要素に付くしつこいデフォルトスタイルを、
CSSのみで消し去る方法が書かれていました。

How to remove hide the <select> arrow in Firefox using

通常のアピアランスのクリアに加え、下記の2行を追加することで
あの憎き矢印を回避できるようです、これは期待が高まります。
------------
select {
 -moz-appearance: none;
 text-indent: 0.01px; ←コレと
 text-overflow: ''; ←コレ
}

------------

また、このままだとIE10で矢印が表示されてしまうので、
------------
select::-ms-expand {
 display: none;
}

------------
を加えることで対処できます。

この方法でselect要素を装飾してみたサンプルを、
いくつかの環境で表示させてみました。
select_sample01.gif
IE8に関してはまぁアレなのでアレとして、
PC版のFirefoxでは確かに矢印は消えています、素晴らしい。
しかし、ワタクシ的に一番期待していたAndroid版Firefoxでは
残念ながら効果がありませんでした...。
モジラさん、お願いしますよ。
| コメント(0)
IE8で nth-child を使う
2013.09.11
first-childは、IE8でもきくのですが、
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。

ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。

CSS: Internet Explorer 7-8 nth-child hack

これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------

こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------

「+ *」の数を増やして調節する。
IE8でもききました。
| コメント(0)
select要素のデザイン
2013.08.14
select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。

この頑固な汚れはどうしようもないのかしら?
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。

CSS3でセレクトボックスをカスタマイズ

選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。

というかどうにかしてください、Firefoxさん。
| コメント(0)