CSS/jQueryでのブラウザのスクロールバーの幅を取得する スクロールバーの幅を取得する方法を紹介します。最近ではスクロールバーの幅を扱う必要性がなくなってきたのであまり使う機会はありませんがメモしておきます。
CSS/jQueryでのブラウザのスクロールバーの幅を取得する | ITハット
CSS/jQueryでのブラウザのスクロールバーの幅を取得する スクロールバーの幅を取得する方法を紹介します。最近ではスクロールバーの幅を扱う必要性がなくなってきたのであまり使う機会はありませんがメモしておきます。
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
iOS8.1のSafariで$(window).height()を使うときの注意点 - 備忘録β版
表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。 環境 iPhone 5s（iOS8.1） jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー（を含む上下のバー）がスクロールで小さくなったりする部分。これが本当にやっかいな挙動をする。 縦（portrait）表示の時は良いとして、問題なのは横（landscape）表示のとき。 URLバー（を含む上下のバー）は、縦から横に回転させたとき隠れ、スクロールすると表示される。 このURLバー（を含む上下のバー）が表示されているか否かで、表示領域の高さは変わるはずなのに、$(window).height()は同じ値を返す。 iPhone 5sで実行した時返す値 取得方法 UR
範囲外クリックでポップアップを閉じる正しい JQuery - Qiita
ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。しかしこれを実装する時にちょっとした気をつける点があります。 よく見かけて気になっている悪い例 Stackoverflow などでよくある処理としては、クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。もし自分自身だったら stopPropagation()1 して、イベント伝播しなくする。理由としては stopPropagation() しないと、ポップアップそのものをクリックした時に閉じてしまうのを防ぎたいからです。 例えばこういったコードです。 $('#target_element').click(function(event) { event.stopPropagation(); });
iOSはoverflow:hidden;でスクロールを無効にできない - Qiita
// スクロールを無効にする $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); // スクロール無効を解除する $(window).off('.noScroll'); スマホの独自イベントのtouchmoveイベントを切ってスクロールを止める。 解除したい時はoffする。 イベント名に、.noScrollと名前を付けることで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができる。 参考 iphoneでスクロールをさせない処理をする。 特定のエリアのみスクロールを無効にする方法 ドロワーメニューを左側に表示するときにコンテンツ側を固定するときなど //
CSSの[position:fixed]で固定している要素を横スクロールさせる方法
CSSの[position:fixed]で要素を固定すると、ブラウザ幅がコンテンツ幅を下回った際に固定している要素だけ横スクロールしてくれません。 最近のWEBサイトはほとんどレスポンシブ対応なので、該当するケースは少ないと思いますが、古いサイトを改修する時にハマったので備忘録兼Tipsとして紹介します。 私を含め、ほとんどの方が要素に[overflow-x:scroll]など入れてみたりすると思いますが、[position:fixed]はそんなことではビクともしません（笑） 対処方法としては、JavaScriptを利用します。 横スクロール発生時に[position:fixed]が適用されている部分のleft値が変わるようにすれば、leftが0pxで固定されないためスクロールできるようになります。 $(window).on("scroll", function(){ $("fixedして
![CSSの[position:fixed]で固定している要素を横スクロールさせる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f1e6558a6f263971933a81ee41942c07a3793d4/height=288;version=1;width=512/https%3A%2F%2Fwww.webernote.net%2Fwp-content%2Fuploads%2F2011%2F08%2Fcodeing.jpg)
Yousoro.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
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
jQuery.panelSnap Plugin
A jQuery plugin that, after scrolling, snaps to blocks of content which I like to call panels. You can actually nest sets of panels as you will see throughout this demo page. Each following panel will explain a specific feature of the panelSnap plugin. https://github.com/guidobouman/jquery-panelsnap Basic setup <!doctype html> <html> <head> <script src="/path/to/jquery.js"></script> <script src="/
Magnific Popup: Responsive jQuery Lightbox Plugin
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). Important note: This jQuery plugin is deprecated, only critical or security bug fixes will be released in future. Use native <dialog> element if you need a basic dialog/modal/popup, or my PhotoSwipe library if you need an advanced image
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。 スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。 その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。 タッチイベントとは、その名のとおりスマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことで、以下の４つのタイプの機能が用意されています。 touchstart ： タッチしたときに発生する touchmove ： タッチしたまま動かしたときに発生する touchend ： タッチ状態から離れたときに発生する touchcancel ： タッチ中に電話がかかってきた場合などに発生する（通常は使わない） 具体的にわかりやすいように、ここではスマートフォン用のサイトでよく使
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
[jQuery] click / touch / pointer イベントを完全に制御する - Qiita
var event = { all: 'mousedown touchstart pointerdown mouseenter mouseleave', type: '', start: '', enter: '', leave: '', move: '', end: '' }; // イベント判定 event.check = function(e){ var _default = e.type; event.start = _default; event.move = _default === 'pointerdown' ? 'pointermove' : (_default === 'touchstart' ? 'touchmove' : 'mousemove'); event.end = _default === 'pointerdown' ? 'pointerup' : (_def
![[jQuery] click / touch / pointer イベントを完全に制御する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d34c6cd8860611a610801eeec50679360b08ae2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCalF1ZXJ5JTVEJTIwY2xpY2slMjAlMkYlMjB0b3VjaCUyMCUyRiUyMHBvaW50ZXIlMjAlRTMlODIlQTQlRTMlODMlOTklRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTUlQUUlOEMlRTUlODUlQTglRTMlODElQUIlRTUlODglQjYlRTUlQkUlQTElRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWEzN2UyYTQyNDViMzdkMzdkZTcwYWMwMjViM2FiZjlh%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9zaGloYXJ1LWlyaWUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAzZWM5MjZhMWQ4M2JiNDQwNmJhMjdiN2YyM2UwMWRk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc1264083483f18afc3b325e7af2293ef)
imagesLoaded
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 8,000 Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDN <script src="https://unpkg.
jQuery リファレンス：jQuery.when
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.rules() | jQuery Validation Plugin
jQuery Validationプラグインの共通エラーメッセージを日本語化する方法 | minory
読み込まれない - jquery 読み込み 確認
Loading...