How to dynamically display position of a div on hover

1 Views

Hi i am creating a website in wordpress,where i am using javascript to display a description div on hover a list of elements but my problem is according to screen size the description div must vary its position in order to display the content completely.I am not sure that i expressed my query clearly could anyone suggest me how can i get this.

Reference for the question

Read More

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;
}
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You need to check the window.innerHeight and window.innerWidth properties before setting the top and left of your popup div. Here is a fiddle to get you started.

    The important part is inside the .hover() call:

    $( 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();
    });
});

    Basically, .hover() takes two functions, one for mouseover and one for mouseout. On mouseout, I just hide the popup. On mouseover, I fill the popup div with content (here coming from the item’s data-extra attribute, but it could come from anywhere) then decide where to put it based on the location of the item and the window bounds.

    Hope that helps. Leave a comment if you need more.

    Update

    So, the short answer is to make your content fit a normal browser window. I have to maximize my browser to be able to see everything in that popup. It seems like important information, too. So maybe it deserves its own page? These are opinions, not facts, so I’ll move on to the latest version of the fiddle which you can more easily look at here.

    There were changes to make everywhere, in the CSS, HTML, and Javascript, to make this work. Probably the biggest issue is visibility:hidden. There might be a way to get jQuery to work with that, but I just use the default display:none, which is what .show() and .hide() toggle.

    New css

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

    And I needed to wrap your ul with a div of id linkcat-4. Now for the new js. The most interesting change is that I realized we need to take the div’s padding into account. Since the padding parameter applies to all sides, we actually need to double the padding and add that to our offset from the window bounds:

    New 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);

    Let me know if that works.