レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ

こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン

いろいろコードを覗いてみましたが、jQuery.Smart3D のコードが私にはわかりやすかったので計算式などだいぶ参考にさせて頂きました。 mousemoveイベントについて mousemoveイベントはマウスが要素上を動いた時に発生し、mousemoveイベントの引数からイベントに関するさまざまな情報を受取ることができます。マウスカーソルの位置もここで取得することができます。 作ったサンプルデモ Simple3Dmove_Sample|memocarilog-demo 作ったサンプルは以下のアドレスからダウンロードできます。 ◆ Simple3Dmove_Sampleをダウンロード カーソルの動きに合わせて動くパララックスを作るコード HTMLのコード HTMLは下のようにul要素で囲い、画像をli要素でマークアップします。 <ul id="sample"> <li><img src=

基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第6弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 便利なtoggle系メソッド 例えば、jQueryを使って要素を非表示にしたいときは.hide()を、逆に表示させたいというときは.show()を使うことで要素の表示・非表示を行うことができ、classの追加・削除を行いたいときは.addClass()と.removeClass()を使うことでその動きを実装することができます。 それぞれで単独の動きを実装したいのであればそのまま上記を用いるのですが、これがクリックで表示・非表示を切り替えたいとか何らかのタイミングでclassの追

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。

jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン

jQuery基礎講座[第７回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 表題の通り、スクロールするとアニメーションを実行する、というものを作っていきたいと思います。これは、ウィンドウのスクロール量とアニメーションを実行する要素の位置関係を取得し、ウィンドウに出現するタイミングでクラスをつけてアニメーションを実行する、といった内容になっています。 前回の基礎講座（jQuery基礎講座[第６回]：スクロール量に応じて要素（ヘッダーなど）を固定する（ZIP付））と近しい内容になっているので、是非こちらも合わせて読んでみてください。 それでは、具体的にみていきましょう。 実装実例 どんな動きになるのかは下記画像内のウィンドウをスクロールしてご覧ください。（こちらは『placeit』で作成させていただきました。） ページが読み込まれると、

こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし

いやぁ、寒い。 寒いですね。 これを書いている今は、なんか寒波がどうだのこうだのらしくって寒い日ですよ。 指が冷えてて、キーボード打つスピードが平常時の75%くらいですよ。 歳かな・・・・ 2014年ももうすぐ終わりですね。 今年は年末豪華連休を狙っているんですが、案件状況的にどうでしょね。 怪しいところです。 豪華連休狙っても、大抵（いや、全部）上手くいかない。 しょうがないね…（´・ω・｀）… さてはて、今年は僕もソニックムーブ Advent Calendar 2014に参加すべく重い腰を上げたわけなんですよ、えぇ。 14日目の今日は、前回（JavascriptアニメーションライブラリTween.jsの紹介）予告した通り、TweenMax.jsを紹介します。 TweenMax.jsは、かなり高機能なjavascriptアニメーションライブラリになっているので、これを使えるようになってし

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v

Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。 WordPressのプラグインも有り。 mmenu (jQueryのプラグイン) mmenu -GitHub デモページ On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。

以前 jQuery の繰り返し処理について書きましたが（【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES）、もうひとつ map というメソッドがあります。これは単純な繰り返し処理用ではないので前回のエントリからは外しましたが、使い慣れると非常に便利なのでまとめておきたいと思います。 今回使うサンプルのHTMLはこんな感じです。 <div class="hoge">ほげ1</div> <div class="hoge">ほげ2</div> <div class="hoge">ほげ3</div> ... jQueryのmapとは map とはマッチした要素数分を繰り返して指定した関数を実行し、その結果をまとめた新しいjQueryオブジェクトを返してくれます。簡単に言うと配列から別の配列を作るという事です。 .map( )メソッド var arr

こんにちは、GWはがっつり朝から晩まで子供と遊びまくっていたishidaです。 今回はajaxを利用して、ブログの最新記事を掲載してみようと思います。 ajaxで取得するデータは、同一サーバ内のxmlデータとします。また取得するブログは以下の3つとしています。 馬車道の社長ブログ（/blog/niidome/index.xml） ゴトウ@シーブレインの馬車道（/blog/goto/index.xml） バシャログ。（/blog/wsg/rss.xml） デモ ajaxで複数ブログの最新記事掲載のサンプル htmlソースコード 以下がhtmlソースコードです。該当部分以外は省略しています。 feeds という id 部分にデータを読み込んで表示します。 <div id="main"> <h1>ajaxで複数ブログの最新記事掲載のサンプル</h1> <div id="feeds"> ここに表示

Result jQuery var maxHeight = 0; //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる $("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); //divの高さを取得する $("div").height(maxHeight); css div{ height:auto; width: 70px ; background:#eee; margin:3px; float:left; } html <div>1<br />2<br />3<br />4<br />5</div> <div>div</div> <div>div</div> <div>div</div> <div></div> <div

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント

これらの設定値を変更することでもろもろ調整が可能になっています。 追加される要素は一つひとつが ＜div＞で囲われるようになっており 個々にID名が付与されるようになっています。 ※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。 （ID名に関してはJSONファイルに記述） スクリプト14行目の「url: ‘js/include.json’」が 読み込むJSONファイルの指定になるので パスやファイル名を変える際にはここを変更します。 そして読み込むJSONファイルは以下の様になっています。 （ちょっとムダに長いです・・・） ◆JSON [ { "itemNum": "1", "itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加

必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち