よく使うメモ。
スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function(){ // 画面の高さを取得して、変数wHに代入 var wH = $(window).height(); // .hoge の高さを取得を取得して、変数divHに代入 var divH = $('.hoge').innerHeight(); // ボックス要素より画面サイズが大きければ実行 if(wH > divH){ //.hoge に高さを代入 $('.hoge').css('height',wH+'px'); } }); |
最近よく利用するのでメモがてら。
以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function() { var $elem = $('.js-resp'); var sp = '_sp.'; var pc = '_pc.'; var replaceWidth = 768; function imgResp() { var windowWidth = parseInt($(window).width()); $elem.each(function() { var $this = $(this); if(windowWidth >= replaceWidth) { $this.attr('src', $this.attr('src').replace(sp, pc)); } else { $this.attr('src', $this.attr('src').replace(pc, sp)); } }); } imgResp(); var resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { imgResp(); }, 200); }); }); |
画像にはファイル名の後ろに _pc と _sp と命名すればOK、HTMLに記述する場合には _pc の方のみを記述してください。
|
1 |
<img src="./assets/img/hoge_pc.jpg" class="js-resp" alt=""> |
要件に応じて命名やウィンドウサイズは適宜変更してくださいね。
ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function() { // 対象コンテンツのIDまたはクラス var topHeader = $('.hoge'); // 要素は消しておく topHeader.hide(); $(window).scroll(function () { // 画面の高さを取得 var windowHeight = $(window).height(); // スクロール位置を取得 var scroll = $(window).scrollTop(); // スクロール位置を取得 if (scroll >= windowHeight) { // フルスクリーン分スクロールされた処理 topHeader.fadeIn(); } else { // フルスクリーン分スクロールされてない処理 topHeader.fadeOut(); } }); }); |
スクリプトは主にスマートフォンサイトを想定していますが、PC表示でも問題は無いはず。
用途に応じて適宜調整すれば良いと思います。
更に、トップページだけに適応したいという場合にはBodyに「.topPage」などクラスを指定し、以下のように条件分岐を追加でも良いと思います。
|
1 2 3 |
if($(".topPage").length){ // 処理内容 } |
jQueryの length は要素が存在するかどうかをチェックするのにも使え「.topPage」というセレクタがページに存在する時にのみ、処理を実行します。
丁度使う機会があったのでメモ。
よく使う物なのでメモがてら。
下記は30文字以内であればそのまま出力、30文字超えている場合に29文字にカットし、文末に[…]を追加します。
|
1 2 3 4 |
<?php if(mb_strlen(get_field('フィールド名'))>30) { $hoge= mb_substr(get_field('フィールド名'),0,29) ; echo $hoge. … ;} else {echo get_field('フィールド名');} ?> |
使用する機会があり、再度やろうとするとダルいのでメモ
Pinterestのアドオン入れてて、画像hoverすると出てくるあのアイコン。
偶に邪魔だと感じていたが表示させない方法が有ったのでメモ。
|
1 |
<meta name="pinterest" content="nopin" /> |
特定の画像に対しては以下
|
1 |
<img src="hoge.jpg" nopin="nopin" /> |
基本的に記述してて良いような気もする。
この辺は案件に応じて対応で良いかと思い〼。
Via: 自分のWEBサイトにある画像を他人に共有させない方法 | Pinterest lab ～UNT ソーシャルメディアマーケティング～
防備録
http://blog.shimazu.org/utils/packer_decoder.html
元に戻すだけだとインデントの無い読みづらいコードになっているので、
以下併用して整形させると良い。