WEB Archives - 何か。

ウィンドウの高さを取得後に要素へ代入する

2018年3月18日 by nanika

よく使うメモ。スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。 [cra … 続きを読む

ウィンドウサイズで画像の表示をJavascriptで切り替える

2018年5月5日2018年3月14日 by nanika

最近よく利用するのでメモがてら。以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。

$(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);
    });
});

$(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);

});

画像にはファイル名の後ろに _ … 続きを読む

フルスクリーン表示からスクロール後にナビなど表示させたい場合のTip

2018年3月14日 by nanika

ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。

$(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();
        }
    });
});

$(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();

}

});

スクリプトは主にスマートフォンサイトを想定しています … 続きを読む

Slick.js スマートフォン表示時だけ適応させたい。

2018年5月5日2018年2月8日 by nanika

丁度使う機会があったのでメモ。

Advanced Custom Fieldsで設定したカスタムフィールド値を取得し、文字数制限して表示する

2018年3月14日2017年8月24日 by nanika

よく使う物なのでメモがてら。下記は30文字以内であればそのまま出力、30文字超えている場合に29文字にカットし、文末に[…]を追加します。

<?php
if(mb_strlen(get_field('フィールド名'))>30) { $hoge= mb_substr(get_field('フィールド名'),0,29) ; echo $hoge. … ;}
else {echo get_field('フィールド名');}
?>

<?php

if(mb_strlen(get_field('フィールド名'))>30) { $hoge= mb_substr(get_field('フィールド名'),0,29) ; echo $hoge. … ;}

else {echo get_field('フィールド名');}

都道府県一覧（座標・ズーム値つき）

2018年5月5日2017年8月21日 by nanika

使用する機会があり、再度やろうとするとダルいのでメモ

Pinterestでサイトにある画像をPinさせない方法

2017年4月13日2017年4月13日 by nanika

Pinterestのアドオン入れてて、画像hoverすると出てくるあのアイコン。偶に邪魔だと感じていたが表示させない方法が有ったのでメモ。

<meta name="pinterest" content="nopin" />

1	<meta name="pinterest" content="nopin" />

特定の画像に … 続きを読む

packerで圧縮されたJavaScriptを元に戻す

2017年4月13日2017年4月5日 by nanika

防備録 http://blog.shimazu.org/utils/packer_decoder.html 元に戻すだけだとインデントの無い読みづらいコードになっているので、以下併用して整形させると良い。 http:/ … 続きを読む

個人的使いやすいパララックス『Scrolly』

2017年4月13日2017年3月29日 by nanika

設置方法などはまた後日 https://github.com/Victa/scrolly DEMO http://lab.victorcoulon.fr/javascript/scrolly/

iPhoneやAndroid以外で閲覧した場合に電話番号リンクを無効にする

2018年5月5日2017年3月27日 by nanika