jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや?コードの意味を読み解い...
jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや?コードの意味を読み解い...
お知らせ 2024.05.21第2弾 2023年度合格者インタビュー、合格者の声を公開しました。 2024.04.08第1弾 2023年度の大学合格実績速報を公開しました。 2024.03.12大学受験講座の 2024年度 講座体系図・標準学習プランを更新しました。 2024.03.04大学受験講座の 2024年度 コース・カリキュラム・授業一覧を更新しました。 2023.06.302022年度の合格体験記ページ 第二弾を公開しました。 2023.05.252022年度の合格体験記ページを公開しました。 2023.01.202022年度 IT企業内定体験記を公開しました。 2022.10.11講師紹介に高松和也先生、吉永豊文先生を追加しました。 2022.06.302021年度の合格体験記ページ 第二弾を公開しました。 2022.06.082021年度の合格体験記ページを公開しました。 2
レスポンシブサイトではウィンドウの幅(画面解像度)によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ(画面幅/高さ)の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
こんにちは、@yoheiMuneです。 最近スマホでのWebアプリを開発することが多いのですが、タップへの反応速度を上げるこんな方法はどうかなぁと考えたので、ブログに書きたいと思います。 スマホでタップにより速く反応したい スマホ用Webアプリの開発で、ユーザーがタップした際にJSを起動したい(例えばダイアログを表示したいなど)という要件があるとします。 その場合に、タップ対象の要素のonclickにイベントをバインドして処理をすることが多いかと思います。 こんな感じ。 var btn = document.getElementById('someBtn'); btn.addEventListener('click', function() { // タップされた際の処理 }); でもこれだと確かに反応するのですが、ユーザーがタップしてからイベントが発火するまでに時間が空いてしまい、遅いの
こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元:MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima
jQuery.ajax()のJSONやJSONP取得で、200 OKにもかかわらずエラーになる件についてまとめました。 1.問題点 次のようなJSONデータを読み込むスクリプトを書きました。 JSONデータ {'foo':'bar'} スクリプト <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $.ajax({ url: "sample.json", dataType: 'json', }) .done(function(data) { console.log("OK"); }) .fail(function(xhr, textStatus, errorThrown) { console.log("NG:" + xh
jQuery.ajax()でファイルをアップロードする方法を紹介します。 1.はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、(特にAndroidで)バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている(即ちより手前の)要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js (jquery-latest.js を使うな)」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 (公開している Web サイト) で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js : Official jQ
var content = document.getElementById('listBox'); var clone = document.getElementById('list1').cloneNode(true); clone.id = 'temp'; clone.style.position = 'absolute'; clone.style.left = '600px'; content.appendChild(clone); $('#temp').animate({left: 400}); cloneNode して、id を書き換えて親要素に appendChild して動かそうとした訳です。 IE 以外のブラウザはこれで問題無く動きます、IE 以外は。 IE だけは #temp を呼ぶと複製元である #list1 を参照して、そちらを動かそうとします。ちなみにリスナを仕掛け
jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。 [javascript] $(function(){ var w = $(‘#target’).css(‘width’); alert(w); }); [/javascript] jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。 [javascript]
SVGMagic: the fully automated SVG fallback SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn't support SVG. Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. In other words: one file for
jQueryでajax()の重複実行を回避する方法を紹介します。 1.問題点 次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function(
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く