2014-01-01から1年間の記事一覧

jqueryでouterHtml

jqueryにはouterHtmlに当たるメソッドはないので、ちょっとトリッキーな記述が必要 いくつか、やり方があるようだが、これが一番わかりやすかった。 参考 http://nori090.hatenablog.com/entry/2013/08/30/204344

jqueryで複数イベントをまとめて処理する

$('input[type="text"]').bind("keyup change paste",function(){ }) 参考 Detecting value change of input[type=text] in jQuery - Stack Overflow

jqueryでインクリメンタルサーチを実装するときにキー入力が止まった時にイベントを実行する方法

都度実行するとコストが掛かるので、jqueryでインクリメンタルサーチを実装するときにキー入力が止まった時にイベントを実行する方法 参考 javacriptでインクリメンタルサーチとjQueryのchange - memo-mode

css だけ(:checked疑似要素)でlightboxを実現する

参考 Futurebox, lightbox without the javascript and target pseudo-class – Ryan Seddon

縦横中央に表示する方法

ぐぐると、沢山でてくるが、どれも過去の方法だったりして、実際に使える方法のページが出てこないので、備忘録としてメモ [CSS]サイズが分からない要素を真ん中に配置するテクニック | コリス [css] CSS3時代の上下中央に配置するパターン – WebTecNote

formのシリアライズ時に要素を追加

formの内容をシリアライズして、AJAX通信を投げることは良くあるが、 その際にパラメータを追加する方法。 var data = $(form).serializeArray(); data.push({name: 'username', value: 'this is username'}); 他 serializeObjectというメソッドを追加する方…

チェックボッスをクリックした時に背景色も変更する

cssには、:checkedという疑似要素があるので、cssだけで行けそうだが、css3では親要素に干渉する方法(css4ではあるらしい)がないので、jqueryのparentで実現する。 参考 チェックしたチェックボックスの背景の色を変更する | かちびと.net

イベントをアタッチ

jqueryには、複数のイベントのアタッチ方法があり 普段は.clickを使う。しかし、追加した要素にアタッチできない場合があるので、.live,.delegateを使う場合がある。最近のjaueryは、on,offで複数のアタッチ方法が指定できるようになったので、こちらを使う…

propとattr

最近、jqueryを始めた人がはまるところ。 jqueryの仕様変更後も、googleの検索で過去の記事が引っ掛かるため 過去の記事のサンプルがそのまま動作しないことがある。attrをpropにしてみる。と、うまく行くかも 参考 CSSは分かるけどjQueryは苦手……という人が…

jqueryでトップページへ戻るを作る

#pageTop{ font-weight : bold; font-size : 10px; background : rgba(82,74,63,0.7); -webkit-border-radius : 3px; -moz-border-radius : 3px; -o-border-radius : 3px; border-radius : 3px; color : #ffffff; padding : 40px 5px 5px 5px; position : fi…

jqueryで オーソドックスなページ内ジャンプ

オーソドックスなページジャンプ 参考 jQuery とっても簡単、ページ内リンクでスムーズスクロール | 福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン

jqueryで指定したセレクタのフォームをクリア

指定したセレクタのフォームをクリア $(function(){ $.extend({ clearform: function(e){ e.find('input,textarea').not('input[type=\"radio\"],input[type=\"checkbox\"],:hidden, :button, :submit,:reset').val(''); e.find('input[type=\"radio\"], inp…

スクロールバーをカスタマイズする。

参考 スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳 jQuery custom scrollbar

vimで指定したテーブルのカラム一覧を挿入する

プログラム中で、データベースからSELECT文を作るときに、テーブルのカラム数が多いと割とメンドクサイですよね。ぐぐっても出てこなかったので作りました。まず、指定したテーブルのカラム一覧を取得するシェルスクリプトを作ります。 getcolumn.sh #!/bin/…

イラストレーターでsvgアイコンを作る

参考 http://d.hatena.ne.jp/rikuo/20121203

css3 アイコン

http://www.uiplayground.in/css3-icons/実際に使う際は、サイズの変更が簡単にできなかったり、テキストと一緒に使おうとするとfloat設定しなければいけなかったりで、結構不便。アイコンの参考サイトとしてはかなり役に立つ

position absolute fixedでのheight:100%

css

position absolute またはfixedで子要素を画面一杯に広げようとしてheight:100%を指定すると、子要素でも、画面の高さを同じ高さになってはみ出す。そもそも、position absolute、fixedは絶対配置なので、高さで指定せず top,bottomで表示位置を指定すればよ…

width:100%で要素がはみ出す

paddingを設定していて、width:100%を設定すると発生する。 これは仕様paddingもwidth:100%に含めたいならcssのboxsizingのborder-boxを指定する 参考 http://tmlife.net/web/css3/css3-box-sizing.html

数字をカウントアップアニメーションさせる jquery-animateNumber

基本的にjqueryを入れて、jquery.color.jsを入れjquery-animateNumberを入れて終了なのですが、元からhtmlに入力されている数値を開始値にして終了値にアニメーションする設定をスマートに記述するにはコツが要ります。 $('対象').prop('number',function(){…