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が必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
たまにはjQueryに頼るのをやめてみる - Qiita
はじめに ありとあらゆる所で使用されている超有名なJavaScriptライブラリといえば jQuery ですが、ちょっとした処理を行いたいがために使っているようであれば無駄な気もします。 最近のJavaScriptはjQueryなしでも割といろんな処理を行うことができます。 というのも、jQueryの動作を模倣してみようとゼロから書いた拙作のライブラリ queries.js を通してどのような処理を行っているのか理解が深まったからです。 宣伝になってしまいますが、queries.js へのリンクを貼っておきます。 jQueryライクなJavaScriptライブラリ queries.js ちなみに、処理に関しては Internet Explorer 11 未満は考慮していません。 ここに書かれているコードのほとんどは意図的に関数化していません。これらのコードを元に自由に組んで自分で使いやすい
Umbrella JS
Tiny library for DOM manipulation and events https://cdn.jsdelivr.net/npm/umbrellajsGithub Download Try it Intuitive and Documented It is strongly influenced by jQuery with many similar methods so you'll feel at ease developing with Umbrella. However there are some extra features like .handle() and some methods like .append() are more flexible: Documentation // Simple events like jQuery u("button"
Uncaught TypeError: Cannot set property ‘position’ of undefined | Tomehachi's Blog
最近の投稿 未知採集リスト – ウォッチするべし！ radio や checkbox のカスタマイズ Seasar2 urlPatternで受けたリクエストが文字化けしてしまう VirtualBox ゲストOSが起動しないことへの対処 SVG image の角を丸める カテゴリー FFXIV (15) Java (11) Android (1) JavaFX (1) Seasar2 (4) Linux (2) Web (13) CSS3 (4) HTML (4) jQuery, JavaScript (5) SVG (1) その他 (1) AviUtil (1) 未分類 (3) タイトルのようなメッセージが出ました。 Uncaught TypeError: Cannot set property 'position' of undefined Google Maps Api for Jav
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
(function($){})(jQuery)と$(function(){})と$(document).ready(function(){})について - 日常メモ
先日のエントリー「jQuery 〜 なんだか動作が違う」。 どこが間違っているのかに直ぐに気づかずに悩んだ。大分恥ずかしいけど、悩んだのでメモ。 問題は次の3つの書き方のいずれにも同じ動作を期待したのだが、2番目の書き方だけ期待した動作をしないこと。 １つ目。 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head></head> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ var focusFunc = function(){ alert("focu
onClick Function "this" Returns Window Object
I've come across a head scratching issue with my JavaScript application. If I write an element like this: <li onClick="alert(this.tagName)"></li> I get "LI." However if I do this: <li onClick="foo()"></li> Where "foo()" is: function foo(){ alert(this.tagName); } I get "undefined." I am away how "this" is supposed to work in regards to attached functions. But, I am baffled because "this" is not pic
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
jQueryでdocument.getElementByIdと等価を取る : mwSoft blog
jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。 生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。 参考サイト http://groups.google.com/group/jquery-en/browse_thread/thread/fa48e5649bb64216?pli=1 prototype.jsはJavascriptの中身いじって機能を増やしてる風なので、「$("id")」をするとElementそのものが帰ってくるけど、jQueryの場合は操作する為の皮を被せてる風なので（お行儀はいいよね、こっちの方が）、こうなるらしい。 ちなみにget(0)を使った場合も[0]を使った場合
デザイナーが知っておきたいDOMの読み込みとjQuery | スマートフォンアプリ開発会社のエンジニアブログ
こんにちは。ビンゴ豊島です。デザイナーという立場ですがJavaScriptもちょいちょいと書かせていただいております。 今回はDOM操作をする前に知っておきたいDOMの読み込みについて記事を書かせていただきます。対象はDOM操作ばかり、もしくはDOM操作しかしないんですけど？といったデザイナーさんになります。これを読むと今までなんとなく使っていたjQueryも意味を理解した上で使えるようになれるかもしれません。 Webページが表示されるまで ブラウザがページを表示するまで簡単に書くと下記のようになります。 サーバにページをリクエスト サーバから返されたHTMLをダウンロード DOM構築をしつつ描画と画像等のダウンロード 表示完了 このうち「3. DOM構築をしつつ描画とダウンロード」のタイミングでどのような順番でイベントや処理が発生するかを検証します。 DOMの読み込みを確認するサンプルコ
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
JavaScript自分メモ - Qiita
<!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,nofollow" /> <meta charset="UTF-8"> <title>This is Template</title> <!--<link rel="stylesheet" type="text/css" href="example.css">--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // クラスの場合は下記の両方OK // 結果は"2-Text" console.log($('.mycla
jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
その場で編集。Webベースのガントチャートエディター·jQuery Gantt editor MOONGIFT
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのfindなどをquerySelectorで書く - Qiita
JavaScriptやjQueryでイベントを削除して再登録する方法 - Qiita
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
JavaScript, jQuery でのURLの扱い方 - Qiita
