Ограничить позицию элемента CSS

67
10

Поэтому у меня есть эта подсказка, которая меняет положение на событии mousemove. Он работает нормально, но я хочу, чтобы при достижении нужного угла всплывающая подсказка либо скрывалась, либо привязывалась к правой стороне. Пример: http://jsfiddle.net/bortao/qN3RP/

Конечно, я могу взять ширину родительского элемента, проверить, больше ли это и ограничивает его, но это немного перегружает код.

Я также мог установить overflow: hidden тела overflow: hidden, но я не могу, потому что есть другие элементы, которые я хочу прокрутить.

Есть другой выход? Что-то вроде max-right.

спросил(а) 2014-04-17T08:50:00+04:00 6 лет, 1 месяц назад
1
Решение
67

Вы можете использовать что-то вроде этого:

var _offset;
$(document).on("mousemove", function (e) {
if (!_offset) _offset = $("body").offset();
$("#help").show();
$("#help").css({

left: (e.pageX - _offset.left) > 400 ? '400px' : (e.pageX - _offset.left + 10) + "px" ,
top: (e.pageY - _offset.top + 25) > 400 ? '400px' : (e.pageY - _offset.top + 25) + "px"
});
})

увеличьте/уменьшите значение 400 до желаемого значения.

играть на скрипке

ответил(а) 2014-04-17T09:07:00+04:00 6 лет, 1 месяц назад
52

hi U может использовать следующий код, который отлично работает


<html>
<head>
<script src="jquery-1.10.2.js"></script>
<style>
#help {
white-space: nowrap;
position: absolute;
background: yellow;
color: #111;
padding: 4px 4px 2px 4px;
}

</style>
<script>
var _offset;
$(document).ready(function(){
$(document).on("mousemove", function (e) {
if (!_offset) _offset = $("body").offset();
$("#help").show();
$("#help").css({
left: (e.pageX - _offset.left + 10) + "px",
top: (e.pageY - _offset.top + 25) + "px"
});

if((e.pageX - _offset.left + 10)>(window.screen.availWidth-50))
{
//you can change the position or hide
$("#help").css({
left: (e.pageX - _offset.left - 120) + "px",
top: (e.pageY - _offset.top + 25) + "px"
});
//$("#help").hide();
}
else
{

$("#help").show();
}

});
});
</script>
</head>
<body>
<div id="help">This is some help</div>
</body>
</html>

ответил(а) 2014-04-17T09:10:00+04:00 6 лет, 1 месяц назад
39

DEMO

JQuery

var _offset;
$(document).on("mousemove", function (e) {
if (!_offset) _offset = $("body").offset();

var calc = e.pageX;
var getWidth = $('body').width() - $("#help").width();
$("#help").show();

if (calc > getWidth) {
$("#help").css({
right: (e.pageX - _offset.right) + "px",
top: (e.pageY - _offset.top + 25) + "px"

});
} else {
$("#help").css({
left: (e.pageX - _offset.left + 10) + "px",
top: (e.pageY - _offset.top + 25) + "px",
right: "auto"
});
}

})

    может быть скорректирована в соответствии с динамической шириной документа

    на body body{overflow:hidden;} скрыто переполнение, поэтому полоса прокрутки не влияет на положение всплывающей подсказки

Надеюсь, поможет!

ответил(а) 2014-04-17T09:10:00+04:00 6 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема