熊本のウェブ制作会社のエンジニアのググる生活

地方のウェブ制作会社(元:佐賀・今:熊本)で働く、エンジニア。
HTML、CSS、JavaScript、PHP、Smary、Twig、EC-CUBE、WordPress、Movable Type 等でお仕事してます。
ググって解決した話や、自分で考えて分かったことなどを、自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

カテゴリ: JS

超軽量で単体で動作する素敵なスライダースクリプト siema
https://pawelgrzybek.github.io/siema/
というのを気に入ってて、最近頻繁に使用させていただいてます。

普通に使う分にはとてもいいんですが、
ひとつ困ったことに、Aタグを内包している場合、ドラッグでスライドするとリンクが発火してしまうことがあります;

issues でも議題に上がっていて、調整されておられます。
https://github.com/pawelgrzybek/siema/issues/71

サンプルを見ると、確かに対応が効いています。
が、Aタグの中に、imgタグが入っていると、それでもリンクが発生してしまいます ><;
↓のようなケース
<div class="siema">
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
</div>


最初は JS 側での制御を考えましたが、
これがなかなか難しく、最後は諦めたのですが、、、。

img のマウスイベントを失くしてしまえば良いのでは?
と思い、↓のような CSS を当ててみたところ
.siema a img {
    pointer-events: none;
}


うまくいきました!👌

サイドバーを追従(固定)させるjqueryプラグイン「fitSidebar」を使用しています。
最近では css の position: sticky; だけで固定にすることができますが、 縦長の場合は見切れてしまい、下の方にあるコンテンツがいちばん最後までスクロールしないと見れない問題があり、ちょっと気になります。
fitSidebar だとスクロールに合わせてコンテンツも移動するので大変便利です。
それぞれ用途に合わせて使い分けています。

そこで fitSidebar を使っていて、更にヘッダーも固定の場合、 ページの下に行って、上に戻るときに、サイドバーの頭が見切れてしまう問題にぶつかりましたので、 余白を設けるカスタマイズを行ってみました。

サンプル(jquery-plugin-fitSidebar-headerfixed-top-margin.html)

メモメモ

if (typeof $.fn.プラグイン名 === 'function') {
  // ~プラグインが読み込まれていた場合の処理~
}

※バージョン 1 ですm(_ _)m

簡単なオプション指定で、
カルーセルにもスライダーにもなれる
高機能で使いやすい Owl Carousel ですが、
Owl を指定した子要素のすべてに発火するようになっているので、
少し変えてみました。

noscript に反応してほしくなかっただけですが、
普段使う要素だけに絞った方が良い気がしたので、
下記の様に変更しました。

$elem.children()

↓↓↓↓↓

$elem.children('a, p, li, img, div')

エディタの置き換えで一発OKでした。


ミニファイに変換は恐らく下記のGoogleお手製を使用されてるみたいで、
(変換後のコードが似ていたので多分そうかなと…)
こちらもsimpleモードなら大丈夫でした。ライセンスコメントをお忘れなく!

http://closure-compiler.appspot.com/home

でぶててのWEB録さんの記事で公開されているスプレッドシートの入力を
一括・自動で処理したく、ブックマークレットを作りました。

Google Analytics オーガニック検索ソース 自動登録ブックマークレット

ie6で背景画像のpng透過の為に

DD_belatedPNG.fixを導入したところ、
指定しているclassも間違っていないはずなのに、透過にならない場所が・・・。

あれやこれや消して検証しているとcssの「!important」がjsの動きを邪魔しているのを発見。


無事透過できました!



DD_belatedPNG.fix
本家 導入参考

このページのトップヘ