jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加
jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加 jQuery 3.7.0ではいくつかの機能追加、性能向上、バグフィクスが盛り込まれています。 機能追加では、新しく「.uniqueSort()」メソッドが追加されました。これは既存の「jQuery.uniqueSort()」と同じ機能をチェーン可能にしたものです。 uniqueSort()は要素の配列から順番を重複を排除してソートしたものを返します。 これは、いくつかの要素の並びからある要素よりも手前の要素の並びを返す[ .prevAll()」を、要素をラップする「.wrapAll()」と組み合わせたときに、ラップされた要素が逆順で返ってくるなどの問題を解決するために追加されました。 CSSプロパティでは、単位を省略した場合に自動的に「px」となるプロパティが7つ追加されまし
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】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
jQuery 3.6.0 Released! | Official jQuery Blog
jQuery 3.6.0 has been released! In jQuery 3.5.0, the major change was a security fix for the html prefilter. This release does not include a security fix, but does have some good bug fixes and improvements. We still have our eyes on a jQuery 4.0 release, but until then we will continue to support the 3.x branch and address important issues. As usual, the release is available on our cdn and the npm
jQuery 3.6正式リリース。JSONPにおけるバグフィクスなど
JavaScriptライブラリ「jQuery」の最新版「jQuery 3.6」がリリースされました。 jQuery 3.6.0 has been released! Some bug fixes and a feature for JSONP error handling. https://t.co/ZUYnvrbmHc — jquery (@jquery) March 2, 2021 jQuery 3.5のリリースが昨年、2020年4月でしたので、約1年ぶりのマイナーバージョンアップとなります。 今回のマイナーバージョンアップではセキュリティフィクスは含まれず、バグフィクスのみです。 具体的には、次のようにJSOPの返り値がエラーだった場合の振る舞いにおけるバグが修正されました。 In previous versions, when a JSONP request responded w
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
WordPress同梱のjQueryがついに最新版にアップデート – Capital P – WordPressメディア
WordPressにはjQueryが同梱され、サイトの随所で利用されているが、そのバージョンがついに最新版（現時点では3.5系）にアップデートされることがmakeブログで発表された。これまでは1.x系にパッチを当てたものが同梱されていたが、ついに最新版に上がるようだ。筆者は、つぎはぎだらけのお古ジーパンを着させられていたキッズが最新の服を買ってもらったような喜びを覚えた。 via GIPHY リリースまでのマイルストーンは次の通り。 jQuery Migrate 1.x（後方互換ライブラリ）をWordPress5.5から削除WordPress 5.6からjQuery、jQuery MigrateおよびjQuery UIを最新版にアップデート。WordPress5.7以降でjQuery Migrateを削除 5.5が2020年8月リリース予定なので、年内にはjQueryが最新バージョンになる
jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方
今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、どうしてもjQuery等のライブラリに頼らざるを得ません。 この手のライブラリの有名どころは［jQuery Masonry］ですが、［Magic Grid］は同じように簡単に実装できる点が大きな魅力です。 ［Magic Grid］の挙動のサンプル ［Magic Grid］を実際に試しているGif画像です。 ウィンドウ幅を変更すると、配置されたカード型の要素が移動して再配置されます。 スムーズで気持ちいい動作ですね。 GitHub : Magic Grid JavaScript
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
t.js — jQuery.Hypertext.Typewriter
$(elm).t([content,]{ delay:0, //start delay (s) speed:50, //typing speed in ms (min: 10) |_ speed_vary:false, //'human-like' beep:false, //beep while typing (Web Audio API) mistype:false, //mistype rate: 1:N per char |_ locale:'en', /*keyboard layout (to fit mistype) supported: 'en' (english) or 'de' (german)*/ caret:true, /*caret; can be HTML; associated CSS class: .t-caret; default (TRUE): ▎ (\u
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Updating core jQuery to version 3 – part 2
Test jQuery Updates
jquery.smoothscroll
GitHub - alejandromur/shyheader: A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page
今どきのスムーズスクロール(2019年版) - to-R Media
