月別: 2016年3月

ScrollReveal.jsって楽しいよねー

Posted on 2016-03-21

ScrollReveal 使うと楽しいよねー。

作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。

height auto でも transitionさせたい

Posted on

height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。

冷静に探したらありましたですよ。
CSS3 transition height 0 to auto

max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
（※詳しくはよく知らない）

だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。

当たり前のとこでハマるjQuery

Posted on 2016-03-20

blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。

検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓


$('a[href^=#]').click(function() {

$('a[href^=#]').click(function() {

こうが正しい↓


$('a[href^="#"]').on('click',function(){

$('a[href^="#"]').on('click',function(){

ドロワーメニューfixedでヘッダーもfixedなとき

Posted on 2016-03-09

Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー

IE9対応でwindow.matchMediaが使えない時

Posted on 2016-03-07

完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので

まあ下記のようなイメージで


$(function() {
  $(window).on('load resize', function(){
    if ( $('#mdContent').is(':visible') ) {
      console.log('md');
    } else if ( $('#smContent').is(':visible') ){
      console.log('sm');
    } else if ( $('#xsContent').is(':visible') ){
      console.log('xs');
    }
  });
});

$(function() {

$(window).on('load resize', function(){

if ( $('#mdContent').is(':visible') ) {

console.log('md');

} else if ( $('#smContent').is(':visible') ){

console.log('sm');

} else if ( $('#xsContent').is(':visible') ){

console.log('xs');

}

});

しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変