送信ボタン連打による多重送信を回避（防止）する（jQuery）｜PHP工房
2017/04/24 メールフォームなどで送信ボタンを連打されてしまうと、多数の送信処理を実行されてしまうことがあります。 ただ実際には送信ボタンを押したらすぐにページ遷移してしまうので、よほど連打しない限りはそういったことは起きにくいです。これは主にFirefoxを除くブラウザで確認できています。 ※実際にはFirefoxでも出来てしまうけど、他のブラウザに比べて発生しずらい印象でした。 まぁそもそもそこまで頻発するような性質のものでもないため、必ずしも対策を行う必要はないとも考えています。 あくまで必要に応じて以下を参考の上で対応いただければと思います。 主な発生要件 ※以下に当てはまる場合に発生すると考えられます。 明らかに意図を持って連打する （正規のユーザーがあえてそういったことをすることは考えにくいですがね） 項目数が膨大にある、処理するものが多い、またはサーバーのスペックが低
Lity - Lightweight, accessible and responsive lightbox
Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. Minified and gzipped, its total footprint weights about 3kB. It requires jQuery or Zepto (with the callbacks, deferred and data modules). Demos Image Inline Google Maps YouTube Vimeo URL Installation All ready-to-use files are located in the dist/ directory. Incl
jQuery Responsive Lightbox plugin - Duncan McDougall
I was recently tasked with finding a lightbox plugin for high traffic e-commerce site I was building from scratch. Given the impact page weight can have on conversion, bounce rates and a bunch of other delicate analytic metrics, it was essential every piece of JavaScript selected for the site was as lightweight as possible, along with being responsive. Most lightbox plugins that met the responsive
jQuery キー入力でキーコードを取得(keydown他) | ITSakura
キーを離した時に発生します。 shiftやalt等の修飾キーも発生します。Enterキーも発生します。 それぞれJavaScriptのkeydown,keyup,keypressイベントが発生します。 以下は、jQueryのキーボードイベントのリンクです。 https://api.jquery.com/category/events/keyboard-events/ キーコードを取得する(keydown) 以下のテキストボックスに何かキーを入力すると、keydownイベントが発生し、 キーコードを取得して表示します。 数値の1やアルファベットのaや、shiftキーやエンターキーや矢印(→)も入力できます。 event.key : event.which : event.keyCode : event.code : 上記サンプルのコードです。 <style>#text1{width:25px
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQuery 使ってしまいそうな非推奨のメソッド | キプレ - UIサンプル紹介
廃止予定、または廃止となったjQueryのメソッドの中で気をつけておいた方がものだけピックアップしました。 現役のページで使っていたら、別のコードに差し替えた方がよさそうです。 .live() jQuery 1.7以降.on()を使えとのこと。 .die() jQuery 1.7以降.off()を使えとのこと。 .error() jQuery 1.8以降.on( "error", handler )を使えとのこと。 .size() jQuery 1.8以降.lengthを使えとのこと。 .toggle() jQuery 1.8で非推奨、1.9で削除。.toggleClass()でできれば代用。 .bind() jQuery 1.7以降.on()で代用を推奨。 .unbind() jQuery 1.7以降.off()で代用を推奨。 .load() jQuery 1.8以降非推奨で.on( "
jQueryの.offset() を使うとiPhoneやiPadでずれるバグを解消したい - ハリーかつき・旧技術ブログ
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります 改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetId01').offset(); var y = offset.top; scrollTo(0,y); }); });改善後 $('.anc').click(function(e){ e.preventDefault(); var y = document.getElementById('targetId01').offsetTop; scrollTo(0,y); }); });
iOS一部バージョンのSafariで高さを取得するときに気を付けたいこと｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは、ウェブラボクリエイターズメモです。 今回は、iOSの古いバージョンで表示検証をする際に気を付けておきたいことを備忘録として残します。 スマホでグローバルナビゲーションをハンバーガーメニューとして表示させることはよく使われる手法かと思います。 その際にメニュー内のコンテンツが多いと、スマホ画面の高さを超えてしまうことがあります。 画面の高さを取得し、それを超えたらスワイプ操作でスクロールできるようにするといった対応が可能ですが、iOS一部バージョンのSafariでは、jQueryによる高さの取得が上手くいかないことがあるようです。 検証したバージョン 当記事では「iOS12.1.2」「iOS11.3」「iOS11.2」のバージョンを用いて検証し、 「iOS11.3」「iOS11.2」で表示不具合を確認しました。 また今回、こちらの記事を参考にさせていただきましたところ、 古いiO
Javascript/jQuery でブラウザ高さを取得する方法 | WWWクリエイターズ
この記事では、３つのJavascript関数による高さの取得方法をまとめていきます。 とりわけ、モバイル環境における、ブラウザー（iOS Safari や Chrome）での高さの取得方法、ややトリッキーです。 詳しく見ていきます。 Javacscript でブラウザーの高さを取得 ブラウザーのウィンドウに高さをフィットさせるには、下記の２種類のアプローチがあります。 [A] Javascriptでウィンドウ高さを取得して、所望の要素を高さにぴったりフィットさせる[B] （Javascriptを使わずに）CSSでぴったりフィットさせる 今回、Javascript、もしくは、JQueryでの高さの方法を詳しく見ていきます。 ブラウザウィンドウの高さの取得 ブラウザーウィンドウの高さは、Javascript のdocumentオブジェクトのプロパティから、もしくは、jQueryを使って取得でき
iOSでは$(window).height() と window.innerHeight の値は違うらしい
スクロール位置によって発火する系のアクションを仕込んだページで、どうもiPadだけ位置がズレる。スマホは専用のアクションにしてあるから問題ないんだけども、iPadはいわゆるPCサイズと同じレイアウト／アクションにしてある。 なんか数値が合わないんですけど 本来であれば、ページの一番下まで行くと $(document).height() === $(window).height() + $(window).scrollTop() これが成り立つはずなんだけど、合わない。。なんで。 PCだとバッチリ合うのに、当たり前だけど。 最初はあんまり理解できていないviewportの問題かなーなんて思ってたけど違った。 WEMO スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ こちらのサイトではwindow.innerWidth / window.innerHeightは
実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスとホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
3分でわかるVue.jsのエンジニア的5大メリット「jQueryより簡単！」 | 東京のWeb制作会社 株式会社クーシー
3分でわかるVue.jsのエンジニア的5大メリット「jQueryより簡単！」 システム開発 プログラミング Webサイトのフロントエンド開発では、JavaScriptフレームワークを扱わない場合、標準のJavaScriptやjQueryで制作を行います。 ユーザーアクションに連動した画面を更新するリッチな表現を行う処理は、Vue.jsを扱うことで、コード量を減らしたり、メンテナンスや管理が行いやすくなりますので、ご紹介します。 本記事は、HTML, CSSを学び、JavaScriptへの理解が少しある、マークアップエンジニアやデザイナー向けの記事になりますので、ご了承いただければ幸いです。 Vue.js について Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jquery/jquery-migrate: A development tool to help migrate away from APIs and features that have been or will be removed from jQuery core
Deprecated | jQuery API Documentation
JS勉強会資料3 event について
Mobile Safari $(window).height() URL bar discrepancy
uhaha.net - uhaha リソースおよび情報
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集 | 125naroom / デザインするところ（会社）です。
【jQuery】簡単にモーダルを設置、Modaal.jsの使い方を解説!
