Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

WordPressを4.5.2にアップデートしたら同梱のjQuery1.12で構文エラー祭り

No Comment wordpress,

WordPressがXSS,SOME(Same Origin Method Execution)脆弱性に対するアップデートを4.5.2で行った事を受けて、管理サイトを全てアップデートしていったのだが、この4.5.2に同梱されているjQueryが1.12になった事でエラーチェックが厳密になり、今まで動作してくれていたページ内遷移やYoutubeAPIなどが動作しなくなって困った。


(function($){

$(function() {
$('a[href^="#"]:not([href$="#"])').click(function() {
var href = $(this).attr('href');
var pos = $(href).offset().top;
var duration = 200;
$('body, html').animate({ scrollTop: pos }, duration, 'swing');
return false;
});
});

})(jQuery);

jQuery1.2以降で動作するスムーズスクロール。
出典はXakuro Systemさま
ありがとうございます。
エラーの詳細はリンク先を。

さて、ここからが本題。

上記スクリプトではページ内遷移出来ないケースがいくつかあった。
まぁ自分が悪いのだが、一応備忘録。

■ページ内遷移でドメインを入れている

例) http://mysite.com の中で、ページ内リンクを http://mysite.com#page-link などドメインを付けてリンクしていた場合、1.12では動かない。

■リンクhtmlに半角スペースを入れてしまっていた

例)

<a href=" page-link ">

phpの記述が不味く、リンクタグの属性内に半角スペースが入ってしまっていた場合、1.12では動かない。

javascriptと正規表現はホント苦手…。

bxSliderの画像には幅と高さを指定するのを忘れるな

No Comment html,css,php

自分用メモ。

bxSliderを導入する時は各画像にwidth,heightを指定しないと、Google Chromeで表示順がずれる不具合が起きる。
忘れるな!

参考サイト

http://blog.73web.net/?p=507

bxSliderでカルーセルを横幅一杯にした時、Chromeでチラつく件

No Comment サイト製作,駄日記,

カルーセルを画面横一杯にするカスタマイズ方法がいろんなサイトで紹介されていて嬉しい限り。
良く使うからね。

http://coolwebwindow.com/jquery-lab/archives/514

ただ、この機能を実装した時、Google Chromeでは何故かスライダーの最後の画像→最初の画像に戻る時に一瞬チラつく。
これが非常に気になったので設定を色々見直していたところ、

useCSS:false

を設定する事で回避できた。

原因は

Mac SafariでbxSliderが動作しているページを見ると文字がチラつく問題に対する考察と対策。

こちらの「解決法および原因考察」にありそう。
(falseにしたらGPUでなくjsで動かすことになるからパフォーマンスは落ちるみたいね)

WP-Cycleで透過画像をフェードさせたいのにIE8以下では透過出来てない件を解決する

No Comment wordpress,

とても便利なスライダープラグインWP-Cycleですが、IE8以下ではpng画像が透過しません。(ver.0.1.13現在)

■解決策■

外人さんが頑張ってくれてます。

こちらで、
「wp-cycle.phpの438から446行を書き換えればいいのさHAHA」
と書かれてます。
具体的には以下。

jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
pause: 1,
fit: 1
});
});

を、

jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
cleartypeNoBg: true
});
});

に書き換え。具体的には最後の2項目「pause: 1,fit: 1」を「cleartypeNoBg: true」に置き換えたらOK。

※最終Updateが去年の8月だけど、もしアップデートしたらこの部分を再度修正しないといけない。

これで背景は透過したかに見えたんだけど、今度はフェードの時に透過画像の縁にへんな黒いノイズがのってしまう。

なので今度はVIVID Labs.さんから知恵を拝借、IE用のフィルタ・AlphaImageLoaderを使用して回避する。

<!--[if lte IE 8 ]>
<script language="javascript">
jQuery(function() {
if(navigator.userAgent.indexOf("MSIE") != -1) {
jQuery('img').each(function() {
if(jQuery(this).attr('src').indexOf('.png') != -1) {
jQuery(this).css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
jQuery(this).attr('src') +
'", sizingMethod="scale");'
});
}
});
}
});
</script>
<![endif]-->

WP-Cycleのタグ直後にでも、「IE8以下だったらこのフィルタをpng画像に適用する」と指定。
wordpressなので$をjQueryに変更しています。

これでIEでも(多少ジャギるけど)透過でフェード表示させることが出来ました。

bxsliderで一瞬二枚目以降の画像が表示されてしまい恥ずかしい思いをする時には

1 Comment html,css,php,

画像をスライドさせるjQueryスライダー「bxslider」。画面サイズに合わせて拡大縮小機能もついているので、非常に便利で私もよく使っております。

ただ横幅一杯に使う場合はどうしても画像が大きくなりがちで、その場合ページの読み込みに時間がかかり、一瞬2枚目以降の画像が表示されてしまうことがあります。

これを簡単に解決するためは、jQueryで2枚目以降の画像を表示する時間を遅らせます。

html

<ul class="bxslider">
	<li><img id="img1" src="http://test.com/test1.jpg" /></li>
	<li><img id="img2" src="http://test.com/test2.jpg" /></li>
	<li><img id="img3" src="http://test.com/test3.jpg" /></li>
</ul>

css

#img2, #img3 {
display:none;
}

jQuery

$(document).ready(function(){
  $('.bxslider').bxSlider({
	  auto: true,
	  controls: false,
	  autoHover: true,
	  pager: false,
	  speed: 1200,
	  pause: 6000,
	  mode: 'fade'
  });
$('#img2,#img3').delay(3000).css('display','block');
});

要は
「最初2枚目以降の画像を非表示にして、サイトが読み込まれるまで待ってから表示」
するって形。
具体的には

1, 指定画像(ここでは#img2,#img3)を最初display:noneで非表示にしておく
2, delayで数秒後(ここでは3000=3秒)に表示させる

※wordpressの場合はカプセル化するか、$をjQueryに変更。