4

こんにちは、私はワードプレスでウェブサイトを作成しています.javascriptを使用して、要素のリストにホバーした説明divを表示していますが、私の問題は、画面サイズに応じて、コンテンツを完全に表示するために説明divの位置を変更する必要があることです.私は私が自分の質問を明確に表現したかどうかわからないので、どうすればこれを入手できるか教えてもらえますか。

質問の参考

jQuery:

(function($) {
  $(document).ready( function() {

    $('#linkcat-4 .xoxo li:nth-child(1)').mouseover(function(e) {
      $('#text1').css(
                       'visibility' , 'visible'
                      );
      $('#linkcat-4 .xoxo li:nth-child(1)').mouseout(function(e) {
        $('#text1').css(
                        'visibility' , 'hidden'
                       );
      });

    });
  });
})(jQuery);

HTML:

<ul class="xoxo blogroll">
<li><a href="">Admirality</a></li>
<li><a href="">Banking</a></li>
<li><a href="">Commercial</a></li>
<li><a href="">Contract</a></li>
<li><a href="">test</a></li>
<li><a href="">Corporate</a></li>
</ul>

<div  class="desc-text" id="text1" style="visibility: hidden;">
  <p>We represent protection and indemnity clubs that provide insurance 
     for many of the ships coming to Guyana. We deal with all the familiar 
     problems encountered by ships, both contentious and non-contentious, 
     including arrests arising from accidents and claims for wages and damaged 
     cargo. We advise masters, obtain surveys, note protests, negotiate 
     settlements and advise on or deal with stowaways and medical emergencies. 
     Our admiralty practice is the largest in Guyana.
  </p>
</div>

CSS:

.desc-text {
  position: absolute;
  top: 12%;
  left: 50%;
}

#text1 {
  visibility:hidden;
  background:#f1f1f1;
  padding: 15px;
  width: 150px;
}
4

1 に答える 1

1

ポップアップ divのandを設定する前に、 プロパティwindow.innerHeightとプロパティを確認する必要があります。ここにあなたが始めるためのフィドルがあります。window.innerWidthtopleft

重要な部分は.hover()呼び出しの中にあります:

$( function() {
    pop = $("#popup");
    $(".item").hover( function() {
          row = $(this);
           pop.html(row.data("extra"))
            .css("top", (function(r) {
               if(r.offset().top > window.innerHeight - pop.height())
                   return window.innerHeight - pop.height();
               else
                  return r.offset().top;
              })(row))
            .css("left", (function(r) {
               if(r.offset().left + r.width() > window.innerWidth - pop.width())
                   return window.innerWidth - pop.width();
               else
                   return r.offset().left + r.width();
               })(row))
            .show();
    
    }, function() {
       pop.hide();
    });
});

基本的に、.hover()マウスオーバー用とマウスアウト用の 2 つの関数を使用します。マウスアウトでは、ポップアップを非表示にします。マウスオーバーで、ポップアップ div にコンテンツを入力し (ここではアイテムのdata-extra属性から取得しますが、どこからでも取得できます)、アイテムの位置とウィンドウの境界に基づいて配置する場所を決定します。

それが役立つことを願っています。さらに必要な場合は、コメントを残してください。

アップデート

したがって、簡単な答えは、コンテンツを通常のブラウザ ウィンドウに合わせることです。そのポップアップですべてを表示できるようにするには、ブラウザを最大化する必要があります。こちらも重要なお知らせのようです。それで、それは独自のページに値するのでしょうか？これらは事実ではなく意見であるため、ここでより簡単に確認できる最新バージョンのフィドルに移りましょう。

これを機能させるには、CSS、HTML、および Javascript の至る所で変更が必要でした。おそらく最大の問題はvisibility:hidden. jQuery を使用して動作させる方法はあるかもしれませんが、デフォルトdisplay:noneの what.show()と.hide()toggle を使用するだけです。

新しいCSS

#text1
{
  display:none;
  background:#f1f1f1;
  padding: 15px;
  width: 150px;
}

そして、あなたulを id の div でラップする必要がありましたlinkcat-4。次に、新しい js について説明します。最も興味深い変更は、div のパディングを考慮する必要があることに気付いたことです。パディング パラメータはすべての側面に適用されるため、実際にはパディングを 2 倍にし、それをウィンドウ境界からのオフセットに追加する必要があります。

新しい JavaScript

(function($) {
   $(document).ready( function() {
     var pop = $("#text1");
     $('#linkcat-4 .xoxo li:nth-child(1)').hover(function(e) {
          var row = $(this);
          pop.html(row.data("extra"))
          .css("top", (function(r) {
            if(r.offset().top > window.innerHeight - pop.height())
               return window.innerHeight - pop.height() - parseInt(pop.css("padding"))*2;
            else
               return r.offset().top;
          })(row))
          .css("left", (function(r) {
            if(r.offset().left + r.width() > window.innerWidth - pop.width())
               return window.innerWidth - pop.width() - parseInt(pop.css("padding"))*2;
            else
               return r.offset().left + r.width();
          })(row))
          .show();                          
       },
   
       function(e) {
          pop.hide();
       });
   });
})(jQuery);

それがうまくいくかどうか教えてください。

于 2013-03-02T07:09:35.897 に答える