javascript

スポンサーリンク
javascript

【jQuery】トップへ戻るボタンをコピペで実装!

下へスクロールするとヒョイッとでてくる「トップへ戻る」ボタンをコピペで実装しよう! ボタンの形を複数作ったので好きなCSSをコピーして使ってね! ではまず共通のHTMLとjQueryです。 HTML <div class="up"&g...
javascript

【jQuery】隣の要素・兄弟要素の取得方法

ボタンを押したら、隣の要素にクラスを付けたり外したり色々便利な兄弟要素の取得方法のご紹介です! jQueryで取得する書き方が色々とあるので、それぞれの動きをデモで確認しよう! デモ 「ワタシ」から見て兄弟要素をアラートするよ ネ...
javascript

【jQuery】VRトラッキングみたいに、カーソルを丸くしクリックアクションを追加する方法

カーソル(cursor)を矢印ではなく丸くし、クリックでポワンっと広がるアニメーションを追加する方法を説明! この~。。。なんて言うんだろう? 「カーソルが好きな形に変化するや~つ(仮名)」がサイトに実装されてると「こだわってる!」感があ...
javascript

【jQuery】〇文字以上「…」をコピペで簡単設置!

ブログでよくある本文の省略機能だけど、自分で作ると結構手間だよね。 何かサービス作る時とかよく使うから、このページを覚えとくと便利! じゃ~まずデモだよ。 15文字以上はカットしてその後点々デモ 15文字以降は点々で切るからそれ以上は書かな...
javascript

【jQuery】パーセントの計算方法

特定数Aは特定数Bの何パーセントか? 特定の値は全体の何パーセントか? コーディングしていると、パーセントでの数値を求めたい時があります。 僕は根がバカなもので、中学校の数学の問題でも求め方が分からなくてしばらく検索しちゃう。 このパーセン...
CSS

【コピペOK!】ON/OFFスイッチのデザイン7個|iOS風スイッチもあるよ!

フォームやインタラクティブなサイトで使えるON/OFFのトグルスイッチのデザイン7つのご紹介。 シンプルなものなので様々な所で利用できるトグルスイッチ7つを作ってみたので ぜひぜひコピペして利用してくれたら嬉しいです! チェックボックスは見...
javascript

【jQuery】コピペでスクロール値を常に画面に表示させる

スクロールアニメーションを作る時に、スクロール値をコンソールで確認するのも良いけど そうするとHTMLやCSSがブラウザ上で編集しずらくなる。 それなら画面にスクロール値だけ表示しておけば便利じゃん!と思いました。 でもこれ最終的に消し...
javascript

【jQuery】特定クラスがリストの何番目にあるかを取得!

リストの特定クラスが何番目にあるのかの取得方法をご紹介。 var number = $('.sample').index('ul li'); 「$('.sample')」に番号を取得したい特定のクラスやIDを書いて、「.index('ul...
javascript

【jQuery】iOS・iPadOSでスクロールすると発生するリサイズ処理を止める方法

iPhone(iOS)のSafariでスクロールするとリサイズ処理が走るのやめて欲しい。 実機でしか確認できないので、忘れる時があるから困っちゃう。 この厄介なリサイズ処理問題の原因は、スクロールすると Safariのアドレスバーが小さく...
javascript

【jQuery】offset().topエラーになる原因

jQueryでトップからの位置を取得する「offset().top」ですが、 chromeの開発ツールで確認するとたまにエラーになる時がある。 ちゃんと取得してたはずなのに、なんでこんな表示が出てるの?って思うけど 気にしないでいいかなと...
javascript

【jQuery】スクロールの上下方向を検知・判定する方法

ページを作成しているとスクロールで変化させたいことって結構あります。 スクロールしたら特定の位置で固定したり要素が見えたら表示したり。 今回は上下にスクロールしたらを検知・判定のご紹介です。 まずはデモで動作の確認をしてください。 下ス...
javascript

【jQuery】フォームの入力チェック|バリデーション

フォームのバリデーションって作るの結構手間だよね。 チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん! だからコピペ用に作りました。ご自由にどうぞ! デ...
javascript

jQueryで後ろからn番目を取得する方法

jQueryを使って後ろからn番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。 疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS jQuery // 取得したい要素と数字 var li...
javascript

コピペで簡単!高機能スライダー[Swiper.js v6]の使い方|Javascript

自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。 「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Pre...
javascript

jQueryで要素をコピーする方法

jQueryには便利な「clone()」関数というのがある。 この「clone()」を使って簡単にDOMをコピーすることができるんです。 下のHTMLからjQueryを使ってDOMを取得します。 jQuery // をコピー var tit...
スポンサーリンク
タイトルとURLをコピーしました