Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
jQuery スマートフォンでスクロールを停止させたい方へ。 | チルチルミチルブログ
上記の処理で無事問題解決と思っていたのですが1か月後、 クライアントから動かなくなった（というかスクロールが動くようになった）と連絡がありました。 動かないようにしてくれとのことです。 前は正常に動作して（スクロール出来ないようになっていた）のになぜだろうと思って調べていると原因が判明しました。 Treat Document Level Touch Event Listeners as Passive AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ig
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQuery Mobile × jQuery UI は混ぜるな危険！？ - normalian blog
jQuery Mobile の利用に際しての注意点をもう一点追記したい。 jQuery Mobile を利用する場合、 jQuery UI を同時に利用してはいけない点だ。これらの部品は以下の様に用途が異なるためである。 実際、jQuery Mobile のソースを確認すると、 jQuery UI から拡張していることが読み取れる。では、実際に jQuery Mobile と jQuery UI を共存させた場合に起こる問題について紹介する。 ダイアログの表示が壊れる jQuery Mobile にも jQuery UI にも ダイアログと呼ばれる部品があるが、これらを組み合わせた場合、以下の問題が発生する。jQuery Mobile のダイアログが壊れているのが理解できると思う。 jQuery Mobile のみ jQuery Mobile × jQuery UI ソースコード例は以下と
jQuery UI の Dialog プラグインのダイアログを使ったフォーム
実装例（サンプル）の動作について 「追加」ボタンをクリックすると、ブラウザの中央に、追加フォームダイアログが出現する。 「名前」と「コメント」を入力して、「追加」ボタンをクリックすると、実装例（サンプル）のテーブルに追加する。 ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを変更できる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="te
要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。 ← 前回 連載 INDEX 次回 → 別稿「TIPS：イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、focus／blurとfocusin／focusoutの違いは一見して分かりにくいものです。 本稿では、具体的なサンプルの中で、両者の違いを詳らかにします。 focus／blurとfocusin／focusoutイベントの基本 まずは、これらイベントを利用した具体的なサンプルを見てみます。以下は、テキストボックスにフォーカスを当てた時、フォーカスを外した時、それぞれのタイ
jQuery 3.3登場、約1年ぶりのアップデート。新機能も追加
JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、「jQuery 3.3」が1月19日付けでリリースされました。 1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。 配列に対してまとめてクラスの追加や削除が可能に 新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',
jQuery MobileとjQuery UI、停滞を打破するため開発体制を刷新。以前より簡単にコントリビュート可能に
jQuery MobileとjQuery UI、停滞を打破するため開発体制を刷新。以前より簡単にコントリビュート可能に HTMLやJavaScriptなどのWeb標準技術でモバイルアプリケーション開発を可能にするJavaScriptライブラリ「jQuery Mobile」は、2014年9月に公開されたjQuery Mobile 1.4.4を最後に、3年ものあいだアップデートが止まっています。 また、Webアプリケーションにメニューやボタン、タブ、スライダーといったさまざまなユーザーインターフェイスを提供するウィジェットライブラリ「jQuery UI」も、2016年9月を最後に1年以上アップデートが止まっています。 こうした停滞を打破するために、jQuery MobileとjQuery UIの開発体制が刷新されたことが、2017年12月21日付けでjQuery Mobileのブログに投稿され
jqPlot - jQuery プラグイン
リファレンス jQuery の jqPlot プラグイン 導入方法や基本的使い方について。 jQuery の jqPlot プラグインのオプション オプションについて。 jqplot.barRenderer.js 棒グラフを生成するのに必要なプラグイン。 jqplot.blockRenderer.js ブロックチャートを生成するのに必要なプラグイン。 jqplot.bubbleRenderer.js バブルチャートを生成するのに必要なプラグイン。 jqplot.canvasOverlay.js グラフに線を描き加えるのに必要なプラグイン。 jqplot.dateAxisRenderer.js 年月日や時刻など、軸を時間軸として扱う際に必要なプラグイン。 jqplot.donutRenderer.js ドーナツグラフを生成するのに必要なプラグイン。 jqplot.dragable.js 系列
画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」:phpspot開発日誌
GitHub - opoloo/jquery_upload_preview: This is a small jQuery plugin, which provides a live preview of selected files before they're actually uploaded to the server. 画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」 アップロードした後に「間違った！」と思っても後の祭りですが、事前に確認できるようにしておくと親切かもしれません。 関連エントリ ファイルアップロードのボタンをBootstrapにできる「Bootstrap File Input styler」
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
jQuery非同期、Image()で画像読み込み表示｜jquery｜POPSブログ｜POPS WEB KOUBOU
jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。 new Image()での、画像読み込み表示 jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。ネットで調べれば沢山の情報がありますが、私の場合の経験を踏まえて記述します。 Image()が使用される理由は、 1. 表示サイズではなく画像の実寸を得ることができる。 2. 画像にアクセスして、ロード完了を知ることができる。 3. ERRORの場合の処理ができる。(余り使用はされていないが、、) 4. Loading中の「Loading画像」など表示させる時に便利。 5. jQueryで画像のロードに適したメソッドがない。(ほとんどが、html text な
jQuery datepicker 初期日付を入れる方法
ｊQueryUI の datepicker はテキスト入力欄に、カレンダーから、日付を入力できるようにすることが非常に簡単にできるので、感動していたのですが、フォーム入力確認画面などから戻るボタンなどで元のフォームにvalue値で初期値を入れておいても、リセットしてしまうようです。戻ってくると値が消えている、ただValueに値を入れただけでは、ダメみたいなので方法をシェアしておきたいと思います。 valueに値を入れてもリセットしてしまう。 なにが言いたいのかというと、、inputタグで初期値を入れておいてもテキスト欄に値が入っていないということです。 <input type="text" id="datepicker" name="acquisitionDate" size="30" value="2012-09-02"> こんなかんじで初期値2012-09-02をvalueに入れても、
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法｜BLACKFLAG
JavaScriptでfunctionの関数や様々な処理等を“何秒後”に実行、といった指定をする時に使う「setTimeout」。 jQueryでもこの指定を使うことが出来るのですが、必要な時に限って記述方法を忘れてしまっていることが多いので、ここにメモ書きしておきます。（ごく単純な記述なのですが…） $(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); 処理を記載する箇所の後ろにある数値は、“何秒後”に処理させるか、の値になります。 例えば、ページを読み込んだ後、3秒後にbodyをフェードインさせる場合。（フェードインするアニメーション時間は1秒） $(function(){ $("body").css({opacity:'0'}); setTimeout(function(){ $("body").stop().ani
テーブルの行（TR要素）をスライドで表示切替させる方法(2) | Javable.Jp
前回はサンプルだけ提示しましたが、今回はそのソースコードを解説します。 念のため、対応ブラウザ このページのサンプルは、下記ブラウザで確認しました。 Firefox 2.0.0.10, Firefox 3.0.10 (Windows XP sp3, Mac OS X v10.5.6) IE6, IE7, IE8 (Windows XP sp3) Safari 3.2.1 (Mac OS X v10.5.6) jQueryのバージョンは、1.3.2です。 組み方のポイント 行の表示/非表示をスムーズに見せるには、jQueryの組み方だけでなく、HTML, CSSでもいくつか注意すべきところがあります。概要は以下の通りです。 [HTML] 各セル内部をdivで囲み、divをスライドさせるようにする。 [CSS] セルのパディング(cellpaddingまたはCSSのpaddingプロパティ)は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery] $.ajax GET をキャッシュさせない設定方法
どんな要素もblinkさせられる「jquery.blink」:phpspot開発日誌
Googleカレンダー風のスケジュール表を生成できる「jquery-skeduler」:phpspot開発日誌