スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのような、ある特定の要素が画面内（表示領域）に表示されたタイミングでイベント処理を行うことができる、jQueryプラグインの「jquery.inview」をご紹介になります。 ちょっとした動きやアクションをさりげなく表現する程度が丁度良いと思います。あまりなんでもかんでもガチャガチャ動かしてしまうと、視認性もなくなり何がコンセプトなのか不明という悪影響にならないようにすることも考えて取り入れてみましょう。 デモサンプル それでは、実際にサンプルを確認しながら導入方法を見ていきましょう。 ・要素が画面内に表示されたタイミングでフェードインしながら表示し、反対に画

cssのzoomプロパティを使用した状態で、jQueryのoffsetメソッドを使用すると正しい値を取得することができない。 一方で、ネイティブのoffsetTopを使用すれば、cssにzoomを使用していても正しい値を取得することができる。 従って以下のようにコードを書き換えると良い。 jQuery:

TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.

ImagesLoaded アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない！」、「画像がちゃんと読み込まれてから関数を実行させたい！」といった場面にぶち当たることが出て来きます。 そんなときに便利なのが「ImagesLoaded」！非常に簡単な記述で、要望を満たしてくれます。 必要なもの 公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。 １つしかありません！ <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> 使い方 使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。 //通常の書き方 imagesLoaded( '#container', function() {/*実行させたい処理

高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公開されていました。 はじめに。 ［flickity］と名付けられたコンテンツスライダーです。 他のスクリプトに代わって台頭するであろう、幾つかの理由があります。 ポイントは以下の点。 レスポンシヴ対応。 モバイル端末のタッチやフリック入力に対応。 スクリプト単体でも動く。 jQueryに依存しない。 デフォルトで［imagesLoaded］との併用が可能。 設定にはHTML5のデータ属性を利用することも可能。 スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。 また設定にHTML5のデ

JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動

としてみたところ、 フェードアウトせずにそのまま消えてしまった。 ちょっと調べてみると、処理を待つキューに入る処理と入らない処理があるとのこと。 エフェクト系は概ね入るようだけど、remove()はキューに入らない。 キューに入れるには.queue()を使う。

更新日: 2017年3月14日公開日: 2015年12月6日ゼロから始めるJavaScript講座Vol23　Ajaxとは "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 ゼロから始めるJavaScript講座　AjaxとはWebページの仕組み GoogleやYahooなどを代表とした無数にあるWebページは、それぞれの企業が管理しているサーバ(PC)のファイルをブラウザで見ています。 例えばhttp://User名.lesson.codecamp.

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

どうも、もう更新が月一にあるかないかのペースですが頑張って更新しています。ビザ申請のための書類作成やフリーランスの仕事などバタバタして書く時間をまったく作れませんでした。幸運なことにアクセスは記事を書いてなくても伸び続けているので良かったです。 今回はjQueryを使用して要素を消す際にどのような方法があるかをご紹介いたします。 jQueryで要素を消す際に使用するメソッドは色々ありますが違いはわかっていますか？ それぞれに特徴がありますので理解した上で使用する事で制作時間を削るだけでなくメンテナンスする際も楽になります。hide(),fadeOut(),css(),addClass()をサンプルコード付きで紹介しています。 .hide()

はじめに テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。 change, keypress, keyupの挙動まとめ キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。 ポイント changeはフォーカスが外れたときに発生する keypressは全角やdelete,backspaceを入力しても発生しない keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう change changeイベントを使うと変更を検知できます。

正規表現（jquery）を利用した入力チェックを紹介します。 正規表現は、文字が一致しているのか、していないかを判定する機能です。 応用としてフォームで入力された文字が条件と一致、不一致をチェックし、 ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。 【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun

JavaScriptでは選択した要素に対して、プロパティ(innerHTML等)の値を設定したり、addEventListener()により監視するイベントを設定したりと書き方がバラバラでした。 jQueryでは基本的に「$(セレクタ).メソッド(引数)」と同じ書き方で指定できます。 文章だけは理解が難しいと思いますので、実際にjQueryに利用したプログラムをお手本に従い作成してみましょう。 ファイル名: jquery.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> function add_element

基本的に、サーバーと正常な通信をしている場合は、statusの値が「200」なのでこれと条件分岐するのが良いでしょう。さらに、「readyState」と「status」は別々に条件分岐するよりも同時に確認する方が効率的です！ xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { //データ取得処理を書く } }; このように「&&」で一緒に確認できることも合わせて覚えておきましょう！ 「GET」で通信する方法 この章では、実際にAjaxを使ってGET通信を行う方法について見ていきましょう！ 基本的なGET通信のプログラム作成からデータの取得までを学んでいきます。 「GET」によるAjax通信のサンプル例 「XMLHttpRequest」を使ったAjax通信では、主に「G

プロジェクトNo.19：チャットアプリ JQueryで結構簡単にAjaxが使えるということで、 せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。 Ajaxとは Asynchronous JavaScript + XMLの略で非同期通信をするための技術です。 簡単に言うと、 ページの遷移なしでページ内の要素を変更できる サーバーにデータを送受信できる 前者だけだとjavascriptだけでもできますが、サーバー処理をかまして最新のデータを表示できるというところに大きなメリットがあります。 例えば、Twitterなんかのプラグインを見ると、リアルタイムにタイムラインが画面遷移せずに表示されるのがわかるかと思います。 GoogleMapでは画面をドラッグしたりズームする度に画像データ（？）を読み込むことで、必要なデータのみをユーザに表示しています。 これらはAj