【jquery】【CSS】display:noneでgoogle mapのiframe内の表示位置がずれる対処(簡易)

スマホでgoogle mapを複数埋め込んでtoggleで切り替えてたんですが
diplay:noneになると、地図の表示位置が北極とか表示されて遠すぎやろ!
と思わず関西弁つっこみを入れるこのごろ。

先送りしてたので、いい加減対処しないとなーと思ってぐぐってみても
clickで該当iframeを再読み込みなどがあるのですが、mapが複数ありすぎてちょっと断念。
もっと簡単なのが良いです。

て、ことでvisilityクラスを使ってtoggleClassで切り替えたところ一応できました。
(邪道かもしれない)


<p>タイトル</p>
<div><!--←最初は表示させるタブ-->
ううう
</div>

<p>タイトル2</p>
<div class="hidden">
いいい
</div>

<p>タイトル3</p>
<div class="hidden">
あああ
</div>
.hidden {
	visibility:hidden;
	height:0;
	margin:0;
	padding:0;
	overflow:hidden;
	}
    $(function(){
        $("p").on("click", function() {
            $(this).next().toggleClass("hidden");
            $(this).toggleClass("opn");
            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);
        });

    });

こんな感じです。

            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);

この2行は地図の中心地を再定義するものらしい…(あんまり実感なし)

楽天GOLDなどでスマホに飛ばすとき[jquery]

(function(){
	var ua = navigator.userAgent;
	if (localStorage 
		 && !localStorage.getItem("sp_flag") 
		 && (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 )) {
		if(confirm('スマートフォン用サイトを表示しますか?')) {
			location.href = 'http:/example.com/sp/';
		}else{
			localStorage.setItem("sp_flag",true);
		}
	}
})();

[jquery]アコーディオンメニュー改

大分前に書いたやつ([Jquery]マウスオーバー/マウスアウトでアコーディオンメニュー)だと読み込み時にメニューのところにホバーしているとずれてしまう現象が出たのでこっちに修正。

$(document).ready(function(){
    $(function() {
	$("#navgation li").hover(function() {
		$(this).children('ul').show();
		if($(this).find('ul').prev().hasClass("current")) {$(this).find('ul').prev().removeClass("current").parent().removeClass("current");
		}else {
			$(this).find('ul').prev().addClass("current").parent().addClass("current");
		}
		
	}, function() {
		$(this).children('ul').hide();
		$(this).find('ul').prev().removeClass("current").parent().removeClass("current");
	});
    });
})

まだ使って無いけどメモ

jquery教本に載ってたんですが
ネットに絶対導入方法あるだろうから買うのを渋ってしまう…

背景全面に動画を流すJqueryプラグイン【tubular】
http://code.google.com/p/jquery-tubular/downloads/list

パララックスオススメJqueryプラグイン【jarallax】
http://liginc.co.jp/web/js/jquery/24446

[Jquery]fadeToでリンクホバーでフェードイン・フェードアウトのサンプル アニメーション完了まで待機も

$(document).ready(function(){
    $("#aaa a").hover(function(){
       $(this).fadeTo("normal", 0.5);
    },function(){
       $(this).fadeTo("normal", 1.0);
    });
});

単純にこれだけでもよいのですが、
お客さん(かなりjquery詳しい人)からキュー残るのが気になるというので下記を設定(^ ^)

$(document).ready(function(){
   $("#aaa a").hover(function(){
       $(this).stop(true).fadeTo("normal", 0.5);
    },function(){
       $(this).fadeTo("normal", 1.0);
   });
});

これ追加するだけの簡単なお仕事です。(最初から設定しとけというお話)

.stop(true)

[Jquery]BXSLIDERのonSlideBeforeで背景色切り替え

うーんすばらしい!
ここまでオプション用意してくれてるとかなり使いやすいですね

$(function(){
  bg = 0;
  var slider = $('.bxslider').bxSlider({
  onSlideBefore: function(){
  	if(bg == 0) {
  		$('#aaa').css("background-color","#fff");
		bg = 1;
  	}else {
  		$('#aaa').css("background-color","#000");
		bg = 0;
  	}
  }
  });
});

もっとスマートな書き方あるかな?

[Jquery]マウスオーバー/マウスアウトでアコーディオンメニュー

先ほど書いたやつだと、エリア外が閉じないので、こっちで対処

http://stackoverflow.com/questions/19001183/mouseover-and-mouseout-in-accordion
http://jsfiddle.net/arunpjohny/jBFMv/

<ul id="accordion">
    <li>
        <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
jQuery(function ($) {
    $('#accordion li').hover(function () {
        $(this).find('ul').stop(true, true).slideToggle()
    }).find('ul').hide()
})
</script>