[jQuery]要素の高さ・幅を取得する | バシャログ。
iPhone5sはどうせすぐには手に入らなくてもよいとおもいゴールドを予約したtanakaです。 今日はjQueryでブラウザに表示されている要素の高さや幅を取得する方法についてまとめます。 …といってもjQueryユーザーであれば$(...).height(), $(...).width() でOKってことはご存じかと思います。 それも紹介しますが、それ以外の方法についてもまとめます。 $(...).height(), $(...).width()について DOM要素の高さ、幅を取得するメソッドです。弊社ウェブサイトのホームにある以下の要素で値を取得してみます。 $('div.info:first').height() // => 120 $('div.info:first').width() // => 200 上記のような感じで取得できます。ChromeのDeveloper Tool
![[jQuery]要素の高さ・幅を取得する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
jQueryでformを操る【nameの値を取得する/クリアする】 - シンプルシンプルデザイン JavaScript
form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使えば「さくッ」と取得できて便利。今回は、nameの値を取得する、にフォーカスします。 input type=”text”の値が変更するたびに処理を実行する $('input[type="text"]').on('input', function () { }); inputのvalue値 サンプル <input type="" name="sample" value="" /> type=”text” $('[name=sample]').val(); type=”radio” $('[name=sample]:checked').val(); チェックがない場合は「undefined」が返ってきます（Firefox 23で確認）。
jQueryでクリックするとぶるんってする
jQueryでクリックするとぶるんってする ぶるんってしたいと思いました。 動きはjQueryとCSS3の２バージョンでやってみました。 投稿日2013年09月27日 更新日2019年04月13日 html <ul class="list01"> <li>List 01</li> <li>List 02</li> <li>List 03</li> <li>List 04</li> </ul> jQueryの部分。 animate をメソッドチェーンでこまかく繋げてけばぶるんって感じになります。 JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.
CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」:phpspot開発日誌
Salvattore ? A jQuery Masonry alternative with CSS-driven configuration. CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」。 Pinterest風UIを実現するライブラリは多数ありますが、CSSで設定が出来るのは便利かもしれません JSは使っていますが、カラム数等の調整をCSSでできるのが特徴です。 関連エントリ ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
(1/2) - 第一回 jQueryから始めるBackbone.js - 実践！Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる！」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの？ すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」:phpspot開発日誌
Treegrid jquery plugin デモ：TreeGrid for Bootstrap 3.0.x テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」。 Bootstrap3なサイトでも使うことができるようです。マークアップ上はただのテーブルですが、これを階層化して開閉できるUIは便利そうです。 こうしてますますBootstrapが強化されていって作り手としては嬉しい限りですね 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるア
jQuery One Page Scroll by Pete R. | The Pete Design
Ready-to-use plugin All you need is an HTML markup, call the script and BAM! <div class="main"> <section>...</section> <section>...</section> ... </div> $(".main").onepage_scroll(); Pretty Neat Eh? You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'
任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements
任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。 前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。 特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。 セッティングは要素ごとにカスタムデータ属性を利用します。 <div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">これで、画面サイズにあわせてclassが付与されます。 詳細は以下よりどうぞ。 Responsive e
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements
最も狭い幅では、テキストのみに。 Responsive Elementsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="responsive-elements.js"></script> Step 2: HTML レスポンシブ対応にする要素に「data-respond」を加えます。 <div class="quote" data-respond> Step 3: JavaScript スクリプトは特に記述する必要はありません。 Step 4: CSS レスポンシブ用のスタイルを定義します。 ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルにな
jQuery入門道場
Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ
jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として | Stronghold Archive
jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 配列の中に特定の値や文字が存在するかを判別する方法（IE7以降でも動作） – javascript、array.indexOf()の代替として】です。Arrayの中に指定・特定した値や文字が存在するかを判別し、そのインデックス番号を返します。 コード var a = new Array(‘1′,’いち’,’html’,’jQuery’,’JQUERY’,’red’,’red’,’green’); console.log($.inArray(‘html’, a)); 例ではコンソールに【2】が出力されます。配列内に該当がない場合は【-1】となります。不要かとは思い
textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete
textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ
tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter
tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c
スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」 – bl6.jp
スクロールするとナビゲーションが上部に固定配置されるjQueryプラグイン「HeadShrinker」を使ってみました。レスポンシブにも対応しており、ブラウザの横幅を小さくするとメニューアイコンに切り替わる仕組みになっています。使い方もシンプルなので、あっという間に今風のナビゲーションを実装することができます。以下は使い方です。 [ads_center] 使い方 このようにスクロールすることでナビゲーションが上部に固定されます。 ブラウザ幅を縮小していくと、こんな感じでナビゲーションメニューがアイコンに切り替わります。レスポンシブのサイトでよく見かけますよね。 使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。 <link rel="stylesheet" href="headshrinker.css" media="all" /> <
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等 | Stronghold Archive
どうもこんばんは。今回のTipは【jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等】です。兄弟関係は出現頻度が高いのでメモしておきますね。他にも色々実装する方法がありますが以下の方法が一番シンプルかと思います。 まずは自分以外の兄弟要素を操作する方法です。兄弟関係の中から一つクリックで実行としています。自分以外を対象とする場合【siblings()】を使用します。 HTML（共通） <ul id="ex"> <li>list</li> …. <li>list</li> <li>list</li> </ul> JS $(‘#ex’).children().click(function(){ $(this).siblings().css({‘background’:’#007374′}); $(this).css({‘background’:’none’
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS/Android/PCで使えるパララックスページ作成用jQueryプラグイン「skrollr」:phpspot開発日誌
クールなローディングエフェクトのアイデア＆サンプル集:phpspot開発日誌
GitHub - kotarok/jQuery.zip2addr at c7965f424bd304e90103bcd87f53bdce15a9513c
Glide.js