JQuery validation offset
HTML:
<ul class="clients">
<li>
<div class="over left">Description</div>
<div class="inner">Image</div>
</li>
</ul>
CSS
.clients { margin-right: -20px; }
.clients li {
float: left;
width: 128px;
height: 120px;
margin: 0 20px 20px 0;
border: 1px solid #c2c2c2;
}
.clients .over {
display: none;
position: absolute;
width: 250px;
font-size: 11px;
line-height: 16px;
background: #ecf5fb;
margin: 3px 0 0 3px;
padding: 18px;
z-index: 25;
}
.clients .right { margin: 3px 0 0 -161px; }
.clients .inner { width: 128px; height: 120px; overflow: hidden; }
So, we have a list of floating squares and pop-up blocks in each that have an absolute position.
JS:
jQuery(function($) {
$(".clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()});
});
If over-show, else - hide. It's okay, but it should be more advanced, we should catch the offset and give the class to the .over block :
- if the offset to the right (corner of the browser window) is less than 150px, then add a "right" class for the block
.over
. - if the offset to the right is greater than 150px, add a "left" class for the block
.over
.
How can we do this?
+2
a source to share
1 answer
.offset()
returns an object of type { left: 200, top: 300 }
$(window).width()
returns the width of the window
Clearly you are getting left offset from .offset()
. The correct displacement required to meet the condition should be calculated as:
offsetRight=$(window).width()-$(this).width()-$(this).offset().left;
Together:
jQuery(function($) {
$(".clients li").bind('mouseover mouseout',function(){
$over=$("div.over",this);
$over.toggle();
//didn't get if it the li offset you need or the actual .over, replace $(this) with $over in next lines if you need that
offset=$(this).offset();
offsetRight=$(window).width()-$(this).width()-offset.left;
if (offsetRight<150){ $over.removeClass('left').addClass('right'); }
else { $over.removeClass('right').addClass('left'); }
});
});
+2
a source to share