● 内容
① いいね!した人をクリックしたときにポップアップされるフレームの位置を
調整する。
② ウインドウ(画面)の大きさを変えられた場合に、アメーバ側はこの
ポップアップフレームでは、中央に再配置することは対応していないので対応する。
注意
私のブログの場合、何故かIEのブラウザでresizeがうまく機能しません。
何故かは不明です。
● やり方。
① 位置の調整。
真ん中に表示されるようにCSSで調整する。
/* いいね!した人のポップアップフレームの表示位置調整 */
#iineEntryFrame{
margin-left:-38px;/* 左に38px移動 */
}
② ウィンドウ(画面)の大きさを変えた場合に画面に合わせて位置を
中央に位置を変える。
フリープラグインへ下記を追加する。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type='text/javascript'>
$(document).ready(function(){
who_i_nice_resize(-38);
});
</script>
■ 説明
・ 下記はフリープラグインに既に書かれていれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
・ who_i_nice_resize(-38);
-38は①のCSSで指定した値を設定してください。
①の指定をしていない場合は、0 を指定してください。
● ソースコード
function who_i_nice_resize(m_left){// いいね!した人の表示位置の調整
$(window).resize(function() {
var wg = document.documentElement.clientWidth || window.innerWidth || self.innerWidth;
var w0 = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var iine_w = $('#iineEntryFrame').css("width").replace(/px/,"");
var iine_pos = (w0+wg/2)-(iine_w/2)-(m_left/2);
$('#iineEntryFrame').css("left",iine_pos+"px");
});
}