js

slickを動作させない

$(this).slick('unslick');

bxsliderのオプションをブラウザの画面幅で変更する

bxsliderはレスポンシブに対応していてとても便利なのですが、
ブラウザ幅によって少しオプションを変更したい場合のメモ。

var slidenum;
if(window.matchMedia('(min-width:768px)').matches){
    slidenum = 1;
} else {
    slidenum = 3;
}

var slider = $('.bxslider').bxSlider({
    minSlides: 1,
    maxSlides: slidenum,
    moveSlides: 1,
    onSlideAfter: function(){
        slider.startAuto();
    }
});

bxSliderのコントロール類をクリックするとスライドが停止してしまうので自動的に再開させる

bxSliderを自動再生にしている時、コントロール類をクリックするとスライドが停止してしまいます。
それを回避する方法として、onSlideAfter というコールバックのオプションに「startAuto」という関数(Public methods)を指定するとのこと。

var slider = $('#top_bxslider').bxSlider({
  auto:true,
  speed:500,
  pause:3500,
  onSlideAfter: function () { slider.startAuto(); }
});

==================================

こちらを参考にさせていただきました。

jQuery レスポンシブ・スライダー bxSlider

ツイートボタンがIEでエラーになる場合の対処法

文字コードがUTF-8以外の場合にエラーがでるようなのでその対処法。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これを以下のようにする。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.charset="UTF-8";js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

==================================

こちらを参考にさせていただきました。

TwitterのウィジェットがIEでエラーを出す際に対処法

 

jQuery Lightboxで、PREV/NEXTボタンを常に表示

通常のLightboxのPREV/NEXTボタンを常に表示させるとすると、CSSでhover部分を修正すればいいので簡単です。

しかし、jQuery LightboxはCSSにhoverの記述がありませんでした。
これはjsをいじるしかないのかな・・・と思っていましたが、簡単に表示させる方法を見つけました。

27、8行目あたりの、以下の部分をfalseからtrueに変更します。

// Configuration related to navigation
fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

これでPREV/NEXTボタンが常に表示されるようになりました。

==================================

こちらを参考にさせていただきました。

jQuery lightBoxで、PREV/NEXTボタンを常に表示する。

OperaでのLightbox 2のズレ

先日いつものようにLightbox2を導入していたのですが、Opera9でLightboxのウインドウが下にずれて表示されることが判明しました。知らなかった・・・

この現象を回避するため、lightbox.jsの231行目の下に、下記のコードを付け足しました。

if(window.opera){var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 30);}

これでばっちり回避できました!

==================================

こちらを参考にさせていただきました。

OperaでのLightbox 2のズレ

IE6での透過png

IE6で透過pngを使用すると透過した部分がグレーになってしまうので、IE6でも使用できるものを探してみたところ「DD_belatedPNG.js」が設置も簡単でよさそうでしたので早速使ってみました。

設置は、head内に

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, .png_img,#png_img');
</script>
<![endif]-->

と記載するだけです。

2行目にDD_belatedPNG.jsへのパスを入れます。

3行目にpngを使用している要素名(img等)、id名(#png_img等)、クラス名(.png_img)を入れます。
複数指定する場合はコンマで区切ります。

==================================

こちらを参考にさせていただきました。

IE6用透過png対応策、DD_belatedPNGの使用法と注意点

 

GBrowserIsCompatibleを使用した際のIEでの「オブジェクトを指定してください」エラー

Google Map APIを使用する際、GBrowserIsCompatible() の行でIE6と7で以下のエラーが発生しました。

ライン: 00
文字 : 00
エラー: オブジェクトを指定してください.
コード: 0
URL  : http://xxxxxxxx.com

このエラーの場合、Googleのスクリプトを読んでいるscriptタグに「charset="utf-8"」を追加することでIE6、7で正常に動作しました。

<script type="text/javascript" charset="utf-8" 
src="http://maps.google.com/maps?file=api&v=2&key="></script>

==================================

こちらを参考にさせていただきました。

GBrowserIsCompatible で 「オブジェクトを指定してください」エラー@IE

 

IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け

javascriptでスライドショーを使用するのに、xfade2.js というのを使用していたんですが、jpg画像でIEのみ、白くドット抜けのような現象が起こりました。

jpgだから透過になっているわけでもないし、元画像を確認しても何もないし。。。IEのみなのでjsのfilterかな?と調べていた所、どうやら特定色(#02050a)のみドット抜けするという記述を見つけました。

IE6/7でjpgにfilter:alpha(opacity)をあてたときに出るバグ?

これ、ほんとにそのとおりで、jpgの#02050a部分が透過jpgになってるんです!
IE6~8でこのバグを確認しました。

背景色に#02050aを指定することで、とりあえず回避しました。

解決法としては、

  1. #02050aをなくす
  2. pngにする

等があげられるそうです。

==================================

他にもこちらを参考にさせていただきました。

続・IEの「White Noise」バグ

LightBoxのバグ

PHPからパラメータをJSへ渡しPHPへ表示する

前回の「CSS・JSファイルの外部読み込みにPHPを使う」のエントリーでも書いたのですが、外部jsを読み込む際、

<script src="script.js" type="text/javascript"></script>

だともちろんOKなのですが、

<script src="script.php" type="text/javascript"></script>

とphpを読み込むことができます。

このソースを記述しているファイル(仮にindex.php)からscript.phpにパラメータを渡し、その結果をindex.phpで表示するということができないか調べた所、

<script src="script.php?param=1" type="text/javascript"></script>

とすればパラメータを渡し、index.phpに結果を表示することができました!

param=1の部分は変数等も使えます!

==================================

こちらを参考にさせていただきました。

Web Artisan Blog - PHP:JS(JavaScript)からPHPを呼び出しHTML上に出力する方法

より以前の記事一覧

その他のカテゴリー