JavaScriptでクロスドメインの壁を飛び越える方法 - FICC Workbook
Javascriptを使って異なるドメイン上のデータを引っ張ってこようと思うと意外とたいへんです。 「クロスドメイン問題」とかいう面倒な壁が立ち塞がっているからです。 ぼくもさっきまでハマりまくっていたのですが、「jquery.xdomainajax.js」と言う良さ気なJQueryライブラリを使うことによって見事クロスドメインの壁を飛び越えることに成功しましたのでメモ 使い方使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQ
jQueryの$(document).readyをセレクタで使いたい - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryでDOMのロード完了を検知するのに使われる$(document).readyですが、 これを未挿入の要素に対して使いたい。そんなメモログ。 $(document).ready()について まず、$(document).ready()について。 引数に渡された関数が、HTMLのDOM構築が完了した時点で呼ばれるという便利機能。 $(document).ready(function(){ // DOMロード完了時に実行される alert("Hello, world !"); }); jQueryを使っていれば一度はお目にかかる定型文ですね。 仕組みについては、こちらの記事が大変詳しく書いてありました。 $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)
[jQuery] aタグのリンクをクリックさせる方法 2019版
経緯 jQueryでは特定の動作をした時に 指定した要素をクリックしたことにするイベント があります。 ですがaタグのリンクをjQueryのイベントクリックさせたことにしてページ変移をさせたかったのですが、普通にやってもうまくいきませんでした。。 そのままaタグにクリックイベントを付けただけではページ移動が起こらず、解決するまで少しハマったのでやり方を共有します。 クリックしたことにするイベント jQueryを使ってクリックイベントを発火させるには、以下の方法があります。 [javascript] $(“#hoge”).trigger(“click”); //もしくは $(“#hoge”).click(); [/javascript] ただ、これはあくまでクリック時のイベントを発動させるだけで、実際にクリックするわけでは無いようです。 今回困ったのが、特定の動作に対して aタグのリンクをク
![[jQuery] aタグのリンクをクリックさせる方法 2019版](https://cdn-ak-scissors.b.st-hatena.com/image/square/6acec1449f355d6958f04c2c085c6cfa76ba65c6/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2014%2F02%2Flink_click.jpg)
#15 onメソッドを使ってみよう | 【旧版】 jQuery入門 - プログラミングならドットインストール
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」:phpspot開発日誌
jGravity Demo ページ内の要素に重力を与えて落下させられるjQueryプラグイン「jGravity」。 一見なんの変哲もないページだったとしてもボタンを押すと全ての要素に重力を与えてブラウザの下の方に落下させるというエフェクトがかけられます。 「Initiate jGravity」ボタンで重力を与えます。 次のようにアイテムが落下します。 使いドコロは難しいですが、驚きのエフェクトとして覚えておいてもよさそうです 関連エントリ エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
timing — a jQuery core plugin — introducing the Deferred jQuery Chain powered by our Lazy Proxy pattern and the new Timed Invocation Chain technique
timing — a jQuery core plugin introducing the Deferred jQuery Chain powered by our Lazy Proxy pattern and the new Timed Invocation Chain technique jquery-timing provides easy-to-use methods to define iterations, timeouts, intervals, Deferreds, and event-based loops and handlers just in line with all your jQuery stuff. jquery-timing is designed to change the way that you use jQuery. Simplicity If y
div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。 jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。 sponsors 使用方法 Ingeny Splitterからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.ingeny.splitter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名").splitter({ "defwidth": {"left":1
JavaScriptでピンポンのゲームを堪能できる「jQuery pong」
JavaScriptでピンポンできるjQuery pongです。 はい、ネタです・・・。 勝てませんしね。 sponsors 使用方法 jQuery pongからjquery.pong.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.pong.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#id名').pong('ボールの画像パス'); }); </script> あとは表示させたい場所に上記のidを付与すれば完成です。 <div id="id名"
メニューのマウスオーバーを効果的にするJavaScript「jQuery Sliding Menu (AKA Lavalamp)」
メニューのマウスオーバーを効果的にするJavaScript「jQuery Sliding Menu (AKA Lavalamp)」 一番目立つメニューを印象的にすることで、サイト内の回遊性向上が期待されるかもしれません。 jQuery Sliding Menu (AKA Lavalamp)を利用するとマウスオーバーを効果的にすることが可能です。 sponsors 使用方法 jQuery Sliding Menu (AKA Lavalamp Menu)からファイル一式をダウンロードします。 また、jQueryをjQuery: The Write Less, Do More, JavaScript Libraryからダウンロードします。 ※1.4が必要となるようです。 <link rel="stylesheet" href="jquery.sliding-menu.css" type="tex
あっという間に画像をドット絵に！jQueryプラグイン「SeuratJS」
画像をドットっぽく加工するとひと味違った見た目になり、印象的です それをjQueryでやってしまうプラグイン「SeuratJS」を紹介します。 sponsors 使用方法 SeuratJS - A Raphae"l plugin for creating beautiful pointillized animations.からファイル一式をダウンロード。 また、今回はRaphae"l―JavaScript Libraryも必要になるので、こちらもダウンロードしておきます。 <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" s
[phiary] jQuery の代わりに Selectors API の querySelector/querySelectorAll を使うと良いかもよ♪ - Qiita
[phiary] jQuery の代わりに Selectors API の querySelector/querySelectorAll を使うと良いかもよ♪JavaScriptHTML5phiary 本家ブログ『phiary』からの転載になります もしよければこちらからご覧ください -> http://phiary.me/jquery-selector-api-query-selector-all/ 今回は Selectors API の querySelector/querySelectorAll についてサクッとメモ. このメソッドを使えば getElementById や getElementsByClassName の代わりに使えて CSS セレクタでマッチした要素を取得することができます. jQuery を使うまでもないけど DOM 操作したいなぁなんて時に使えます. Usag
![[phiary] jQuery の代わりに Selectors API の querySelector/querySelectorAll を使うと良いかもよ♪ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/88668439b2ec9eb1d57f85924c43564e59d28163/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCcGhpYXJ5JTVEJTIwalF1ZXJ5JTIwJUUzJTgxJUFFJUU0JUJCJUEzJUUzJTgyJThGJUUzJTgyJThBJUUzJTgxJUFCJTIwU2VsZWN0b3JzJTIwQVBJJTIwJUUzJTgxJUFFJTIwcXVlcnlTZWxlY3RvciUyRnF1ZXJ5U2VsZWN0b3JBbGwlMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTMlODElQTglRTglODklQUYlRTMlODElODQlRTMlODElOEIlRTMlODIlODIlRTMlODIlODglRTIlOTklQUEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTZhZmU2MjQ5MmY3MGZiNzc4ODQ3ODk4YzRkODlkZTlk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcGhpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNzMyODE2YjRmOTNiOTE5N2U1YjI1NGNlZGNmMGY1OA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D06a3ebfa6775e59df8a2e05818226749)
JavaScript Animated Typing with Typed.js | by Matt Boldt
Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup var typed = new Typed('.element', { strings: ["First sentence.", "Second sentence."], typeSpeed: 30 }); The README on GitHub is going to be very helpful for any questions, features, or use cases. end If you're using this, let me know! I'd l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - iamdanfox/typetype: human typing with jQuery
ericterpstra.com - このウェブサイトは販売用です！ - ericterpstra リソースおよび情報
文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」
写真をミニチュア模型風にするjQueryプラグイン「tiltShift.js」
https://github.com/jquery/jquery/blob/master/AUTHORS.txt
https://github.com/mattboldt/typed.js/blob/master/README.md
GitHub - 1026/jQuery.ThreeSixtyRotate
