粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 今回はモーダルウィンドウをプラグイン無しで作成する方法をまとめます！ モーダルウィンドウはWebサイトによく使われるUIですが、意外に実装が難しいんですよね。 同ページ内に複数モーダルを設置する方法まで、基礎的な内容は解説していますので、不安な方は是非参考にしていただけると嬉しいです！ モーダルウィンドウ とは モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。 モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側
プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
スマートフォンサイトなど、スクロールが長いページが多くなってきましたね。 そんな中、ワンタップで「スルスル〜」とトップへ戻る便利な機能をjQueryで簡単に設置しましょう。 jQueryの知識は、ほとんど入りません。 まずは、コピペで！
指定数値までカウントアニメーションするjQueryプラグイン「jquery-countTo」 指定した数値までカウントアニメーションしてくれるjQueryプラグイン「jquery-countTo」のご紹介をいたします。 投稿日2015年10月19日 更新日2015年10月19日 jquery-countToのダウンロードと準備 ダウンロードはGitHubから。 lessthan3/jquery-countTo JSファイルはbuildフォルダに入っています。jQueryと一緒に読み込みましょう。 html <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" sr
jQuery.Kerning.js A kerning plugin specific with Japanese webfont Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォのすき
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
Result jQuery //クリックでイベント発火 $('.open-dialog').click(function() { //ダイアログを表示させてからid="iframeContainer"を探してDOM要素追加 $('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>'); //オーバーレイ $('#dialog-overlay').fadeTo(400, 0.8); return false; }); //閉じるイベント $('#kotak-dialog .close').click(function() { //追加したiframeのDOMを削除 $('#kotak-dialog').fadeOut('normal', function
このサイトのトップページに、Willさんいんの Facebook ページの投稿を表示するため、公式プラグインの Like Box を使用していました。 ところがこの Like Box、6月23日に廃止となり使えなくなるとのことで、新しい Page Plugin に移行するよう勧められています。 With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites. しかし、この新しい Page
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
I am trying to implement jQuery animateNumber, and I have it working like the demo just fine. However, I want to modify it so that it pulls the number from the HTML, rather than setting it in the script. I tried the following, but it just shows "NAN." What am I doing wrong? <div class="stat-title animate-number">$16,309</div> <script> $('.animate-number').each(function(){ var value = new Number; /
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
指定した数値までカウントアップをしてくれるプラグイン「animateNumber」を紹介します。 jQueryプラグイン「animateNumber」このプラグインを使えば、簡単に指定した数値までのカウントアップをWeb上で実現することができます。 例えば、100までのカウントアップを実装した場合、指定した要素が0、1、2、3、... 99、100とカウントアップします。また、カウントアップ完了までの時間も指定できるので、使い方次第ではサイトにおもしろい効果を加えられそうですね。 デモで、100までのカウントアップをご覧ください。 「animateNumber」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>animateNumber - jQueryプラグインまと
jQueryでInstagramのフィードを取得して自動スクロールさせてみたら | THE NEXT BLOG™ | ネクスト株式会社
手軽におしゃれな写真をシェアできるサービス「Instagram」。写真が正方形というところがすごく素敵です。 フィードを取得できないかなぁと思ったら、APIやプラグインが揃っていたのでさっそくためしてみました。 自身のアカウントのフィードをランダムで取得して横方向に自動スクロールするといった内容で、今回使用したのは、以下の2つのjQueryプラグイン。 Instafeed.js Instagramで最新のfeedを取得してくれるjQueryプラグイン http://instafeedjs.com/ Github – stevenschobert/instafeed.js 細かいOptionsが設定できるすぐれたプラグインです。 jQuery simplyScroll 横方向に延々と自動スクロールしてくれるjQueryプラグイン http://logicbox.net/jq
<ul class="menu"> <li id="menu01"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul> <ul class="menu"> <li id="menu01" class="current"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul>
グローバルナビを共通ファイル化するとき、PHPやCMSで管理して 現在地判定もそこで設定することが多いのですが、 今回は現在地の判定をJavaScriptで実装してほしいという要望があり、調べてみました。 カテゴリ1 カテゴリ2今ここ カテゴリ3 カテゴリ4 「jquery 現在地」で検索したら、すぐ使えそうなものがいっぱい出てきました。。 やり方はいくつかあり、 ・bodyタグに、該当するディレクトリをIDで指定しておき、マッチする要素にクラスを追加 ・liやa要素にIDをつけておき、現在のURLとIDがマッチしたらクラスを追加 ・現在のURLとナビのリンクURLがマッチしたらクラスを追加 etc. ページごとにIDやクラス指定を追加するのは手間なので、他サイトでもすぐ使いまわせそうな 「現在のURLとナビのリンクURLがマッチしたらクラスを追加する」パターンを紹介します。 こちらは参考
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
