いいね！した人のポップアップ位置の調整(resize)

★　いいね！した人のポップアップ位置の調整


●　内容


①　いいね！した人をクリックしたときにポップアップされるフレームの位置を
　　調整する。
②　ウインドウ（画面）の大きさを変えられた場合に、アメーバ側はこの
　　ポップアップフレームでは、中央に再配置することは対応していないので対応する。


　注意
私のブログの場合、何故かＩＥのブラウザでresizeがうまく機能しません。
何故かは不明です。



●　やり方。


①　位置の調整。
　　真ん中に表示されるようにＣＳＳで調整する。

/* いいね！した人のポップアップフレームの表示位置調整 */

#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は①のＣＳＳで指定した値を設定してください。
①の指定をしていない場合は、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");

 });

}