特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも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
[jQuery] click / touch / pointer イベントを完全に制御する - Qiita
var event = { all: 'mousedown touchstart pointerdown mouseenter mouseleave', type: '', start: '', enter: '', leave: '', move: '', end: '' }; // イベント判定 event.check = function(e){ var _default = e.type; event.start = _default; event.move = _default === 'pointerdown' ? 'pointermove' : (_default === 'touchstart' ? 'touchmove' : 'mousemove'); event.end = _default === 'pointerdown' ? 'pointerup' : (_def
![[jQuery] click / touch / pointer イベントを完全に制御する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d34c6cd8860611a610801eeec50679360b08ae2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCalF1ZXJ5JTVEJTIwY2xpY2slMjAlMkYlMjB0b3VjaCUyMCUyRiUyMHBvaW50ZXIlMjAlRTMlODIlQTQlRTMlODMlOTklRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTUlQUUlOEMlRTUlODUlQTglRTMlODElQUIlRTUlODglQjYlRTUlQkUlQTElRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWEzN2UyYTQyNDViMzdkMzdkZTcwYWMwMjViM2FiZjlh%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9zaGloYXJ1LWlyaWUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAzZWM5MjZhMWQ4M2JiNDQwNmJhMjdiN2YyM2UwMWRk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc1264083483f18afc3b325e7af2293ef)
[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
http://dan-silver.github.io/ElementTransitions.js/
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/ap_jqmobile_index.html