jQuery

MovableType

MovableTypeで、カテゴリを必須チェックにする

EnhancedCategory プラグインを導入してみたものの必須チェック動きませんでした。そこで、MTAppjQuery内のJSで対応することにしました。 実装方法 仕組みとしては、公開や更新ボタン( button )をクリックした段階...
構築・開発

シングルページの記事詳細を無限スクロールさせる

詳細記事をページスクロールし、一番下まで行くと自動的に次の記事を表示させる方法です。 今回は、ただロードしてくるだけでなく、該当記事の位置に行くとアドレスバーにあるURLも書き換える仕様になります。 下記のサイトを参考に2パターン挑戦してみ...
構築・開発

タブレットやスマホ限定なら tapイベントが最高!

iPadでの診断コンテンツを作っている時に、ボタンをタップしたら選択されているようにクラスを付ける処理を作っていました。 $('li').click(function(){ if($(this).hasClass('active')){ $...
構築・開発

jQueryで、データをpostする

//データ送信処理 var getForm = function(url, data) { var $form = $('<form/>', {'action': url, 'method': 'post'}); for(var key i...
構築・開発

ボタンを選択状態にして、ローカルストレージに保存する(jQuery)

要素をクリックした時に、activeクラスを追加しつつ、ローカルストレージに情報を保存する。 <ul> <li data-rid="1">テキストテキストテキスト</li> <li data-rid="2">テキストテキストテキスト</li...
構築・開発

上下に動くスライダー(jQuery プラグイン)

案件で、メインビジュアルの左は上向きに、右は下向きにスライドするという仕様がありました。 bxSliderで進めようと思ったのですが、一定方向へは可能なのですが、上下への動きが出来ずどうしようかと思っていた所、上下に動くスライダー「Mult...
構築・開発

PCサイト・スマートフォンサイトの相互切替をlocalstorageで実装する

レスポンシブやRewriteEngineなどを使用していない、 静的な個別スマートフォンサイトを制作した際に、 PC/SPデバイス毎で、相互切り替えを実装します。 例えば、PCサイトのアドレスが、 SPサイトのアドレスが、/sp/ となって...
構築・開発

selectタグを装飾する

今回、selectタグを装飾するのは、 スマートフォンサイトのみをターゲットにした、 CSS3「appearance」を使った方法で実装したいと思います。 一部PCでも対応されていますが、まだまだ対応されていないブラウザもある為、 実用的で...
構築・開発

コンテンツスライダー(jquery.bxslider.js)

コンテンツスライダーを実装する際は、仕様書や問題がない限り、 99%で、bxSlider を使用しております。 メリットとしては、同一ベージに複数入れることもでき、 レスポンシブにも対応など、大体の要望を組み込めるという点だと思います。 あ...
構築・開発

GETパラメータを取得する

GETリクエストパラメータを取得するコード。 PHPの場合 $param = $_GET; jQueryの場合 function getRequest() { if(location.search.length > 1) { var get...
構築・開発

クリッカブル・マップ(usermap)を視覚化する

クリッカブル・マップは、 通常、CSSの border や outline, background を指定しても再現出来ません。 そこで、jQueryプラグインを使用すると、 ロールオーバ時に選択範囲のエリアを表示したり、 モックを作成する...
構築・開発

クリッカブル・マップをレスポンシブ対応

最近なにかとレスポンシブデザインで作成する案件が増えてきました。 その際、クリッカブル・マップを使う箇所が出た際、 普通に area を作ってしまうと、 画像を可変してもその coords ポイントは書き替わらないので、 マップしたものがズ...