bootstrap ドロップダウンメニューがパネルの下に隠れてしまう件

bootstrap css

z-indexも効かず、1時間はまったので(いや正確には昨日の夜これが分からなくてそのまま寝てしまったので実際は4時間は無駄にした。でもそのおかげで睡眠がとれたから±2時間のマイナスとしておこう。と思ったけど本当はその後8km走るはずだったし損失はそこそこ多い。時間ではなく逸失利益で考えると5～10万は損をしたはず。とにかく忘れないように)メモしておく。

animation-fill-mode:both;

どうやらこれが悪さをしていたみたい。noneにしてやればok

bootstrapのカスタマイズ方法

bootstrap

通常、既存のbootstrap.cssをカスタマイズしたい場合、別途custom.css等を作ってそれで上書きをするんだけど、例えばグリッドを12から24に変更したい場合だと、上書きするやり方ではできなそうだったため以下調べたやり方２つ。

ビルドをしない方法
Customize and download · Bootstrap
bootstrapのカスタマイズページから「Less variables」の各値を変更してダウンロードすればOK
今回グリッドのカラムを12から24に変更したかったので@grid-columnsの値を24に変更してダウンロード

ビルドをする方法
後で試す(以下2つを読めばわかるはず)
How to Build · windyakin/Honoka Wiki · GitHub
Getting started · Bootstrap

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

jquery フォームのコピーについて完全に忘却していたので一生忘れないためのメモ

javascript

html

<ul>
<li>test1</li>
<li>test2</li>
</ul>

こんなhtmlがあって、1つ目のliをコピーしてulに追加したいとする。そこでまずコンソールにコピー元のhtmlを表示する。

javascript

console.log($("ul li:first"));

chromeのコンソールの結果

[li, prevObject: n.fn.init[1], context: document, selector: "ul li:first"]

何が何だかさっぱりわからん。なので↓のようにする。

javascript

console.log($("ul li:first").html());

chromeのコンソールの結果

test1

なんでliタグが含まれないんじゃ～～～～っとアホみたいに2時間くらいはまった。本当に死にたい。
結局html()を使ったのが間違いだったことに気が付く。html()を使うと「内部の要素を取得」する訳だから当たり前の話なのに2時間もはまって自分を本当にぶっ殺したくなる。
前の記事にも書いたけどコンソールで対象のhtmlを見たい場合は以下のようにする。

javascript

$(function(){
$.fn.log = function() {
  console.log.apply(console, this);
  return this;
};
$("ul li:first").log();
});

chromeのコンソールの結果

<li>test1</li>

ここまで理解できれば後はコピーするだけ。

javascript

var html = $("ul li:first").clone(true).html();
$("ul").append(html);

追加後のhtml

<ul>
<li>test1</li>
<li>test2</li>
test1
</ul>

なんでliがコピーされないんじゃ！！！ってこれで本当にアホみたいに2時間はまった。自分ぶっ殺したくてしょうがねえ。

正解は以下

javascript

$("ul li:first").clone(true).appendTo("ul");

追加後のhtml

<ul>
<li>test1</li>
<li>test2</li>
<li>test1</li>
</ul>

javascriptやっていると本当に自分を殺したくなってくる。もう2度と忘れないこと。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

cakephp1.2 モデルのリレーションを全解除する

cakephp

AppModel.php

public function unbindModelAll($reset = true) {
    foreach(array('hasOne','hasMany','belongsTo','hasAndBelongsToMany') as $relation){
        $this->unbindModel(array($relation => array_keys($this->$relation)), $reset);
    }
}

参考サイト
モデルに設定された全アソシエーションを解除する - Qiita

jquery bxsliderとphotoswipeを連携する

javascript

http://bxslider.com/
bxslider
http://photoswipe.com/
photoswipe

bxsliderで画像をスライド表示させ、画像クリック時にphotoswipeで拡大表示させたい場合の話。
普通に実装すれば問題無くできる。ただ注意するところとして、photoswipeはデフォルトだとfigureタグをリストさせる必要があるけど、これをliタグに変更したい場合、photoswipeの呼び出しスクリプトを以下のように変更する。

変更前

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});

変更後

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'LI');
});

もう一つ、photoswipeでモーダル表示したときにbxsliderの左右のアイコンが浮き上がってしまうので、z-indexの値を大きくする。

photoswipe.css

/*z-index: 1500;*/
z-index: 10000;

参考サイト
jquery - How do I get Photoswipe to recognize entire gallery from list of thumbnail images - Stack Overflow

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

win10 chrome 「ホストを解決しています」でネットが遅くなった時の対処法

windows

DNSのキャッシュはブラウザだけじゃない。PC内にも存在している。 - 技術ブログ
まずこれでキャッシュクリアを試してみたけど改善されず。

ルーターを再起動してもダメだった。

試行錯誤したところ「Google Public DNS」を使うことで解消された。
方法としては優先DNSに「8.8.8.8」代替DNSに「8.8.4.4」を設定すればOK

でも何となく外部のdnsを使うのは気持ち悪いので後日また様子を見て戻したい。