jQuery逆引きリファレンス 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)
jQuery逆引きリファレンス 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
Add a respsonsive image slider to any website.
テキストフィールドや、ラジオボタンなど、フォーム項目の内容が変更された時に処理を行うための、jQueryによるイベントのまとめです。 サンプルはこちら フォームは次のように、テキストフィールド、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスを作成します。 <form> <!-- テキストフィールド --> <input type="text" id="text" name="text" value="" /> <hr /> <!-- テキストエリア --> <textarea id="textarea" name="textarea"></textarea> <hr /> <!-- ラジオボタン --> <label for="radio-01"><input type="radio" id="radio-01" name="radio" value="1" />ラジオ1
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 (※ページをそのまま訳したわけではないと、思います) jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ: 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus
jQuery MasonryはPinterest風の表示を行うjQueryプラグインです。 Pinterest風の大小さまざまなボックスを並べて表示するデザインが人気ですが、より高度な表現を実現したいと考える人に使ってみて欲しいのがjQuery Masonryです。 トップページです。ここも面白い表示です。 単純なシングルカラム。 マルチカラム。 画像。 メディアミックス。 アニメーションです。 項目の追加も可能。アニメーション付きです。 ページの最下部までいくと自動追加読み込みします。 一定の幅を空けて配置される表示法です。 右寄せ。 中央寄せ。 固定表示。赤い枠は常に右上に出ます。 単純な固定幅のカラムはもちろん、横に複数段にまたがる表示も可能です。画像の大小も適切に判定して表示してくれます。動画やテキスト、画像を組み合わせて表示も可能で、これはメディアなどで使うと面白そうです。一回表
twitter facebook hatena google pocket モーダルってだいたい定形が決まった感じですが、今回のjQuery plugin for Avgrund concept popinはクリックするとぐいっと中に寄って目立つ感じにしてくれます。 sponsors 使用方法 jQuery plugin for Avgrund concept popinからファイル一式をダウンロード。 <link rel="stylesheet" href="avgrund.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.avgrund.js"></script> <script type="text/ja
JavaScriptライブラリ「jQuery」開発チームは8月9日、最新版となる「jQuery 1.8」をリリースした。多数のバグ修正のほか、セレクタエンジンの高速化や細かな機能強化が行われている。 jQuery 1.8は、2011年11月に公開されたバージョン1.7以来のメジャーアップデート版となる。160以上のバグを修正し、コードサイズも1.7.2と比較してコンパクトになっている。Internet Explorer 6/7/8サポートも継続されている。 アップデートによる改善点としては、まずセレクタエンジン「Sizzle」の再設計による高速化が挙げられる。最近のWebブラウザではCSSセレクタベースで要素を取得するための「querySelectorAll」メソッドが提供されるが、実装が異なるために互換性の面でやや問題があるという。Sizzleではこういった非互換性に対応できるとしている
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge's Zoopraxiscope. Cobalys 2012. JZoopraxiscope is licensed under the terms of the GPLv3 and the MIT License. Image jzoo.jpg belongs to the Eadweard Muybridge Collection (Public Domain). Hosted by Github Pages.
選択肢の一つとして備忘録。jQueryの ように扱えて、jQueryより軽量なjs ライブラリにzepto.jsというものが あるんですが、このzepto.jsをコアに 使ったモバイル用のフレームワーク をご紹介。 jQuery Mobileライクなフレームワークです。全く同じではありませんけど、選択肢の一つとして覚えておいて損は無いかなと思います。 見た目はJQMに似てますね。似てるというかモロあれですがwzepto.jsをベースにして、JQMライクな軽量モバイル向けフレームワークのZoeyが作られました。20KBほどのスクリプト1つで実現できます。 日本語化したサンプルです。というか英語を日本語にしただけなんですが。 Sample ちょっとcss直さないとですかね。 コードサンプル<script src="zoey-0.2.1.bundle.min.js"></script>jsファイ
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなw ご利用は以下よりどうぞ。 jQuery-M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く