jQuery
http://jsdo.it/dentaq/6x7y 暇なとき、ドット絵で遊んでみていただけたら幸いです。 意見などもいただけますとバージョンアップでの参考にさせていただきます。すこし苦労した点は、localSrorageにマスの色情報を格納し、呼び出す部分でしょうか localStora…
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で表示され…
$(function(){ $("#checkform :checked").each(function(){ var isl = $(this).attr("id"); $("#btnAreaChecked").css("display","block"); $("#btnAreaUnchecked").css("display","none"); }); $("#btnAreaChecked").css("display","none"); $("#btnAreaUnc…
$(function(){ $("#checkform :checked").each(function(){ var isl = $(this).attr("id"); $("#btnAreaChecked").css("display","block"); $("#btnAreaUnchecked").css("display","none"); }); $("#btnAreaChecked").css("display","none"); $("#btnAreaUnc…
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。・prev/nextボタンを付ける ・画像と画像の間に12pxのpaddingを挿入する ・画像の幅、高さを設定する ・画像が切り替わる間隔(ミリ秒) ・1画面に表示させる画像の数や画像の総枚…
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。・prev/nextボタンを付ける・画像と画像の間に12pxのpaddingを挿入する・画像の幅、高さを設定する・画像が切り替わる間隔(ミリ秒)・1画面に表示させる画像の数や画像の総枚数を…
キャンペーン終了日が来たら以下を実行１）赤文字赤枠囲みで「キャンペーンは終了しました。たくさんのご応募ありがとうございました」と表示する ２）「キャンペーンに応募する」ボタンを消す javascript var endDateArr =[ //キャンペーン終了日の年を指定…
キャンペーン終了日が来たら以下を実行１）赤文字赤枠囲みで「キャンペーンは終了しました。たくさんのご応募ありがとうございました」と表示する２）「キャンペーンに応募する」ボタンを消す javascript var endDateArr =[ //キャンペーン終了日の年を指定 …
まず、関数内で使用したい数値／文字列をidでくくります。 例） <span id="month">3</span>月<span id="day">21</span>日 jQueryで次のように記述。 $(function() { var m = $("#month").html(); var d = $("#day").html(); } ); 上記の記法により、mに3,dに21が代入され、関数内で使用が出来る。
まず、関数内で使用したい数値／文字列をidでくくります。例） <span id="month">3</span>月<span id="day">21</span>日jQueryで次のように記述。 $(function() { var m = $("#month").html(); var d = $("#day").html(); } );上記の記法により、mに3,dに21が代入され、関数内で使用が出来る。
現在、jQuery MobileでAndroid向けのサイト構築をやっています。二日間、コーディングをしてみて気づいたことは...■jQuery Mobileをフレームワークに採用した理由 Sencha Touch,Wink toolkitなども試したが、結局過去のjQueryの資産、ノウハウが使えるという…
サイトや実店舗のリニューアルオープンまでのカウントダウンをトップページなどに載せたい場合などに使える、jQueryを使ったカウントダウンのスクリプトです。 $(function(){ myD = new Date(); // 現在時刻 取得 myNextYear = new Date( 2011 , 2 , 20 ); /…
例えばこのようなリストがあり、 曲名の頭に曲番号を振りたいという場合。 MP3 曲目リスト 曲名 収録時間 DL 故郷 1:28 春の小川 2:36 朧月夜 3:55 ABC まず、htmlの準備から。 対象となる表と曲名が書かれているセルを特定するためtableタグに"snglist"、td…
サイトや実店舗のリニューアルオープンまでのカウントダウンをトップページなどに載せたい場合などに使える、jQueryを使ったカウントダウンのスクリプトです。 $(function(){ myD = new Date(); // 現在時刻 取得 myNextYear = new Date( 2011 , 2 , 20 ); /…
例えばこのようなリストがあり、曲名の頭に曲番号を振りたいという場合。 MP3 曲目リスト 曲名 収録時間 DL 故郷 1:28 春の小川 2:36 朧月夜 3:55 ABC まず、htmlの準備から。対象となる表と曲名が書かれているセルを特定するためtableタグに"snglist"、tdタ…
cssのlist-styleで指定可能な背景画像の・（ナカグロ）ではなく、文字列の「・」を出力させたい場合。jQueryの.prependメソッドを使って挿入した。prepend("挿入するHTML")・・・要素内の先頭にHTMLを挿入するjQuery $(function(){ $(".list li").prepend("…
次のような動作をするQ&Aの開閉式パネルをjQueryで作ってみました。1) QをクリックするとAが開く 2) 他のQをクリックすると1)で開いていたAが閉じ2)でクリックされたQのAが開く 3) もう一度2)でクリックしたQをクリックするとそのQのAが閉じる■jQuery■ $(fun…
cssのlist-styleで指定可能な背景画像の・（ナカグロ）ではなく、文字列の「・」を出力させたい場合。jQueryの.prependメソッドを使って挿入した。prepend("挿入するHTML")・・・要素内の先頭にHTMLを挿入するjQuery $(function(){ $(".list li").prepend("…
たとえば「サイトのあちこちに配置された二つ並べたボタンの、 ボタンとボタンの間のスペース（隙間）をなくしたい（または統一したい）」 といったケース。 インライン要素では半角スペース、全角スペース、改行コード、 といった表記によるスペースの個数…
iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。 jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち（portrait）と横持ち(landscape)でcssの切り替えが実装可能である。 function switchOrienta…
iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち（portrait）と横持ち(landscape)でcssの切り替えが実装可能である。 function switchOrientat…
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetI…
