Всплывающий див над другим дивом « JavaScript

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 9:26

Вот допустим есть у нас простой html:


<div id="box" >box</div>
<div id="popup">popup info</div>

Как сделать на jquery, чтобы когда наводишь курсор на box появлялся popup прямо над боксом. Может плагин есть какой готовый, посоветуйте.

Sinkler

Сообщения: 7958 Репутация: N Группа: в ухо

3 ноября 2010 г. 9:50, спустя 23 минуты 50 секунд


                box = $('#box');
                popup = $('#popup');
                box.bind('mouseover', function() {
                    popup.css('display', 'block');
                });
                box.bind('mouseleave', function() {
                    popup.css('display', 'none');
                });

Спустя 39 сек.

ну и попап расположи как тебе надо

Спустя 33 сек.

возможно, тебе mouseleave надо будет поставить не на бокс, а на попап

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 10:29, спустя 38 минут 46 секунд

делаю вот так, но див popup не меняет свою позицию:


$(document).ready(function() 
{
    var box = $('#box');
    var popup = $('#popup');
    var top = box.css('top');
    var left = box.css('left');


    box.bind('mouseover', function() 
    {
        popup.css('display', 'block');
        popup.css('position', 'absolute');
        popup.css('top', top);
        popup.css('left', left);
            
    });
    
    
    box.bind('mouseleave', function() 
    {
        popup.css('display', 'none');
    });
                
   
});

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 10:39, спустя 10 минут 28 секунд

вроде разобрался - если через offset брать координаты, то пашет

Sinkler

Сообщения: 7958 Репутация: N Группа: в ухо

3 ноября 2010 г. 10:46, спустя 6 минут 55 секунд

ok

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 11:22, спустя 35 минут 56 секунд

теперь другая проблема вылезла: если в див поместить какой-то текст, то после того как попап вылез он начинает, то исчезать, то появляться непонятно почему. Толи при наведении курсора на текст, то еще чего-то. В чем может быть проблема?

залил видео:
http://tinypic.com/r/34jdi7a/7


$(document).ready(function() 
{
    var box = $('#box');
    var popup = $('#popup');
    //var pos = box.offset();


    $('.gameInfo').bind('mouseover', function() 
    {
        var pos = $(this).offset();
        
        popup.show(100);
        popup.css('position', 'absolute');
        popup.css('top', pos.top);
        popup.css('left', pos.left);
    });
    
    
    popup.bind('mouseout', function() 
    {
        popup.hide(100);
    });

    
});

technobulka

Сообщения: 4540 Репутация: N Группа: Джедаи

3 ноября 2010 г. 11:31, спустя 9 минут 8 секунд

$(document).ready(function()
{
    var box = $('#box');
    var popup = $('#popup');
    //var pos = box.offset();
 

    $('.gameInfo').bind('mouseover', function()
    {
        var pos = $(this).offset();
       
        popup.show(100);
        popup.css('position', 'absolute');
        popup.css('top', pos.top);
        popup.css('left', pos.left);
    });
   
   
popup.bind('mouseover', function() {
        $(this).css('display','block');
    }).bind('mouseout', function() {
        $(this).hide(100);
});
 
   
});

при наведении на бокс у тебя появляется попап и курсор уже на нем, а не на боксе, по этому срабатывает скрытие…

Высокоуровневое абстрактное говно

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 12:13, спустя 41 минуту 54 секунды

но почему срабатывает скрытие? я же указывал скрывать, когда popup.bind('mouseout'
с вашим кодом тоже то исчезает, то появляется :(

technobulka

Сообщения: 4540 Репутация: N Группа: Джедаи

3 ноября 2010 г. 11:50, спустя 23 часа 37 минут 2 секунды

а попап один, или для каждого наведения свой? если для каждого свой, то лучше

<div id="box">
  <div class="popup"></div>
</div>

так всегда при наведении на бокс курсор будет на боксе, не зависимо от всплывшего попапа…

Высокоуровневое абстрактное говно

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 12:05, спустя 14 минут 22 секунды

попап один, меняется лишь его положение. Пробывал z-index: 1000 попап диву, чтобы он всегда поверх всего был, не помогло - то исчезает, то появляется в некоторых случаях

technobulka

Сообщения: 4540 Репутация: N Группа: Джедаи

3 ноября 2010 г. 12:07, спустя 2 минуты 25 секунд

ссылку ф студию, де эт у тебя… или весь исходник))

Высокоуровневое абстрактное говно

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 12:16, спустя 8 минут 58 секунд

залил сюда http://smck8196.coolvds.com/

smackthat

Сообщения: 464 Репутация: N Группа: Адекваты

3 ноября 2010 г. 12:24, спустя 8 минут 32 секунды