Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Всплывающий текст
 
 автор: SS   (06.04.2012 в 01:42)   письмо автору
 
 

Помогите, пожалуйста, подправить этот код, чтобы ЕСЛИ РАЗМЕР БОКСА СО ВСПЛЫВАЮЩИМ ТЕКСТОМ ПРИМЕЧАНИЯ БОЛЬШЕ, ЧЕМ РАССТОЯНИЕ ДО ПРАВОЙ ГРАНИЦЫ ОКНА, то бокс <div id=descriptions>'+content+'</div> выводился не влево относительно курсора, а вправо?

<script type=\"text/javascript\">
var content=new Array()

$text_note'

var img = document.createElement('div');
function changetext(content)
{
    img = document.createElement('div');
    document.body.appendChild(img);
    img.innerHTML = '<div id=descriptions>'+content+'</div>';
    img.style.position = 'absolute';
    move();
}
function move(e)
{
    e = e || window.event
    if (e.pageX == null && e.clientX != null )
        {
            var html = document.documentElement
            var body = document.body
            e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
            e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
        }
    img.style.left = e.pageX + 15 + 'px';
    img.style.top = e.pageY + 15 + 'px';
}
function out()
{
    document.body.removeChild(img);
}
</script>

  Ответить  
 
 автор: ONYX   (06.04.2012 в 03:02)   письмо автору
 
   для: SS   (06.04.2012 в 01:42)
 

Примерный расчет
e.pageX -= (e.pageX + img.style.width > document.width?(img.style.width < e.pageX?img.style.width:e.pageX):0);
//если сумма смещения по оси Х и ширины бокса будет больше ширины окна, то уменьшаем смещение по оси Х:
1. Если ширина бокса больше смещения по оси Х то, смещение выставляем в 0 что бы бокс не ушел за экран
2. Если ширина бокса меньше смещения по оси Х, то смещаем бокс влево на эту ширину.

  Ответить  
 
 автор: SS   (06.04.2012 в 04:16)   письмо автору
 
   для: ONYX   (06.04.2012 в 03:02)
 

Я не знаю заранее ширину бокса img.style.width - макс. ширина бокса (400px) прописана в css для блока DIV, в котором выводится подсказка. Подскажите, как быть?
img.innerHTML = '<div id=descriptions>'+content+'</div>'; 

  Ответить  
 
 автор: ЯСА   (06.04.2012 в 04:25)   письмо автору
 
   для: SS   (06.04.2012 в 04:16)
 

Используйте img.offsetWidth

  Ответить  
 
 автор: SS   (06.04.2012 в 07:36)   письмо автору
 
   для: ЯСА   (06.04.2012 в 04:25)
 

Спасибо.
А как сделать задержку вывода подсказки на 0,5 сек?

  Ответить  
 
 автор: ONYX   (06.04.2012 в 09:15)   письмо автору
 
   для: SS   (06.04.2012 в 07:36)
 

setTimeout

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования