忍者ブログ
17 May

スムーズスクロールとモーダルウィンドウのアンカーリンクによる干渉

アンカーリンクでとばすモーダルウィンドウを使ったら、モーダルが開かない。
おかしい、と思いググったら、スムーズスクロールと干渉するらしい。
どっちもアンカーリンクでとばしてるので、干渉してモーダルが開かなくなる。
なんやかんややって、モーダルjsを切ってるのに超簡単な手書きスムーズスクロールまで動かなくなった。別の簡単なコード拾ってきて色々いれてもまったくスムーズしてくれない。
今回はjsいれまくってるので何が原因かゼンゼンわかんねー。
jqueryわかんないので、この場合は無効！とか書けないし･･･。

jsプラグインはあまりいれたくないけど、特定のリンクはスムーズさせない機能があるsmoothScroll.jsを試すことにした。

http://blog.webcreativepark.net/2007/07/12-143406.html
http://blog.livedoor.jp/tacshock-code14/archives/7502921.html

いれてみたらsmoothScroll.jsが動く！ぬるぬるっと動く！なんでだよ。
簡単コードは動かずこれが動くって意味わかんねーよ。
そんでスムーズスクロール無効機能

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

を入れたらモーダル開いた！！やったー；；；
date属性じゃなくてclassでも指定できるけど、書き換えなきゃいけなくてもうめんどくせーっておもってやめた。date属性は文字数長いから本当はやだけど･･･。

いまやナビゲーションメニューでスムーズスクロール入れるのってほぼ当たり前でしょう。
私はどうでもいいんだけど、なんかいれたがるからさ･･･。
そうするとそこにタブ機能やモーダルウィンドウ使ってアンカーリンクで飛ばすと、バッティングする可能性はかなり高いわけだと思う。
それなのにあんまり検索してもでてこないのはなぜ？
でも私も初めてこの現象になったわけだから、そうメジャーでもないのかなあ？

つまりスムーズスクロールの設定には無効機能が必須だと思うんだよ。
こういうことが普通にありえる干渉なわけだし。

smoothScroll.jsの欠点はサイドメニューを開く閉じる、などのボタンのアンカーリンクにも全部無効機能を書き込まなきゃいけないこと。
メニュー隠しててクリックで表示ってやってたら、確実に意図せずぬるぬる動きまくる。
PR
16 May

可変グリッド　並べる　異なるサイズ　box　Masonry.js

http://allabout.co.jp/gm/gc/402549/

西さんの説明はいつもちょーーわかりやすい！！
西さんが書いてくれるものは自分で考えることなくコピペでいけるレベル
頭にすんなり入ってくる

"columnWidth":

↑書かなくてもいけるってかいてあったけど、ぴっちり配列させたいときは指定しないとダメだった。
一番小さいboxのサイズに合わせたwidthをかく。
複数の横幅boxサイズがある場合は、クラスをつけてcssでわけるか、挿入imgにwidth heightをちゃんと指定する。
08 May

turn.js

このコードをいれたらできました
http://isoden.me/2014/08/30/turnjs/

表紙無しで最初から2ページ見開きで表示したい
$('#selector').turn({
page: 2,
when: {
start: function(event, pageObject, corner) {
if (pageObject.next==1)
event.preventDefault();
},
turning: function(event, page, view) {
if (page==1)
event.preventDefault();
}
}
});
08 May

画面いっぱいに可変の高さのあるboxを設置したい　css

http://ginpen.com/2011/07/01/height-100-parcent/

<html>
<body>

<div class="親2">
<div class="親1">
<div class="画面いっぱい可変したいbox">
ああああああああああ
</div>
</div>
</div>

</body>
</html>

この場合、全てのbox要素にheight:100%;をつける。
もし親3が登場した場合には、親3にもつける。
つまり画面いっぱい可変したいboxから<html>まで、すべての囲んでる要素につけなければいけない。ひとつでも抜けたらダメ。

.画面いっぱい可変したいbox,
.親1,
.親2,
.body,
.html{
              height:100%;
}


08 May

WPに動画を埋め込む　MediaElement.js

https://wordpress.org/plugins/media-element-html5-video-and-audio-player/

管理画面で新規検索してもなぜかでてこないので、直接DLしにいく。
2年更新ありません、とでてひるむがこれ以外に簡単にできるやつがないのでしょうがない
http://techmemo.biz/wordpress/html5-video-mediaelementjs/

投稿欄にショートコードを埋め込む

[video src="http://*********.com/***.mp4" width="640" height="360" poster="http://*****.com/サムネイル.jpg"]

動画を変換する　Any video converter
http://www.anvsoft.jp/any-video-converter-free.html

でかい動画で拡張子がmovとか渡された。変換する必要がある。
.mp4 H-265　みたいなやつに変換する
スナップショットとったけど真っ暗にしかならない。つかえねえ
自分で動画アップするときはサムネがないので、サムネ画像を作らなければならない。
スクリーンショットとって適当に切る。

.mp4　H-265　みたいなの1本あれば、全ブラウザ対応で再生される。チョウらく！

最初WPのプラグインあるのしらなくて、自分でjsいれたりしようとしてたけど、いれたり設定だったり多すぎてゼンゼンできなかった。プラグインいれたら設定とか別になんもいらねーよ状態でてきた。youtubeでいいよもう・・