以前ご紹介した開閉式パネル jQueryでFAQなどの開閉式パネルを実装したい - dentaq logこれをずっと使い続けてきたのですが、場合によって開閉が連動してしまうなど、 挙動がおかしくなることがありました。 これを解消したのが下記の記述です <dl> <dt class="show-hide">○○について</dt> <dd>○</dd></dl>…

jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#target…

例えば、国名を選ぶと、その国の人口が表示されるUI。html <form> <select id="country"> <option selected>国名をお選びください</option> <option value="0">日本</option> <option value="1">アメリカ</option> <option value="2">中国</option> <option value="3">インド</option> </select> </form> <dl id="result"> <dt>日本</dt> <dd>127,450,460</dd> <dt>アメリカ</dt></dl>

どうしてもうまくアンカーが効かない！ これが効かないとクライアントに怒られる！そんなときはあるものです。まずはアンカー地点のyの座標点を計測。 $(function(){ obj = document.getElementById('anc'); y = obj.offsetTop; alert(y); } alertで表示され…

どうしてもうまくアンカーが効かない！これが効かないとクライアントに怒られる！そんなときはあるものです。まずはアンカー地点のyの座標点を計測。 $(function(){ obj = document.getElementById('anc'); y = obj.offsetTop; alert(y); } alertで表示され…

例えば、国名を選ぶと、その国の人口が表示されるUI。html <form> <select id="country"> <option selected>国名をお選びください</option> <option value="0">日本</option> <option value="1">アメリカ</option> <option value="2">中国</option> <option value="3">インド</option> </select> </form> <dl id="result"> <dt>日本</dt> <dd>127,450,460</dd> <dt>アメリカ</dt></dl>

こんな記述で取得できるようです。 <script src="http://code.jquery.com/jquery-latest.js"></script>

touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」 といった実装を行いたい場合。 cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。 $(function(){ …

こんな記述で取得できるようです。 <script src="http://code.jquery.com/jquery-latest.js"></script>

touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」といった実装を行いたい場合。 cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。 $(function(){ v…

jQuery Mobileのスライド遷移する機能を提供しているところだけ取り出してみました。 独自のデザインでスライド機構だけ使いたい用途にピッタリです。下記jsdo.itにてサンプルコードを公開しました。 jQuery Mobileの画面遷移の機構だけ取り出してみた。 - j…

jQuery Mobileのスライド遷移する機能を提供しているところだけ取り出してみました。独自のデザインでスライド機構だけ使いたい用途にピッタリです。下記jsdo.itにてサンプルコードを公開しました。jQuery Mobileの画面遷移の機構だけ取り出してみた。 - jsd…

HTML <div class="daikoumoku"> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> …</div>

HTML <div class="daikoumoku"> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> <div class="syoukoumoku"></div> …</div>

floatで浮かせた要素がなんかどっかでつっかえる。 IE6とかに多いけど、FireFoxで起こることもある。 今回はFireFoxで起こったケース。 どうやらフォントサイズが関係しているらしいが、わからない。 cssだけで解決できればそれにこしたことは無いけど、どう…

モバイル向けFlashがディスコンになったところでHTML5アニメを総ざらいしたい。アドビから正式に発表がありました。 これで、HTML5へのシフトが加速すると思われます。 しかし、HTML5アニメーションといっても、 主要なフォーマットだけで、三つもあります。…

floatで浮かせた要素がなんかどっかでつっかえる。IE6とかに多いけど、FireFoxで起こることもある。今回はFireFoxで起こったケース。どうやらフォントサイズが関係しているらしいが、わからない。cssだけで解決できればそれにこしたことは無いけど、どうして…

モバイル向けFlashがディスコンになったところでHTML5アニメを総ざらいしたい。アドビから正式に発表がありました。これで、HTML5へのシフトが加速すると思われます。しかし、HTML5アニメーションといっても、主要なフォーマットだけで、三つもあります。ま…

私のケースでは、使用していないjsの記述を削除したらエラーが消えました。たとえばgetElementByIdメソッドやgetElementByTagNameメソッドで取得しようとした要素が取得できない場合、その要素は'undefined'となり、データ型もundefined型となり、ブラウザで…

私のケースでは、使用していないjsの記述を削除したらエラーが消えました。たとえばgetElementByIdメソッドやgetElementByTagNameメソッドで取得しようとした要素が取得できない場合、その要素は'undefined'となり、データ型もundefined型となり、ブラウザで…