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 floated squares and a popup blocks in each, which have absolute position.
JS:
jQuery(function($) {
$('input[title!=""]').hint();
$(".
clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()});
});
If over - show, else - hide. Quite ok, but it must be more advanced, we should catch an offset and give a class to .over block:
if offset from right (corner of browser window) less than 150px, then add class "right" for a .over block.
if offset from right more than 150px - add class "left" for a .over block.
How can we do it?
