【jQuery】処理実行タイミング $(document).readyと$(window).load - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
jQueryでmarginも含めた幅や高さを取得 | このコードわからん
しょぼい話し。 たとえば #id{ height: 10px; width: 10px; margin: 5px; padding: 5px; } とした時に、jQueryで普通に $('#id').height(); を実行してもheightで帰ってくる値は 10。 しかしながら、 $('#id').outerHeight(); ってやると、paddingを含んだ高さが返ってきます。 今回の場合は20。 marginを含めるには、trueを渡す必要がある。 $('#id').outerHeight(true); ってやると30だ。
URLのアンカーを取得する。 - うなの日記
「location」で現在のURLを取得できます。「location.hash」でアンカー部分を取り出し。 // 現在のURLにアクセス。 stdout.innerHTML += location + "<br/>"; // URL stdout.innerHTML += location.search + "<br/>"; // クエリー文字列 (?xx=aaa&yyy=bbbの部分) stdout.innerHTML += location.hash + "<br/>"; // アンカー 部分 (#fooの部分) 確認はこちらから 参考:とほほのJavaScriptリファレンス - ロケーション
無名再帰関数 - JavaScript（ジャバスクリプト）リファレンス
無名関数は、argumentsオブジェクトのcalleeプロパティを使うことで、再帰的に呼び出すことができる。 サンプル <script type="text/javascript"> ( function ( $var ) { if ( $var <= 10 ) { document.write( $var + ", " ); arguments.callee( ++$var ); } } )( 3 ); </script>
新参の超軽量JavaScript非同期ローダー3種を徹底比較 | ゆっくりと…
JavaScriptの読み込み・実行は、それより下にある画像など外部リソースの読み込みと表示をブロックするため、「ページ読み込み時間を短縮するJavaScriptローダー：LABjs」 や 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 で紹介したように、多数の JavaScript ローダーが開発されてきました。 これらのローダーは、「非同期スニペットのスタート ガイド – Google Analytics」 に代表される、script 要素を直接 DOM に挿入する方法が主流となっています。またそのタイプは、単一のスクリプト・ファイルを対象とした小規模なものと、Head JS、LABjs、ControlJS などに代表される、複数ファイルの依存関係をハンドリングする機能をもつものに大別されるかと思います。 後者のタイプは最小でも3KBytes
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」 - かちびと.net
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
30秒で理解できるものだけを集めたJavaScriptコードスニペット集・「30 seconds of code」 - かちびと.net
30 seconds of codeは「30秒で理解できるJavaScriptコード」をまとめたスニペット集です。理解力に欠ける自分の脳では30秒は難しかったですが、シンプルながら便利そうなコードが沢山掲載されていました。暇なうちに試してみようかと思います。尚、本コードはGithubでも公開されており、CC0ライセンスの元で配布されています。 30 seconds of code ご挨拶 あけましておめでとうございます。 本年もよろしくお願いいたします。
Cannon.jsで物理演算に触れてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Cannon.jsとは Cannon.jsは、物理演算用のJavaScriptライブラリです。 Three.jsをインスパイアして作られたため、Three.jsと相性がよく、構文も非常に似ています。 まずは動かしてみる どんなものかイメージをつかむため、とにかく動かしてみましょう。まずは空間に球体をつくり、適当な高さから落としてみます。 See the Pen cannon.js by k_hatsushi (@hatsushi_kazuya) on CodePen. ただ落ちるだけですが、重力や位置の設定に基づいて自動で物体が動いているのが分かると思います。 跳ね方を変えてみる 球体の大きさと距離を変えたものを用意して、跳ね方の違いを見てみましょう。 See the Pen August blog cannon.js demo2 by k_hatsushi (@hatsushi_kazu
Cannon.jsで簡単なゲームを作ってみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、はっちゃんです。 今回は、前回話したCannon.jsの基本を使って簡単なゲームを作ってみます。 ▼前回の記事 今回のゴール こんなゲームを作ります。 球体を３つ置く 単純に球体と球体を当てるだけだとつまらないので、ビリヤードみたいに球体同士の跳ね返りを計算して当てるようにします。 3つめのでかい球体ははやちさんの記事によく登場するキャラクターにしてみました！ これを「はやちボール」と名付けるとします。はやちボールはランダムで配置するようにします。 ▼3つの球体の物理世界の設定 // Sphere Material sphereMat = new CANNON.Material('sphereMat'); // Sphereのシェイプの質量定義 phySphere = new CANNON.Body({ mass: 1, material: sphereMat }); phyS
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ -
どうも、まさとらん（@0310lan）です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います！ 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください！ ■Webページとしても公開できる実用的なエディタ！ 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える
[JavaScript] 適用するCSSファイルを動的に変更する – コピペで使える JavaScript逆引きリファレンス
CSSファイルを動的に変更するサンプルです。 サンプルソース 例）適用するCSSファイルを「sample1.css」から「sample2.css」に変更する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <link rel="stylesheet" type="text/css" href="sample1.css" id="cs"> <script> function changeCss(){ document.getElementById("cs").href = "sample2.css"; } </script> </head> <body> <input type="button" onclick="changeCss();" value="CSSを変更する
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
JavaScriptでstrftime() ができるライブラリ:phpspot開発日誌
strftime() by thdoan JavaScriptでstrftime() ができるライブラリ JSで日付フォーマット表示するのはphpのように簡単ではありませんが、それを簡単にするライブラリ。 標準で組み込まれて欲しい。 関連エントリ 画像をホバー時にJavaScriptなしでズームする
5文字で書くJavaScript/ Shibuya.XSS techtalk #10
Shibuya.XSS techtalk #10 の発表資料です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのoffset()を使う際の注意 - Qiita
jQueryでスクロール位置を取得・設定する：scrollTop() | UX MILK
jQuery 子要素を含まない text() が欲しい時 - Qiita
【JavaScript】関数定義いろいろ - Qiita
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」 - かちびと.net