Здраствуйте, сам не разбираюсь в js, но появилась необходимость сделать позиционирование блока относительно краев экрана. Вот код:
<div class="block">
<div class="hidden-block">Тут скрытый текст, бла бла бла..</div>
</div>
<style>
.block {width:100px; height:100px; float:right; display: block; background: #000;}
.hidden-block {padding:10px; display: none; background: #f0f; width:400px;}
.block:hover .hidden-block {display: block;}
</style>
<script> //Сразу скажу что выдрал этот код из какого-то скрипта..
function smtMouseMove(e){
smtMouseCoordsX=e.pageX;
smtMouseCoordsY=e.pageY;
smtTipPosition();
}
function smtTipPosition(){
smtTip=$(".hidden-block");
var cursor_tip_margin_x=0; //Промежуток по горизонтали между курсором и подсказкой
var cursor_tip_margin_y=24; //Промежуток по вертикали между курсором и подсказкой
var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
if(leftOffset<=$(window).width()){
smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
} else {
var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
smtTip.css("left",thePosX);
}
if(topOffset<=$(window).height()){
smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
} else {
var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
smtTip.css("top",thePosY);
}
}
</script>
Но все это не работает, при наведении курсора на блок с классом block, появляется блок с классом hidden-block, который выезжает за границы экрана.. Как сделать чтобы при расположении в правом углу экрана подсказка выводилась слева и наоборот?
К примеру как на
этом сайте. При наведении на постер, появляется желтая иконка i, при наведении курсора на нее, появляется блок который распологается относительно краев экрана.
