[jquery]超簡易なインライン要素のモーダルウィンドウ

せっかく作ったので一応載せておこう。
汎用性は…おそらく…ない…でしょう。^▽^;
IDとかclass割り振りとかそこまで組むのがいやだったので単純にnextで処理かけています。
なのでsampleブロックを複製すれば複数のモーダルが設置できます。

HTML

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

ぶっちゃけ、modal-inlineのdivはいらないっていう ^^;

CSS


.modal-cont {
	width: 50%;
	height:50%;
	margin: 0;
	background:#fff;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	margin-left:-50%;
	margin-top:-50%;
	text-align:center;
	border-radius:30px;
}

.overlay {
	display: block;
	position: fixed;
	top: 0 ;
	left: 0 ;
	cursor:pointer;
	width: 100% ;
	height: 100%;
	min-height:100%;
	background: rgba( 0,0,0, 0.75 ) ;
	zoom:1;
	z-index: 300;
	}

JS

jQuery(function($){
	$(".inline").on('click', function() {
		$("body").css("overflow","hidden");
		$(this).next().fadeIn("fast");
		$(".modal-cont").before("<div class=overlay></div>");
	});
	
	$(document).on("click",".overlay ", function() {
		$("body").css("overflow","visible");
		$(".modal").fadeOut("fast");
		$(".overlay").remove();
	});
  });

【jquery】beforeやappendで追加した要素でonclickイベントが実行しないとき

ちょっとカスタマイズが必要だったので自作モーダル作ってたら、DOM追加した要素のclickが効かないので格闘すること1時間…。
開発者ツールでもエラーが出ないのでめっちゃ悩みました。

$(".yoso").before("<div class=close></div>").append("<div class=photo></div>");

<div class="yoso">しょーりゃく</div>

こういう感じでdivの中に要素追加した場合、下記のコードでは動きません。
追加要素に対してはスルーされてしまうようです。

$(".close").on('click', function() {
//省略
});

なので、こっちで記述すると良い模様~。

$(document).on("click",".close", function() {
//省略
});

長かったぜい…。

参考:jQueryのappendで追加した要素のclickイベントが動かない場合
http://milkyshade.com/javascript/166/

WordPressでremove_filter('the_content', 'wpautop')とbrBrbrプラグインとの併用について

さて、前の記事で

タグを削除するというの書いたのですが、その後設定してページを見たところ…

姉さん…事件です!改行が効いていません!
まあ、これはプラグインのフィルターを強制的に削除しているため発生しちゃったわけです。
pタグは消したいんだけど、brはそのままがいいんです。

うーん、これは困ったって思ってググってみたところ、まあこちらも強制ですが対処があったので使わせていただくことにしました。
って、ことで前のremoveはスルー!スルー!
ようするに最初のpタグの出力をコメントアウトしちゃうってことですね。助かりました!

//$brbr="<p>\n".$brbr."</p>\n";

参考:brBrbrの「pタグ」のカスタマイズ
http://mimimin.net/brbrbr/

[wordpress]でpタグ除去(remove_filter('the_content', 'wpautop');)が効かない時

自分以外が作ったサイトとかって、自分では使わないプラグインが入ってる場合が多いので、、、

まんまとはまりました!ティクショー!

「brBrbr」プラグインが有効になっていると、remove_filter('the_content', 'wpautop');が効かない現象が発生しちゃいます。

探したら下記サイト様に助けられました。ありがたやー(-人-)
http://ameblo.jp/trapshooter/entry-11622880339.html

<?php remove_filter('the_content','brBrbr'); ?>
<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

これでいけるようです。面倒なのでsingle.phpにしてますが、function.phpでもたぶん同じ記述でいけるはずです。

【wordpress】chromeでwordpress管理画面のメニューが崩れるとき

Chrome 45 でWP管理画面のメニューが崩れる場合の応急対策
https://ja.forums.wordpress.org/topic/153237

現時点で、この問題の解決法には、2つの選択肢があります。(いずれか一方でOK)

1. https://github.com/raffjones/chrome-admin-menu-fix からプラグインを導入する。

2. Chrome側の設定を触るだけで、対処。(Daisuke Takahashiさんの紹介した方法)

Stackoverflowで交わされた議論では、Chrome にはSlimming Paint は以前から実装されているが、Chrome 45 から、slimming paintに不具合が生じてしまっているということです。(by zenjiweb) 結論として、WP側の問題ではないが、しばらくはパッチプラグインで対処しておくのがベストだろう。ということだそうです。

ってことなので、お客さんから突っ込まれる可能性を考えるとプラグインのほうがよさげ。

function.phpミスってんのかとちょっと不安でした^^;

追記で、githubからとなってますが、普通にWPプラグインページから「Chrome Admin Menu Fix」検索でインストールもできます。

[jQuery]twitterの横幅520px以上に指定を変えたいとき

なんていうか、知らなかったでござる。

【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す | Creator Clip http://creatorclip.info/2015/07/twitter-widget-max-width-520px

これ応用すればfacebookもいけるんじゃね?とか浅い考えです。はい。
iframeってドメイン違ったら操作できなるからfacebookは無理かの…

【sass】@forを使ってnth-childでカラー分け

極力htmlにクラスタグを追加せずに nth-childでループ文使ってカラーわけできればよいのにって考えて
phpだとfor文で変数(可変変数)持ってこれるのに、sassではそれができないからウボァーーー!!!ってなってました。

中々できなかったけどズバリなサンプルがあったのでメモメモ
やっぱりfor文苦手だわぁ

まず変数セット

$color1:#000;
$color2:#ccc;
$color3:red;

そんでfor文に定義した変数をセットでループさせればOK

			$colors: $color1, $color2, $color3;
			@for $i from 1 through length($colors) {
				li:nth-child(#{$i}){
					color:nth($colors, $i);
				}
			}for 

配列格納はこっちでもよいんだけど、sassで使いまわし前提なので変数定義のほうがよいかな?

			$colors: (#000,#ccc,red);

【sass】擬似セレクタの繰り返し処理

sass勉強中… 便利なところ、不便なところが入り混じっている^^;

    @for $i from 0 through 3 {
        li:nth-child(#{$i + 1}) {
            margin-bottom: #{50 * $i}px;
        }

擬似セレクタごとに50pxずつ足していくって感じ
forとかwhile とか、ループ文苦手…if文は好きだけど^^;