特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Electron で $ ないって言われるんだけど... Electron で普通に jQuery を使おうとすると, 下記のようなエラーが表示されます. Uncaught ReferenceError: $ is not defined jQuery を上手く読み込めないわけですね. jQuery を覗いてみる この原因は jQuery の実装コードにありました. jquery.js (function( global, factory ) { if ( typeof module === "objec
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」
スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」 スクロールストップイベントを実装するjQueryプラグイン「jquery.event.scrollstop.js」を作成したので公開しておきます。 ダウンロード / サンプル 一応、iPhoneやAndroidでの利用を想定しているので、そちらに最適化しています。 $(window).bind("scrollstop",function(){ alert("ok") }); と言った具合にscrollstopをbindするだけでscroll stopイベントが利用ができます。MITライセンスで公開しておきますのでご自由にご利用ください。 関連エントリー CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPho
jQueryで動的に CSSファイルを追加する方法
他の要素と同じようにappend()とかappendTo()しても、CSSファイル（link要素）の追加ができない。（IE8のみで確認。） でも下記で紹介されているやり方ならなぜかできた！ How-To: Load Javascript and CSS dynamically with jQuery | TopSecretProject $("head").append("<link>"); css = $("head").children(":last"); css.attr({ rel: "stylesheet", type: "text/css", href: "/javascripts/jwysiwyg/jquery.wysiwyg.css" }); append()の後、メソッドチェーンしないでchidleren(":last")で取得するのがポイントらしい。 メソッドチェーンで
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門：jQuery Mobileでスマホ向け企業サイト構築（1）（1/2 ページ） jQuery Mobileを利用した企業サイトの構築【準備編】 iPhone、Androidなどのスマートフォンが普及するなかで、スマートフォンブラウザ向けWebサイトの需要は拡大しています。グーグルの調査によると、日本のスマートフォン普及率は2011年1、2月の時点で「6％」、2011年9、10月では「17％」です。平成24年の国内スマートフォン販売シェアが半数を超え、さらなるシェアの拡大は確実です（参考）。 PCの販売台数が低下する中、iPadなどのタブレット端末の普及も伴い、今後モバイル端末への対応が必須となってきます。かつてPC上のWebブラウザで起こったシェア争奪戦「ブラウザ戦争」と同様に、モバイル端末のシェアの奪い合いも激しくなってい
実験室: jQuery.triggerを使ってEventDispatcher(AS3)のような事をしてみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。 カスタムイベントを登録して送出したり出来るので大変便利。 本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみたログです。 AS3のEventDispatcher まず、AS3のEventDispatcherはどのような代物なのか。 EventDispatcher – ActionScript 3.0 コンポーネントリファレンスガイド public class Example extends EventDispatcher { public static const EVENT_CHANGE:String = "change"; private var value:String = "Hello, World!"; /*
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript
[jQuery] click / touch / pointer イベントを完全に制御する - Qiita![[jQuery] click / touch / pointer イベントを完全に制御する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f40d5d01dfa5d8767ed88f3932b1985522d887f7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRjEuZ3JhdmF0YXIuY29tJTJGYXZhdGFyJTJGMWY3ZTRhZDIyMTFiNjI5NGU0OWMzZDAxOTkyYjM5NGQlM0ZkJTNEaHR0cHMlMjUzQSUyNTJGJTI1MkZpZGVudGljb25zLmdpdGh1Yi5jb20lMjUyRjE4YmI2OTQ1NTZmOTkxNjliMjk4ZTk5NjBiYWE0YTBkLnBuZyUyNnIlM0R4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTJhZjY5YzM0OTEyMDhjNzBmZGJjOGFkOTRjODVkMjlk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dee2f7fd4d751ac44194be284ac29b5a5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCalF1ZXJ5JTVEJTIwY2xpY2slMjAlMkYlMjB0b3VjaCUyMCUyRiUyMHBvaW50ZXIlMjAlRTMlODIlQTQlRTMlODMlOTklRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTUlQUUlOEMlRTUlODUlQTglRTMlODElQUIlRTUlODglQjYlRTUlQkUlQTElRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hYTE5MjRmNmE3YTg3NDlmYmE4MDNjNTA1MjYwNWJlNQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0b3NoaWhhcnUtaXJpZSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWU3MTE0MGIyNzdhZTY0ZjNkZTkwMzZhNmJlNzljNmJi%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D89408ebc673fc27e044fb448e6cb2514)
http://dan-silver.github.io/ElementTransitions.js/
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/ap_jqmobile_index.html