JavaScript
以前作ったShaker MakerというHTML5アプリを久しぶりに使おうと思ったら、なぜだか動かなくなっていた。 原因が突き止められず、しかし動かないまま置いておくわけにもいかないと思い、ドラムパッドアプリに作り変えました。http://jsdo.it/dentaq/drumpadド…
http://jsdo.it/dentaq/6x7y 暇なとき、ドット絵で遊んでみていただけたら幸いです。 意見などもいただけますとバージョンアップでの参考にさせていただきます。すこし苦労した点は、localSrorageにマスの色情報を格納し、呼び出す部分でしょうか localStora…
slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック(指で左右に動かす)操作を可能になるよう改造してみました。「slides」本体は下記にて入手可能です。 SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) wit…
「完全版」として紹介した開閉式コンテンツですが、その後全機種検証で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で表示され…
ダウンロードはこちらからはてブリーダー
①HTML・・・文書をタグにより構造化する。 例)見出し1をh1(...heading 1)タグで、本文をp(..paragraph「段落」)タグで囲い構造化する <html> <head></head> <body> <h1>私のページ</h1> <p>これは私のページです</p> </body> </html> ②css・・・HTMLのタグに対し、装飾に関する情報を付加する。 例)上記body(本体)…
$(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画面に表示させる画像の数や画像の総枚…
キャンペーン終了日が来たら以下を実行1)赤文字赤枠囲みで「キャンペーンは終了しました。たくさんのご応募ありがとうございました」と表示する 2)「キャンペーンに応募する」ボタンを消す 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が代入され、関数内で使用が出来る。
現在、jQuery MobileでAndroid向けのサイト構築をやっています。二日間、コーディングをしてみて気づいたことは...■jQuery Mobileをフレームワークに採用した理由 Sencha Touch,Wink toolkitなども試したが、結局過去のjQueryの資産、ノウハウが使えるという…
ここ数日、iPhone/Android向けWebアプリ構築のため「Sencha Touch」試用してみました。UIはネイティブアプリと遜色がないくらい出来が良いもので、ボタンもカルーセルも美しくかつ安定感のある動きをします。 jQuery mobileとの比較ですがDOM操作はjQuery,UI…
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…
たとえば「サイトのあちこちに配置された二つ並べたボタンの、 ボタンとボタンの間のスペース(隙間)をなくしたい(または統一したい)」 といったケース。 インライン要素では半角スペース、全角スペース、改行コード、 といった表記によるスペースの個数…
HTML/css/JavaScriptコーディングの鉄則、その1。「DOMで最優先されるのはID名である」このことを覚えておくとコーディングにおいて何かと役に立つ。 たとえばaタグ全部をgetElementsByTagNameメソッドで取ってきて、 ontouchstartとontouchend(iPhone/Andr…
iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。 jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち(portrait)と横持ち(landscape)でcssの切り替えが実装可能である。 function switchOrienta…
従来のロールオーバーは1)cssのa⇔a:hoverで背景を切り替える 2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替えるの二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。・ボタンの…
従来のロールオーバーは1)cssのa⇔a:hoverで背景を切り替える2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替えるの二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。・ボタンの色…
Apple Store銀座で「クライアントの声にこたえる jQuery UI デザイン」という講演を聴いた。書籍「Web制作の現場で使う jQueryデザイン入門」の上梓を記念したイベントで著者の西畑一馬さんによる講演。進行役としてサイバーガーデンの益子貴寛さんの姿も。…
http://semooh.jp/jquery/ref/cont/selectors/上記サイトでセレクターの威力を確認し、 cssコーディングの幅が相当広がるJSフレームワークであろう、とその可能性を探りはじめている。 感覚的に使えるところがデザイナーにも受けているということだが、確か…