【CSS】GoogleMap APIを使ったマップのウィンドウ内がスクロールしない！
GoogleMap APIによって動的に追加したマップで、地点をクリックすると「info_window」というポップアップ・ウィンドウを表示をさせることができます。
このウィンドウ内のコンテンツが、iPhoneのサファリでうまくスクロールできない！
画面からはみ出た部分がちょん切れてしまい、見れなくて困ってしまいますた・・。
スクロールを効かせるためには、以下のようなcssを追加すると良いです。
ウィンドウの装飾用のクラス「gm-style-iw」に、スクロールを有効化するための設定をします。
.gm-style-iw {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}以上！
【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに！
最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。
グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。
具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。
これはIEだけで起きる現象で、他のブラウザでは起きません・・。
これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。
下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
（こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい）
//Googleマップのウィンドウを定義
var info_window = new google.maps.InfoWindow({
//パラメータ
content: jQuery(hogege_map_content).prop('outerHTML')
});
//ブラウザがIEかどうかチェック
var is_IE = false;
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
var is_IE = true;
}
//IEの場合は後から要素を追加
if (is_IE == true){
google.maps.event.addListener(info_window, 'domready', function(){
jQuery(hogege_map_content).append(ie_kuso1);
jQuery(hogege_map_content).append(ie_kuso2);
jQuery(hogege_map_content).append(ie_kuso3);
});
}クソコードとなりますが、異常です・・。
【HTML】ボタンを押すと勝手にsubmitになって遷移しちゃう！
buttonをクリックすると勝手に画面が遷移してしまう…。
これは、buttonのタイプが「submit」の動作になっていたからでした…。
「submit」したくなかったら、下記のようにちゃんと「type="button"」という属性を付けましょう…。
<button class="button" type="button">サブミットするなyo！</button>
以上です…。
【HTML】iframeをクリックすると別ページに飛ぶ動作！
iframeをクリックすると、別ページに飛ぶ動作を作ろうと思ったのですが、かなり手こずってしまいました・・。
結論から言うと、以下のようなコードで出来るようになります。
<div style="position:relative;">
<div style="pointer-events: none;">
<iframe>・・・</iframe>
</div>
<a href="xxxx" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:9999;"></a>
</div>「pointer-events: none;」でiframeのクリック動作を無効化し、表面に「z-index:9999」のaリンクの幕を貼りつけています。
普通にiframeをaリンクで囲むと、なぜか「iPhone Safari」でまともに表示してくれなってしまうので、こういう苦しい方法を取ることになりました・・。
↓下記のページに他にもいろいろ詳しい方法が載っています。
html - Use iframe as a link? - Stack Overflow
以上・・。
【Javascript】Barba.jsで埋め込みツイートが表示されないぞ！
Pjaxの技術を使って動的に画面遷移ができる「Barba.js」
この「Barba.js」を使って埋め込みTweetを張り付けたページを読み込むと、うまく表示してくれんとです・・。
どうも埋め込みツイートというのは、動的に生成した場合は「Load()」を実行してケツを蹴り上げないと、その姿を現してくれないみたい・・。
なので、下記のように「newPageReady」のタイミングで「twttr.widgets.load()」を呼び出すようにしました。
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
if (typeof twttr === 'undefined') {
var twitterjs = document.createElement("script");
twitterjs.async = true;
twitterjs.src = '//platform.twitter.com/widgets.js';
document.getElementsByTagName('body')[0].appendChild(twitterjs);
}
else {
twttr.widgets.load();
}
});これで埋め込みツイートがうまく表示されました、めでたしめでたし。
以上！
【Wordpress】カスタムフィールドの存在確認チェックは要注意！
ワードプレスの「get_post_meta()」という関数がありますよね・・？
記事のカスタムフィールドの値を取得するための関数です。
この関数で、存在しないカスタムフィールドを取得したときの戻り値をチェックするとき、要注意が必要です。
戻り値には「null」ではなくて、「""」が入っています。
なので、下記のように「isset」などを使って存在確認チェックをしようとすると、痛い目を見てしまいます・・。
$key = 'hogehoge_count';
$count = get_post_meta(get_the_ID(), $key, true);
//これではダメ！
if (!isset($count)){
echo("存在しません！");
}
//これが正しい！！
if ($count == ""){
echo("存在しません！");
}公式ページにも、引数三項目にtrueを入れたときは、戻りを文字列で返すと書いてありますね。
関数リファレンス/get post meta - WordPress Codex 日本語版
なんというビックリ実装・・びっくりした～！
以上！
