「js」カテゴリーアーカイブ

2016.12.14
js

コンテンツのサイズに依存せず、下までサイドバーを伸ばすJSコード

上下が横100%のヘッダーフッターに挟まれた、縦長のメニューバーがあったんですよ。
本当はその縦長メニューバーの背景を常にフッターにくっつく形で伸ばしたくて、
しかも右側にメインコンテンツ（内容量不明）が入るってことで脆弱コーダーはてんやわんやでした。

とにかくそれが何故かコンテンツと同じ長さしか伸びなくて、グスグスしてたら
上司が「これ書いたよ」ってJSくれました！！！！
神か～～｡.:*･ﾟ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

でも何やってるか分からない（終了

<script type="text/javascript">
(function($){
function resizeSideMenu()
{
var windowHeight = $(window).outerHeight();
var documentHeight = $(document).outerHeight();
var baseHeight = (windowHeight < documentHeight)? documentHeight: windowHeight;
var h = baseHeight - $("#footer").outerHeight() - $("#branding").outerHeight();
$("#main").height( h );

$("#footer").css({"top":"0px"});
}

$(document).ready(function(){
resizeSideMenu();
});

$(window).resize(function(){
resizeSideMenu();
});

})(jQuery);
</script>

同じhtmlの構成にしないと汎用性ないかもね。

2016.12.1
google, js

レスポンシブになってもGoogleマップのピンが中央に来るやり方

やっておくこと

  1. Google APIキーの取得（Google Maps Embed API）
  2. Google API Conslie で「Google Maps JavaScript API」の有効化※やっとかないと動かない
  3. head部分でAPIキーを読み込んでおく。 
    <script src="//maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

やることの流れ

  1. スタイルシートに追加 
    div#googlemaps {
width:100%;
height:300px;
position:relative;
}

    横幅100%じゃ困るんじゃいって時！

    div#googlemaps {
max-width:650px;/* 好きな数字に */
height:300px;
position:relative;
}
  2. .jsファイルを用意gmap.jsとかにしてるよ。あとこれをheadで読み込んでね。 
    function initialize() {
var latlng = new google.maps.LatLng(35.681298, 139.7662469);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.LOADMAP,
scrollwheel: false,
disableDefaultUI: false,
};
var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
var lopanMarker = new google.maps.Marker({
position: latlng,
map: map,
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
var styledMapOptions = { name: '東京駅' }
}
google.maps.event.addDomListener(window, 'load', initialize);

    参考：【Responsive Google Maps】ウィンドウをリサイズしてもピンが中央からズレないようにする方法

    マップのピン（マーカー）をオリジナルのにしたいぞい！って時はこれ。

    function initialize() {
var latlng = new google.maps.LatLng(35.681298, 139.7662469);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.LOADMAP,
scrollwheel: true,
disableDefaultUI: false,
};
var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
var image = {
url : '画像のURL',
scaledSize : new google.maps.Size(60, 60)//任意のサイズで！
}

var lopanmarker = new google.maps.Marker({
position: latlng,
map : map,
icon : image,
title : "東京駅"
});

google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
var styledMapOptions = { name: '東京駅' }
}
google.maps.event.addDomListener(window, 'load', initialize);


    実際にマーカーの画像を作るときは「new google.maps.Size(60, 60)」の倍：120px*120pxで作る！
    その方が高解像度なスマホでも鮮明で綺麗！

  3. マップを置きたいところにdivタグを挿入 
    <div id="googlemaps"></div>

    多分これでスマホで見てもブラウザのサイズをギュイギュイ変えてもピンがど真ん中に来るGoogleマップが作れているはずです。


なんか今はこんなことしなくてもスマホで中央寄せされるみたいですね。
良い世の中になったね。（2018/1/24）

新しい投稿 →