2016年01月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

レスポンシブで動的に高さ変更したときの解除

レスポンシブでの要素の高さ変更などは、普通はcssで行うよね?

pcではheader{height:90px}

で、

spではheader{height:200px}のように。 


でもspではメニューが上からズルっと降りてきたりして、その際に、hightが動的に書き換える処理になったりする。

var winH = $(window).height();
$('height').height(winH);

のように。


すると、html側では、headerにstyle属性がつく。


その状態でウィンドウサイズをpcに戻したりすると、cssで指定したheight{90px}よりもstyleで書かれた動的な高さが適用されてしまう。

そういう場合にどうしたらいいのかなって考えてたんだけど、

いったん今のところの解決は、

pcになったらstyleをカラにしちゃうってことかな。と。


if(winsize > hogehoge){ // pcになったら
$('header').attr('style','');
}


って感じで。


※removeAttr()なるjQueryメソッドもあるらしいんだけどこれをやると、今度はsp側で動的に変更ができなくなるので使えなかった。
 

codekitでjsをmin化させない設定

codekitとう便利なツールがある。
よく使うのだけど、初期設定だと、jsファイルをいじるたびにmin化されたファイルが自動的に吐き出されて、うっとおしい時がある。

クライアントによってはjsをmin化しないでほしいという要望も多いからね
(というかそういうのがほとんど。)

min化させない設定のメモ。

①まず設定変更したいプロジェクトを選択して右クリックで「Edit project setting」
②LanguagesのなかのJavascriptを選択
③Outputstyleを「Non-minified」にする。

これでOK.

ついでに 

check Syntax With を「Nothing」にしておけば、作成中に余計なバリデータが起動しないので静かにコーディングできる。

 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ