カテゴリー別アーカイブ: JS

結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

colorboxでmodalが開くときに画面幅より一度大きい状態からフィットする現象

サイトのつくりの影響かもしれないが、画面を大幅に超える大きさで表示された後にぴったりとアニメーションで調整される現象がおこった。

 $(".inline").colorbox({
inline:true,
width:"90%",
maxWidth:1020,
rel:'group',
closeButton:false
});

スマホのときは画面幅の90%でPCなどの時は1020くらいを最大にしてよっていう書き方、

色々微調整してもうまくいかなかったので、以下のように逃げました。

$(".inline").colorbox({
inline:true,
maxWidth:"90%",
rel:'group',
closeButton:false
});
.modal-content {
  max-width: 1020px;
}

とりあえずこれで回避。
原因はなんだったのだろうか。

animation GIFをJSで動的に読み込む 一度消して再度読み込むと最終形で表示されてしまう

サーバー側の仕様のようで、キャッシュ?がのこってしまうため一度 empty()で空にして、再度動的に追加しても最後のフレームになってしまう。
それをさけるために読み込むときに***.gif?=日付 という感じでタイムスタンプを入れればいける。

CSS3のTransitionとAnimationのメリットデメリットって

これのエントリーの前に書いているAnimation。
使いやすいけど弱点をすごく感じた。

それはスクロールに合わせてClassを追加したり削除したりするときの挙動。

Animationはアニメが0%~100%の間で細かい指定が出来るので凝ったアニメが実現出来る。
が、いざそのアニメーションが関連付けされたClassを削除すると一気に元の状態に戻ってしまう。

簡単な例としてOpacityを0⇔1にしたくても0から1はAnimationが効くが、Classが外された際に一気に0つまりパっと消えてしまう。

その点TransitionはClassが付与されたとき、削除されたときに指定したアニメーションを行き来してくれるのでそう行ったことが起こらない。

あまり検証していない上でのインプレッションでした。

レスポンシブサイトでイメージマップ(imgmap)を利用するときにrwdImageMaps.jsを使うけど

jquery.rwdImageMaps.min.jsお世話になってみました。

これで後のレスポンシブサイトの大きな問題はTableだけなんじゃないかとか、そうじゃないとか。

ただ、こちらのJs利用する上で小さな落とし穴にはまりました。
レスポンシブコーディングをDreamweaver上で行っていると、プレビュー自体もレスポンシブに画像が伸びる。

自分がやりやすい環境で作業していると画像の本当のサイズじゃない状態になっていることが殆どですが、そこを意識せずにイメージマップを作成して上記Jsを利用すると、あれ!?!?ズレてるし!つかえねぇし!ってなる。

恐らくJsの仕組みとして本当の画像サイズに対して、自分で設定したイメージマップをがっちゃんこしちゃうのでプレビュー状態だと画像サイズが嘘×イメージマップはその見た目のまま正解として判断されるため。

なので面倒だけど、画像のサイズをとりあえず本当のサイズに指定した状態でイメージマップを作る必要がありそうです。

position:absolute;で設定していた要素をある地点までスクロールしたらposition:fixed;に変更する。けど動きおかしい

なかなかやることが無さそうなシチュエーション。

最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。

スクロールの判定はJsでやる。
ちなみに今回はサイトの構成上、root直下に該当要素を設置。
まるでちょうどとあるコンテンツの下にあるように見せかけるためJsで初期位置を設定。

コツはJsで直接位置を調整するのではなく、Classの付与でCSS側でコントロール。

初期設定

position:absolute;
left:50%;
width:(93/640)*100%;
margin-left:-(93/640/2)*100%;
height:auto;
z-index:100;

Class付与

.scroll{
position:fixed;
top:0% !important;
animation: page_center 0.2s linear 1;
-webkit-animation: page_center 0.2s linear 1;
animation-fill-mode: forwards; 
height:100%;
}
		@keyframes page_center {
			0% { transform: translate(0, 0); }
			100% { transform: translate(0, 40%) ; }
		}

スクロールを上に戻したときにもClassを付与

		.scrollback{
			position:absolute;
			
			animation: page_top 0.2s linear 1;
			-webkit-animation: page_top 0.2s linear 1;
			animation-fill-mode: forwards; 
			height:100%;
		}
		@keyframes page_top {
			0% { transform: translate(0, 150px); }
			100% { transform: translate(0, 0px) ; }
		}

こんど清書しよっと。

slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる

スライドショーの定番Slick.js、とてもよく活用させていただいている。

普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像(コンテンツ)が上手く表示されない。

ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。

公式サイトのこれか?っていう部分をはめ込んでみたらうまく動いた。
あっているのかは分からない。

$('.your-element').slick('setPosition');

と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。
http://www.codelab.jp/blog/?p=852
と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてしまった。ので参考サイトをちょっと改造して

var slick = $(‘#slider’).slick({初期化パラメータ});

ここは同じ
なにかしらのボタンをクリックしたら・・・

slick.slick('setPosition');

これで動いた。

jqueryで親セレクタ(親要素)を指定する時に相対パス的な書き方だと面倒

今まであまり考えてこなかった問題。

頭の中で組んで、一発でコーディング出来る時はあまり問題になってこなかったけども、動きを検証しながらHTMLを加筆したりすると起きる問題。

ある指定したボタンなど(.btn)をクリックしたら、その親要素(.parent)に.addを付ける的な。

<div class="parent">
<div class="block">
 <div class="btn">CLICK</div>
</div>
</div>

上記のようなサンプルだとしたら

$(".btn").parent().parent().addClass("add");

これでも動く。

でも、たとえば.blockの中にもう一つDIVを噛ませてしまうと、上記のコードでは.blockに対して.addがついてしまう。

なので、そういう場合は指定した要素の一番親要素という風な指定をしちゃえばOK

 

$(".btn").parents(".parent").addClass("add");もしくは
$(".btn").closest(".parent").addClass("add");

相対ルートパス的な考え方かな。