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

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");

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

liやDivで並べた要素を表示のたびにランダムRandomで並び換えをしたいとき

都度調べては忘れるので備忘録として書いておく。

JQueryなどで特定の要素内の子要素を並び換えしたいときに簡単に実装可能。

var ar = $('#親要素').children();
ar.sort(function(){
return Math.random()-Math.random();
});
for(i=0; i < ar.length; i++) {
$('#親要素').html(ar)
}

これで並び換え完了。のはず。

レスポンシブサイトでメニューをまとめる時にナビとかが複数あってどうしような時

あります。

GlovalNaviだけまとめるメニューのプラグインは良く見かけるが、サイト内ではグロナビに加えてSNSのナビだったり、ログインのナビが独立して複数存在することは多々ある。

で、ようやく昔見つけていたサイトを再発見。

Drower Slider MenuってJs
http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/drawer-slide-menu/

使い方は以下を参考にさせていただきました。

http://www.redman-m.com/wp-dr/

jqueryドロワーメニューはDrawer Slide Menuがいいかも。facebookみたいな左スライドインメニューの作り方【デモあり】

 

2015/03/18追記
とても参考になるまとめページが。
http://webdesignmagazine.net/javascript/drawer/

行ごとにdivやらliの高さを揃えたい。でもカラム数は変わる

jqueryAutoHeightなどは、カラム数を指定しないと行ごとに高さを揃えることが出来なかった。

ただ案件によっては文字数によってカラム数変わるけど行ごとに高さ変えたいって場合もあります。

自作しようと思いましたが、自分のスキルでは実現できず。。
ということでグーグル先生にお尋ね。

すぐにいくつか発見できました。
以下、参考にさせていただいたサイトです。

http://black-flag.net/jquery/20140610-5206.html

http://mach3.github.io/jquery-lineup/
今回はこっちを使用させていただきました。

勉強になるなぁ。。。

jquery.easing.jsが急にエラーを吐いたら

静的にHTMLを組んで、いざWPなどのCMSに突っ込むぞと改造をしてアップ。
あれ、JSが動かない。Pagetopとか動くのに、一部うごかない。

エラーの原因を探ると「 jQuery.easing[jQuery.easing.def] is not a function」ってかんじのエラー。
easing.jsが悪さしてるようです、

原因良く分からずにggる。

するとこんな投稿発見。
https://twitter.com/woodroots/status/328463383408021505

指示の通りに

$(function(){
・・・・・・
});

でかこってみる。

問題解決!よし。