iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
jQueryの.removeClass()で「特定の文字列で始まるclass」をすべて削除する - Qiita
jQuery の .removeClass() メソッドでは、「引数に関数を指定する」ことで柔軟なclass削除が実現できます。 「特定の文字列で始まるclass」を一括削除 「ユーザー操作に応じて画面表示を変更する」際など、要素の状態をあらわす "is-active"、"is-visible"、"is-fixed"、"is-closed" といった「特定の文字列で始まるclass」を複数利用する場合があると思います。 例えばこれらの "is-***" というclassのみを一括で削除したい場合、正規表現を利用した以下の方法で実現できます。 <div id="sample" class="block element is-active is-visible is-fixed">＊＊＊</div> <script> // 'is-' で始まるclassをすべて削除 $('#sample').
.on()と.off()を使いこなす 1 | CodeGrid
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
JavaScriptで連番画像をコマアニメーション - みかづきブログ その3
JavaScriptをつかってパラパラ漫画のようなコマアニメーションを実装しようとした際、よく使われる3つの方法を比較してみました。 imgタグのソースを切り替える imageタグのsrcを差し替えてパラパラ漫画を実装してます。 ブラウザの仕様、サーバ側の仕様によるとは思うのですが、srcを切り替えるたびにリクエストがはしるというストリーミングのような挙動になってしまったことがあったので、最近はこの実装方法は敬遠しています。 DEMO HTML <img id="img" src="" /> JavaScript (function(win, doc) { "use strict"; var img = doc.getElementById("img"), srcList = [ "http://jsrun.it/assets/m/q/5/0/mq50U.png", "http://jsr
【はてなブログ】スクロールするとヘッダーに固定されるグローバルメニューの作り方｜1mm
回遊率をあげるために、グローバルメニューを固定させたい ヘッダー部分にメニューつけてるブログをよく読むんですが、本文が長文になって下にスクロールしていくと、ヘッダーが隠れてグローバルメニューが表示されなくなるんですよね…。 トップ戻るボタンで戻るのも良いんだけど、出来るだけ無駄なクリック数減らしつつ、沢山のページを見てもらえる仕様にしたい…。 という事で、試行錯誤しながら普通のグローバルメニューを「固定グローバルメニュー」に変えてみましたー！ ちなみに今のメニューは、ゆきひーさんが作ったお洒落メニューをベースとして使用させていただいてます！ いつもありがとうございます〜 www.yukihy.com 固定グローバルメニュー設置 まずは、新たに固定メニューを設置する場合からです。 この場合は以下のサイト通りにコピーしていくと簡単に固定されるメニューが出来上がります。 ※カスタマイズを行う際は
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
【Javascript】【HTML5/CSS3】DeferredによるCSS・jQueryアニメーションの連続実行 | Wood-Roots:blog
修正： jQueryアニメーションのところ、わざわざreturn d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。 CSSアニメーションやjQueryアニメーション、さらにそれ以外の様々な動作を順番に実行するような処理を実装したいと思い、Deferredによる実装方法を試してみました。 CSSアニメーションの完了を判断する方法 順番に動作させるためには「処理が完了した」ということを判定しないといけません。 CSSアニメーションは完了時にtransitionendというイベントが発火します。 ※keyframeアニメーションの場合はanimationendというイベントになります。 このイベントに対してresolve()をバインドさせれば、Deferredにより連鎖的な処理を実装できそうです。 ちなみにjQueryのみの場合
Bellaphi
Was ist Messgehilfe-LED mehr noch wieso könnte diese besser sein denn OLED? Mini-Lumineszenzdiode ist das neueste Spielzeug vonseiten Technologie- mehr noch Fernsehherstellern. Die einigermaßen neue Bildtechnologie ist un… hinlänglich neu, statt eine Weiterentwicklung dieser bekannten LED-Technologie. Es ist daher in… so unterschwellig ebenso OLED-Bildschirme, dazu gibt es nur geringere Kosten. In
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/ANTON072/items/ea5b95ae5b7f0f6186f7
Audioタグで効果音を鳴らすシンプルな方法 - Qiita
jQueryのclickとbindとliveとdelegateとonの違い - Qiita
emiac-works.com
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
