jQuery｜ぼうびろく

26 April

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

23 June

アンカーリンクのズレ　jquery

有り難いコードをコピペする　例１
https://atelier-light.com/blog/anchor_positioning/#toc3

jQuery(function () {

var headerHight = 100;

$('a[href^="#"]').click(function () {

var href = $(this).attr("href");

var target = $(href == "#" || href == "" ? "html" : href);

var position = target.offset().top - headerHight;

$("html, body").animate({ scrollTop: position }, 550, "swing");

return false;

});

有り難いコードをコピペする　例２
https://dezanari.com/jquery-anchor-header-fixed/

$(window).on('load', function() {

let headerHeight = $('.l-header').outerHeight();

let urlHash = location.hash;

if (urlHash) {

let position = $(urlHash).offset().top - headerHeight;

$('html, body').animate({ scrollTop: position }, 0);

}

});

24 July

動画ポップアップ　一番簡単Lity

https://sorgalla.com/lity/

youtubeポップアップはよくあるが、FTPにアップしたmp4とかのWPプラグインがすぐに出てこない
このLityは画像や動画などを指定すること無く勝手に判別してくれるみたいで
すごくかんたん

27 April

ありがたいコード
https://nodoame.net/archives/8610
https://lightning-bolt.xyz/js/jquery.tgScrollAndFixedNav/

スクロールしたときにガクッとするのがないです
するコードもある
position:stikyが超便利じゃん！IE無視していい今こそ使おう！と思って使ってみたが
なんかそんな機能あるね、程度で使いにくかった

１、stikyを囲ってる枠のどこかにoverflow:hiddenがあったら使えない
これくそすぎ。bodyやhtmlにすでについてるThemeとかあるじゃん
私はなんでもかんでもは使わないようにしてるけど、はみ出たときに対処法がわからんかったら
最終手段でoverflow:hidden使うとかある

２、追尾している間にという条件分岐がない
スクロールしてるときにヘッダーの形を変えたいとかある
コンパクトに成形するとか
だが一番topならスクロールしてるときの条件でいいけど、途中から追尾なら無理
なんかめんどくせーコードを自分で書かなきゃいけない
ならもstikyつかわねーよってなる

09 April

imgタグのsvgをcssで変更できるようにするjquery

ありがたい解説サイト

https://pgmemo.tokyo/data/archives/1025.html
ーーーーーーーーーーーーーーーーー

window.addEventListener('load', function(){

deSVG('.desvg', true);

});

</script>

<img class="desvg" src="◯◯◯.svg">

22 August

要素をフィルター　ソートするプラグインckFilter.js

ckFilter.js　日本語解説
https://voyager-jp.com/blog/jquery/ckfilter/
DLページ
https://www.jqueryscript.net/other/Filter-Plugin-jQuery-ckFilter.html

単体フィルター/複数カテゴリー持ち
自分が求めてるものがなくやっとみつけたもの
Githubページが404…どっかの海外のページでデータがあってDLできた
これがなかったらおわってた。なんのサイトかわかんないけど窓の杜っぽいやつなのか？
ちゃんと動いた
私でも設置出来たということは難しくないということ

だいたい10分で実装できる！CSS3とjQueryで絞り込みアニメーション作ってみた
https://www.webprofessional.jp/building-a-filtering-component-with-css-animations-jquery/

昔別件で上記を使用した
「単体フィルター/単体カテゴリー持ち」ならこちらでいいんじゃないだろうか
しかし今回「複数要素持ち」であったため、改造もできない私には使えなかった

shuffle.js
https://vestride.github.io/Shuffle/

複数フィルター/複数カテゴリー持ち

検索してるとでてくるのがこれ。
おお！これこれ。と思ってzipをDLしてみると、index.htmlを開くとプログラムコードがそのままでてきた。あれ、なんで、これってプログラムのやつなのか…
公式ページをみてもよくあるファイル設置のコードとかがない

「Install」とか書いてあって
コマンドプロンプトみたいのでInstallするもうサーバー屋がやるみたいなやつなの？これは。
まじむり。Codepenのもよくわかんねーし
検索しても古い記事ばかり。古い時期のはjsを配ってたっぽい？
今じゃ使用方法が違うかも知んないし複数要素じゃないっぽい
これが使えないとかつまづいてどうしようと必死で検索して「ckFilter.js」を探し当てるが
これも元が死んでるっぽくて何なんだよ
フィルター使った分け方がはやんねーってことか

あとプラグイン名でよくあるけど超一般的単語単体で名称つけるのやめてほしい
余計な検索結果がまじりまくって探せない