maoring blog

このブログはセマンティックウェブ関連の技術的なあれこれを綴ったブログです。

javascriptとmicrodata(実装中)その7 -PubMedIDから論文のAbstractを取得して表示させよう。

大体出来てきたのだけど,不具合あったら教えて下さい☆と書いたところご指摘いただきまして,修正することにしました。

@bonohuさんより @maoringo リンクがWindowの右端のほうだと縦長のポップアップウインドウになってしまうのが玉に瑕ですね

玉に瑕ですって,そんな玉なんてそんな(*´ω`*)!と照れている場合じゃなくて(^_^;,修正します。どの方法が良いのかなとちょいと考えたのですが,マウスオーバーした際の座標とその時のウインドウのサイズが近かった場合のみ,修正を入れるという方法にすることにしました。 まずマウスオーバーした時の座標を取得しましょう。
参考・・・[HTML][Javascript] シンプルなポップアップを表示する

  if (!event) var event = window.event;                                                                                           
  if (!event.pageX) px = event.clientX + document.body.scrollLeft; else px = event.pageX;                                                                                                                                                              
 alert(px + "px  " + $(window).width() + "px");  // $(window).width() は表示幅

event.pageXがif elseになっているのはブラウザ対策のようです。
参考・・・ブラウザごとのeventオブジェクトの違いを理解する
さて,位置を調整しましょう。もともとはJavaScript上で以下のようにポップアップの位置を定義しています。

 var defaults = {
      marginTop: 20,
      marginLeft: 20,                                                                                                                   
      className: "popup_help_window",                                                                                                   
      speed:10                                                                                                                          
    }

//中略
  var offsetTop = $(this).offset().top + defaults.marginTop;
  var offsetLeft = $(this).offset().left + defaults.marginLeft;

ここのmarginTopとかmarginleftとかはポップアップが,ポップアップの出現する元の場所からTopはどのくらいか Leftはどのくらいかを決めているみたいです。本当はもっと複雑らしいけど今は必要ないので省略しちゃいます。
さて,これらをもとにして,ウインドウのサイズに対してマウスオーバーした位置が500px未満だったらずらすということを記載していきます。

 $(this).mouseover(function(event) {//引数を入れないとfirefoxでエラーが出た。
        // 表示対象にマウスが重なった時の処理です。                                                                                     
       if (!event) var event = window.event; //イベントの定義                                                                                           
       if (!event.pageX) px = event.clientX + document.body.scrollLeft; else px = event.pageX;                                         
//      alert(px + "px  " + $(window).width() + "px");               ←動作のチェックによく使っちゃいます。                                                                   
        defaults.marginLeft = 20; //戻ってきた時用                                                                                                      
        var subtract = $(window).width() - px;//差分
        if (subtract < 500) defaults.marginLeft = subtract - 500; //いい塩梅の位置に表示させるためにこっちも調節      
        contenttext = '';
        // ウィンドウにメッセージを設定します。
        contenttext = $(this).attr('content');
        //:以後のみを切り出します。
        contenttext = contenttext.split(":")[1];
        var offsetTop = $(this).offset().top + defaults.marginTop;
        var offsetLeft = $(this).offset().left + defaults.marginLeft;
//以下略

余談ですが,途中まで$(this).mouseover(function() { で引数なしで
if (!event) var event = window.event; //イベントの定義
を書いていたらfirefoxで実行できない!となったので調べてたら,
event.pageX not working in firefox, but does in Chrome
あなたのサイトにエラーがあるので動かないのよ,ボケ!みたいな記述をみつけたので,え”,と思って調べてみたら本当でした。 これで端っこでも上手いこと調節して,表示できるようになりました。

f:id:maoring:20130617163133p:plain