jQuery→JavaScript書き換え一覧表 - Qiita
<ul> <li id="first">テキストテキストテキスト</li> <li id="second">テキストテキストテキスト</li> <li id="third">テキストテキストテキスト</li> <li id="fourth">テキストテキストテキスト</li> </ul> <ul> <li class="first">テキスト<strong>テキスト</strong>テキスト</li> <li class="second">テキスト<em>テキスト</em>テキスト</li> <li class="third">テキスト<span>テキスト</span>テキスト</li> <li class="fourth">テキストテキストテキスト</li> </ul> <ul> <li lang="en">テキストテキストテキスト</li> <li></li> <li><span>テキ
任意のコンテキストメニューを実装できるスクリプト・「jQuery Menu」
jQuery Menuは任意のコンテキストメニューを実装する為のスクリプトです。jQueryに依存します。特定のエリアで右クリックすると事前に設定したメニューが表示される、というもの。ライセンスはMITです。 jQuery Menu
データベースの関連等を綺麗な図で表示できる「JQuery HyperModel」:phpspot開発日誌
JQuery HyperModel データベースの関連等を綺麗な図で表示できる「JQuery HyperModel」 次のような、ドラッグ＆ドロップも可能なモデル間の関連図を描画できます。 関連エントリ 組織構成等の階層図をピュアCSSで美しく表示するサンプル
簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは、はるです。 LPなどでよく見かける縦長のサイトで、各セクションが画面いっぱいに広がるページを、プラグインで簡単に作る方法を紹介したいと思います。 今回の記事では、このようなベースを作成していきます。 Scrollifyについて デモサイト：https://projects.lukehaas.me/scrollify/ github：https://github.com/lukehaas/Scrollify 利用するのは、「Scrollify」というプラグイン。 デモサイトにあるような、各セクションごとにひっつくようなレイアウトを簡単に制作できます。セクションで画面の高さを超える場合、そのセクション内でスクロールができるようにしてくれるのが特長です。 githubの履歴からわかるように、リリースが2014年と新しくなはいプラグインですが、他のものと比べ使いやすかったため、
jQueryのfindなどをquerySelectorで書く - Qiita
$("[hoge!=value]") $(":button") $(":checkbox") $(":file") $(":image") $(":password") $(":radio") $(":reset") $(":submit") $(":text") $(":parent") $(":input") $(":header") $(":selected") document.querySelectorAll(":not([hoge=value])") document.querySelectorAll("button, input[type='button']") document.querySelectorAll("[type='checkbox']") document.querySelectorAll("[type='file']") document.querySele
いつか使いたい！レトロゲームを連想させるjQueryプラグイン3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ゆたろです。どうもです。 先週、髭剃りが壊れて無法地帯です。 さて、今回は、昔遊んだ「レトロゲーム」を連想させる表現ができるjqueryプラグインを紹介していきたいと思います。 縦スクロールシューティングゲーム風 starscroll.js starscroll.js要素に対して、縦スクロールシューティングゲームの背景のようなエフェクトをつけてくれるプラグインです。 sample https://github.com/vonKristoff/starscroll html --省略-- <h1>starscroll sample</h1> <script src="jquery.js"></script> <script src="starscroll.js"></script> <script src="hoge.js"></script> --省略-- javascript hoge.
どのやり方がいい？ ブクマしておくと便利なjQuery無限スクロールまとめ
WPJでも使っている「無限スクロール」。案件でいざ実装するとなってあちこち探しまわるのは面倒なもの。このページをブックマークしておくと便利ですね。 無限スクロール（Infinite scroll）は非常に一般的になった機能ですが、覚えておくと役立ちます。例えば、TwitterやFacebookなどもそうですが、ページ割りの仕組みがないWebサイトの場合です。また、サーチエンジンにも無限スクロールは有効です。無限スクロールにすれば、欲しいリンクが見つかるまでスクロールするので、ページごとで検索するよりサイト滞在時間が長くなります。もしプロジェクトで無限スクロールを使う必要がある場合は、以下に紹介する6つのデモをぜひ参考にしてみてください。 注意点として、6つめの例を除いてデモはすべてjQueryで書かれていて、いくつかはjQueryプラグインを使用しています。6つめの例は簡単にvanilla
背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」:phpspot開発日誌
インストーラのようなウィザードをWEBで実現できる「jQuery Smart Wizard 4... 次の記事 ≫：WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」
たまにはjQueryに頼るのをやめてみる - Qiita
はじめに ありとあらゆる所で使用されている超有名なJavaScriptライブラリといえば jQuery ですが、ちょっとした処理を行いたいがために使っているようであれば無駄な気もします。 最近のJavaScriptはjQueryなしでも割といろんな処理を行うことができます。 というのも、jQueryの動作を模倣してみようとゼロから書いた拙作のライブラリ queries.js を通してどのような処理を行っているのか理解が深まったからです。 宣伝になってしまいますが、queries.js へのリンクを貼っておきます。 jQueryライクなJavaScriptライブラリ queries.js ちなみに、処理に関しては Internet Explorer 11 未満は考慮していません。 ここに書かれているコードのほとんどは意図的に関数化していません。これらのコードを元に自由に組んで自分で使いやすい
[PHP+JS]マークダウン形式のシンプルなメモ帳サイトを作ってみた！ - Qiita
追記： 現在はVueでリニューアルされています。 Gmailの下書きをメモ帳代わりに使うのにも限界を感じてきた。 しかし、リッチテキストが嫌いなのでEvernoteを使う気にもなれず。。 というかマークダウンでメモをとりたい。画像貼れたりとかリッチな機能も全然いらない。ネイティブアプリ版もいらない。 というわけで、そんなサイトいくらでもあるだろうとは察しつつ自作してみました。 完全に自分で使うために作ったものの、せっかくなのでリリースできる形にしています。 『CosMoNOTE』 ゲストアカウントがあるのでお試し下さい。 まあ、個人の作ったサイトにメモを保存したがる人はあまりいないと思いますが、一応メモの内容だとかはちゃんと暗号化した上で保持されますし、僕が復元することもありませんのでご安心下さい。 使用技術 PHP+MySQL+JS(jQuery)を使いました。 ログイン後のメモ画面はペ
![[PHP+JS]マークダウン形式のシンプルなメモ帳サイトを作ってみた！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/64257c6c8d6579331c30298159e1880f9f66db3b/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUEhQJTJCSlMlNUQlRTMlODMlOUUlRTMlODMlQkMlRTMlODIlQUYlRTMlODMlODAlRTMlODIlQTYlRTMlODMlQjMlRTUlQkQlQTIlRTUlQkMlOEYlRTMlODElQUUlRTMlODIlQjclRTMlODMlQjMlRTMlODMlOTclRTMlODMlQUIlRTMlODElQUElRTMlODMlQTElRTMlODMlQTIlRTUlQjglQjMlRTMlODIlQjUlRTMlODIlQTQlRTMlODMlODglRTMlODIlOTIlRTQlQkQlOUMlRTMlODElQTMlRTMlODElQTYlRTMlODElQkYlRTMlODElOUYlRUYlQkMlODEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTE4MDFlNzdiYmFlMzE1MzMzODg0MmY5MDM1NTM1ZTZi%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBsYWluZXVzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00Yjg0NmY3NTA2YzY1ZWQ4ZGM0ZDU1YjQzODg3ZTZkMg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Oq44Oz44Kv44OQ44Or%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dfacb31a62eb0e2af03056d18995fc993)
jQueryでAjaxするときに知っておきたい、JSONとJSONPの違い
jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインからデータをロードしようとすると、おそらくブラウザーの画面に以下のようなメッセージが表示されているはずです。 XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘h
紙のページをめくるような動き - Qiita
概要 クリックすると紙の書類をめくるようにページを送る 実際の書類を読むときのように、初期配置と送ったページでz-indexを反転させる jQuery使用 クリックしたときのページの重なり順など改善予定 デモ http://codepen.io/viscosenpai/pen/bqNvdy コード <div id="wrapper"> <section class="page"> <h1>Title-1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae bla
[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)
jQueryでスムーススクロールすると、コールバックが2回呼ばれちゃう問題 - Qiita
しばしばこんな風にjQueryでスムーススクロールを行うのですが、これだとcallbackが2回呼ばれてしまうのですね。 var position = 0; var speed = 400; var ease = 'swing'; var callback = function() { // do something... }; $('html, body').animate({scrollTop: position}, speed, ease, callback); // これでは、htmlとbodyそれぞれで2回、callbackが呼ばれてしまうのだー 以前だと、以下のようにブラウザ判別して body か html のどちらかをセレクタに適応することで回避できたのですが、.browserはjQuery2/3ではもう使うことは出来ませんよね。このためだけにuserAgentからブラウザ判
Drawer
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONデータからレスポンシブなタイムラインUIを表示できる「jquery-albe-timeline」:phpspot開発日誌
https://samuraishockdo.info/16-code/68-html5video2seamless.html
https://blog.mismithportfolio.com/web/20150320drawer
引っ張って更新を簡単実装できる「Pull to Refresh.js」:phpspot開発日誌