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

jquery ui tabの入れ子でうまく動かないとき

なんとなく使ってしまうjqueryプラグイン。

今回 ui tabを利用していて入れ子にする必要ができた。
想定したく見方をしてもうまく動かなかったので以下を注意する必要がありそう

$(function() {
  $( "#tabs" ).tabs();
});

こうして指定した要素の中のhrefをすべて参照しているぽく、モックサイトでhref=””みたいにブランクしておくとそこでエラーが発生する可能性が。

なので面倒だけど、指定した要素内のhrefはしっかり宛先を指定すればエラー発生の原因を一つ減らすことができそうでした。

結局使うことになる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) ; }
		}

こんど清書しよっと。