レスポンシブではみ出した要素の検出

助かったー
横スクロール はみ出し要素検出
http://netkansai.com/contents/index.php?id=57

function getwidth(){
'use strict';

const bodyElem = document.getElementsByTagName("body");
const bodyWidth = window.getComputedStyle(bodyElem[0],null).getPropertyValue("width"); // 縦スクロールバーの幅を含まない
const numBodyWidth = parseInt(bodyWidth);
console.log("body:",numBodyWidth);

const tags = document.querySelectorAll("*"); // すべての要素を取得する
for(let i=0; i < tags.length; i++){ let tagMargingLeft = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("margin-left")); let tagMarginRight = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("margin-right")); let tagPaddingLeft = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("padding-left")); let tagPaddingRight = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("padding-right")); let tagBorderLeft = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("border-left")); let tagBorderRight = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("border-right")); let tagWidth = parseInt(window.getComputedStyle(tags[i],null).getPropertyValue("width")); let tagBoxSizing = window.getComputedStyle(tags[i],null).getPropertyValue("box-sizing"); if(tagBoxSizing === "content-box"){ var sumWidth = tagMargingLeft + tagMarginRight + tagBorderLeft + tagBorderRight + tagPaddingLeft + tagPaddingRight + tagWidth; }else{ var sumWidth = tagMargingLeft + tagMarginRight + tagWidth; } if(numBodyWidth < sumWidth){ console.log(tags[i],":",sumWidth,); console.log("marginl-left:",tagMargingLeft); console.log("border-left:",tagBorderLeft); console.log("padding-left:",tagPaddingLeft); console.log("width:",tagWidth); console.log("padding-left:",tagPaddingRight); console.log("border-left:",tagBorderRight); console.log("marginl-left:",tagMarginRight); } // console.log(i,tags[i],":",sumWidth); } } window.addEventListener("load", getwidth, false);

【css】よく使うflexboxのひながた

sassの時はmixin登録してるからincludeで済むけど
sass導入してないときは忘れてしまう


	display: flex;
	flex-wrap: wrap;
	justify-content: $value;
	align-items:$value;

$value のとこは置き換える
sassのコードそのまま持ってくるっていう

bxsliderでサムネイル切り替えをhover(mouseover)で切り替える

久々の投稿だなぁ

Bxsliderのサムネイルクリックでの画像スライドをhoverで動かしたいというやつ。
trigger("click")使うと、サムネイルのリンクが作動しないので

こちらを参考に修正 このままだとリンクが動かないので on clickイベント追加で対応

https://stackoverflow.com/questions/28110510/bxslider-slider-hover-on-pager

	var bxslid =$('.bxslider').bxSlider({
		mode: 'fade',
		speed:500,
		auto: true,
		pager: true,
		pause:5000,
		autoHover: true,
		controls:false,
		infiniteLoop: true,
		pagerCustom: '#bx-pager',
		onSlideAfter: function(){
		bxslid.startAuto();
		}
	});

	$('#bx-pager a').on('mouseenter', function(){
		var newSlideNo = $(this).attr('data-slide-index');
		if(newSlideNo != bxslid.getCurrentSlide()){
				bxslid.goToSlide(newSlideNo);
		}
	});

	$(document).on("click","#bx-pager a",function(){
		var href = $(this).attr("href");
		location.href = href;
	});

macOS SierraにしたらKarabiner と Seil で設定したキーがきかなかった件

色々後回しにしていたxcodeのアプデをしようと思ったらsierraにアップしてね→sierraにアップしたら半角全角その他もろもろKarabinerとSeilで設定したキーが使えなくなっちゃてるよーってことで2時間ほど悪戦苦闘してなんとか解決しました

検索中「Karabiner-Elements」に移行するのはわかったんですがどうにも全角半角の英かな変換がうまくいかずで

[macOS Sierra で外付けキーボード設定ツール Karabiner と Seil が使えなくなった際の対処法]
http://qiita.com/kamoc/items/93550dd7f5bbae15e70f

を見てたんですが、半角全角部分入力ソースのくだりが全く設定できず・・・

どうしたもんかと思っていたら

下記設定ファイルを公開してくれているサイトを見つけたので早速インポート!
無事 半角全角ボタンで英字とかな切り替えができました!
作者さんありがとうございます(-人-)

[GimmickGeek ギミックギーク]Karabiner-Elements 全角半角キー対応 設定ファイル

使い慣れたショートカットが使えなくなるだけでかなりのストレスになりますね。
あとはひらがな入力したのをF7でカタカナ変換とかよく使うのでKarabiner-Elementsで設定して快適快適になりました
「Use all F1,F2,etc leys as standard function keys(「F1、F2などのすべてのキーを標準のファンクションキーとして設定」)」
これ前までmacの環境設定にあったはずなのに^^;

mac

スキームリンク

https://www.tcmobile.jp/dev_blog/programming/url%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%8B%E3%82%89%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E8%B5%B7%E5%8B%95%E3%83%BB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E7%84%A1%E3%81%91%E3%82%8C%E3%81%B0/

<a href="" onclick="fbl()">FB</a>

    function fbl() {
        if (
          navigator.userAgent.indexOf('iPhone') > 0
          || navigator.userAgent.indexOf('iPad') > 0
          || navigator.userAgent.indexOf('iPod') > 0
        )
        {
           document.location = "fb://profile/●●●●●●●●";
           var time = (new Date()).getTime();
           setTimeout(function(){
               var now = (new Date()).getTime();
 
               if((now-time)<400) {
                       document.location = "https://www.facebook.com/●●●●●●";
               }
           }, 300);
        }
        else if(navigator.userAgent.indexOf('Android') > 0)
        {
                        document.location = "intent://profile/●●●●●#Intent;scheme=fb;package=com.facebook.katana;end";
        }
 
    };


intent://★★★★★/●●●●●#Intent;scheme=○○○○;package=◆◆◆◆◆◆;end
fb://★★★★★/
twitter://★★★★★/

自分用

    <div id="page-preloader" class="">
      <div id="page-preloader-line-01"></div>
      <div id="page-preloader-line-02">
        <div class="line-a"></div>
        <div class="line-b"></div>
      </div>
    </div>

[Jquery]スクロールで連動する背景のアレ

サンプルとhtmlコードは気が向いたら追記しようかな
漁るのが面倒なのでjsコードだけ
別で使う過去のコード探してたら一緒に使ってたのでパララックスとか書いててなんかオシャンティなことしてるなと思ったらそうでも無かった。


$(window).on('scroll', function(e) {
  parallax();
});
 
function parallax(){
  var scrolled = $(window).scrollTop();
  $('#bgfrm').css('backgroundPositionY',-(scrolled*0.2)+'px');
}

[MAC]EI CAPITANでのローカルホスト接続

xammppも設定は間違ってなかったけどパーミッションエラーが出るので、
デフォルトのapache使うようにしたところ、同じエラーがでてなんやらショックを受けた今日。

xammppのフォルダにパーミッション付与がイマイチわからなかったので
下記を参考に再定義後、コマンドでsudo chmod -R 755 ~/Sites で治りました。
http://blog.looseknot.jp/mac/yosemite-localhost.html

コマンドライン嫌いだぁ

etc