slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。「slides」本体は下記にて入手可能です。 SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) wit…

slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。「slides」本体は下記にて入手可能です。SlidesJS, a simple slideshow plugin for jQuery.1)424行目あたりに…

「完全版」として紹介した開閉式コンテンツですが、その後全機種検証でMEDIUS等でjQueryのslideUp,slideDown,slideToggleが動かない機種があることが判明し、以下のように書き換えました。 <dl> <dt class="show-hide">●●●について・・・</dt> <dd>●●●とは・・・</dd> </dl> dt.show-hide +dd { display:no…

「完全版」として紹介した開閉式コンテンツですが、その後全機種検証でMEDIUS等でjQueryのslideUp,slideDown,slideToggleが動かない機種があることが判明し、以下のように書き換えました。 <dl> <dt class="show-hide">●●●について・・・</dt> <dd>●●●とは・・・</dd> </dl> dt.show-hide +dd { display:no…

以前ご紹介した開閉式パネル 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型となり、ブラウザで…

FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、 クリックするとその質問のアンカー位置に飛ばせるようにすれば、 更新も簡単。質問と解答を一回、…

FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、クリックするとその質問のアンカー位置に飛ばせるようにすれば、更新も簡単。質問と解答を一回、追…

<ul class="imgGallary"> <li><img src="image/01.jpg" width="200" height="260"> <span class="caption">海辺の風景</span></li> <li><img src="image/02.jpg" width="230" height="260"> <span class="caption">山の風景</span></li> <li><img src="image/03.jpg" width="266" height="260"> <span class="caption">川の風景</span></li></ul>

リファラー（参照元）を取得して、例えば検索エンジンで 「電卓」と検索して訪れた人はcalc.htmlに、 「デンタク」と検索して訪れた人はdentaku.htmlに、 「dentaq」と検索して訪れた人はabout.htmlに、それぞれ飛び先を変更したいという場合。 var keywords…

リファラー（参照元）を取得して、例えば検索エンジンで「電卓」と検索して訪れた人はcalc.htmlに、「デンタク」と検索して訪れた人はdentaku.htmlに、「dentaq」と検索して訪れた人はabout.htmlに、それぞれ飛び先を変更したいという場合。 var keywords= […

<ul class="imgGallary"> <li><img src="image/01.jpg" width="200" height="260"> <span class="caption">海辺の風景</span></li> <li><img src="image/02.jpg" width="230" height="260"> <span class="caption">山の風景</span></li> <li><img src="image/03.jpg" width="266" height="260"> <span class="caption">川の風景</span></li></ul>