javascript
-
2023/03/28 / javascript
formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
HTMLとform計算 数値を入れる度に、リアルタイムでoutputが変わる。 計算結果 = 入力1 × ラジオボタン1 + 入力2 × ラジオボタン2 <form method="post" oninput=" result...
続きを読む
-
2023/03/21 / javascript
マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
画像を2種類用意する。（後ろに_onをつけたもの。） sample.jpg と sample_on.jpg html <img src="../images/sample.jpg" alt="" class="over...
続きを読む
-
2023/02/27 / javascript
querySelectorAllエレメントのhrefをforEachで削除する
wordpressプラグインMetaSliderなどで、左右の矢印をクリックすると、ページのTOPまで戻ってしまうのを解除する記述。 jsファイルに下記を追加 $(function(){ const element1 = doc...
続きを読む
-
2022/12/02 / javascript
jQuery,Masonry,imagesloadedで画像を敷き詰める
HTML <div id="grid"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> <div cl...
続きを読む
-
2022/11/28 / javascript
jQueryで特定のページからリンクされた後のページでclassを追加
リンク元の書き方 <a href="http://test.com#link1">リンク</a> リンク先のページのHTML例 <p id="afterlink">リンク後ページ</p> j...
続きを読む
-
2022/11/12 / javascript
カレンダー
カレンダーのcss <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-...
続きを読む
-
2022/11/11 / javascript
特定の要素を持っていたら（あったら）jQuery
#yousoをクリックしたときに、#yousoが特定のclassを持っていたら... $('#youso').click(function(){ if ($(this).hasClass('open')) { //#yousonoが...
続きを読む
-
2022/11/10 / javascript
スクロールすると上からニョキッと降りてくるメニューjQuery
html <div class="downmenu"> メニューの内容(この枠が降りてくる) </div> jQuery var headNav = $("#downmenu"); $(wi...
続きを読む
-
2022/05/14 / javascript
マウス・マウスホイールで横スクロールするjavascript
jsに下記を記載 $(function() { function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i,...
続きを読む
-
2022/05/14 / javascript
横スクロール要素をマウスホイールで動かせるjavascript
jsに下記を記載 $(function () {$.fn.mycus_hScroll = function (amount) { amount = amount || 120; $(this).bind("DOMMouseSc...
続きを読む
-
2022/01/15 / javascript
jqueryとcssでタブ
html <p class="tab_btn active">タブ1</p> <p class="tab_btn">タブ2</p> <p class="tab_btn">タブ3</p> &...
続きを読む
-
2021/11/25 / javascript
特定の要素を持つ時にclassを付けるjQuery
元のHTML <div class="sample"> <div><p class="p1"></p></div> <div><p class="p2"></p></div> &...
続きを読む
-
2021/11/03 / javascript
スクロールして現れたらアニメーション（フェード等）開始jquery
js //表示されたら動く $(function() { $(window).scroll(function() { $(".fadeInUp1").each(function() { var scroll ...
続きを読む
-
2021/09/19 / javascript
MOREボタンで数件ずつ要素を表示wp
HTML <div class="bloglist"> <div>テキスト1</div> <div>テキスト2</div> <div>テキスト3</div> <div>テキスト4<...
続きを読む
-
2021/08/21 / javascript
slick 基本
ダウンロード http://kenwheeler.github.io/slick/ 使うデータ ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js ...
続きを読む
-
2021/07/06 / javascript
スクロールして表示するとフェードイン
通常 HTML <div class="animation">フェードインするコンテンツ</div> CSS /*アニメーション要素のスタイル*/ .animation{ opacity ...
続きを読む
-
2021/04/26 / javascript
スクロールして表示されたタイミングでアクションを起こすjs
手順1 scrollrevealをダウンロード scrollrevealをダウンロードhttps://github.com/jlmakes/scrollreveal 手順2 ScrollReveal.min.jsをhtmlに...
続きを読む
-
2020/08/23 / javascript
上からゆっくり降りてきてヘッダー固定
ヘッダーを固定 一定の高さまでスクロールすると、タグ「header」にclass="fixed"が付く 上からゆっくり降りてくる js $(window).on("load", function () { $(fun...
続きを読む
-
2020/07/04 / javascript
Enterキーを押すとinputが空欄になるのを防ぐ
フォームにonsubmit=”return false;”を追加 onsubmitはsubmitされたときに発生するイベントです。onsubmit=”return false;”でsubmitを中止する。 ...
続きを読む
-
2020/06/01 / javascript
jsでふわふわ縦に揺れる
jquery.yurayura.jsをダウンロードして、 「jquery.yurayura.js」で保存 jQuery( function( $ ) { $.fn.yurayura = function( config ) { ...
続きを読む
HOME > javascript
javascript
- マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら（あったら）jQuery
- スクロールすると上からニョキッと降りてくるメニューjQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション（フェード等）開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- 上からゆっくり降りてきてヘッダー固定
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript
