グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

※14/7/9
いくつか問題点？を確認したため記事下部に追記しています。

ようやく旧IEが減ってきて、これで心置きなく position:fixed が使える・・
かと思いきや、スマホでもiOS4以下やAndroid2.X以下は非対応なので、まだしばらくは対策が必要なようです。

そこで、ブラウザが position:fixed に対応しているかを確認できるJSを探してみました。

position:fixedに対応しているかどうか判定する

こちらで紹介されているJSが簡単そうです。


■ダウンロード
GitHubのページに行ってダウンロードします。


■HTMLに記述
HTMLのヘッダー内に記述します。
jQueryを使用しているので、jQueryも忘れずに。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jQuery.support.fixedPosition.js"></script>

■実行
同じくヘッダー内にて実行します。
下記のように書くと、対応していれば「true」、非対応なら「false」が返ってきます。

<script>
$(function(){
	alert($.support.fixedPosition);
});
</script>

※ここから追記

上記の状態でテストしていて気付いたことがありました。

・ページがスクロールバーの出ない長さの場合、非対応でも「true」が返ってくる（iOS4/Android2.X）

・スクリプト実行時にスクロール位置がページ最上部（X=0）の場合、非対応でも「true」が返ってくる（Android2.X）

ちょっとこのままでは十分に使えそうにないので、
何かしら対応できないか試してみようと思います。

ある条件でaタグを無効にする必要がありまして、
JavaScriptで出来そうだけど、さてどのようにしようかな・・

と考えつつ検索していたところ、なんとCSSで実現できるとの記事を発見。

YoheiM .NET
[CSS] CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法

---------------------------

pointer-events : none;

---------------------------

上記のスタイルを指定することで、
aタグの動作や JavaScript の onClick 等のイベントを無効にすることができます。

今回はレスポンシブなサイトで、

・大画面の時はサムネ + LightBox
・スマホ等の小画面では画像100%表示でクリックなし

という用途で使いました。
レスポンシブ案件が今後増えれば、さらに使いどころが出てくるかもしれません。

しかもIE7以上で動くそうなので安心です！
2016.12.15
盛大に間違えていたようで、IEでは11以上から対応でした。
とても便利なスタイルですが、使用する場合は対応ブラウザと相談になりそうです。

ご指摘があり修正しました。
誤った情報を掲載してしまい申し訳ありませんでした。

以前LightBoxのタイトルを<br />なしで改行する方法を書きましたが、
現在のv2.6ではソースが変わっているため、改めまして。

ちなみにv2.0の場合はこちらでご紹介されています。
LightBoxの使い方とカスタマイズ方法


■v2.6の場合
lightbox-2.6.min.js 内を次のように書き換えてください。


html(this.album[this.currentImageIndex].title)

この部分を

html(this.album[this.currentImageIndex].title.replace(/\r\n/g, "<br />").replace(/(\n|\r)/g, "<br />"))

このように書き換え。
1箇所しかないので置換えで大丈夫です。


これで title 内の改行が有効になります。

できるだけ簡単にできるアコーディオンメニューをさがしていて
下記の記事を見つけました。

jQuery アコーディオンメニュー
http://php.o0o0.jp/article/4138817358715040

もーすばらしく簡単で便利です。
デフォルトで空けておきたい部分も指定できます。
自分で作ってみたサンプル


【javascript】
----------------------------------------------

$(function () {
  // デフォルト開く部分を指定
  $('ul').eq(0).show();
  $('span').click(function() {
    // メニュー表示/非表示
    $(this).next('ul').slideToggle('fast');
  });
});

【CSS】
----------------------------------------------

ul {
  display: none;
}
span {
  cursor: pointer;
}

【HTML】
----------------------------------------------

<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>

jQueryで開閉メニューなどを作るとき、.show() や .hide() だけでは
思い通りにならなかったのでメモ。
.slideup() や .slidedown()、.animate() でも同様です。

クリックしないタイプの開閉メニューを作るときなど、
マウスオーバー時に .show()、マウスアウト時に .hide() というように素直に作ると、
メニューの上をマウスが行ったり来たりしたときにその回数分開閉してしまいます。
マウスを止めても何度も開閉し続ける・・。
そういうとき次のようなメソッドを上手く組み合わせることで、
余計な動作をなくすことができます。


■.stop([clearQueue], [gotoEnd])

現在のアニメーションをストップさせます。
show()やhide()の前に実行することで、それまでのアニメーションを中断してから動作させることができます。

clearCueue を true にするとアニメーションがいくつも予約されている場合、それらも中断します。
gotoEnd を true にすると中断＋アニメーション完了の状態にジャンプします。
デフォルトはどちらもfalse。

（例）$(this).stop().animate( ... );

.stop()
.stop(true,false)
.stop(false,true)

■.not(':animated')

対象要素から指定した条件に合致するものを除外します。
上記のように :animated を指定すると、対象がアニメーション中の場合は処理が実行されなくなります。

（例）$(this).not(':animated').animate( ... );


そのときそのときでどう使うかは変わってきますが、上記の.stop()と.not()の使い分けや、
オーバーだけに使う、アウトだけに使うなどの組み合わせで理想の動作を実現できると思います。

・オーバーのみに .stop(true,false)