Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2015, 12:39
Аспирант
Отправить личное сообщение для yintar Посмотреть профиль Найти все сообщения от yintar
 
Регистрация: 04.08.2014
Сообщений: 42

Позиционирование блока
Всем привет.
Помогите,пожалуйста решить такую проблему:
У меня есть следующий блок(код ниже).т.е.в блоке с id="div009"( с относительной позицией) содержится блок class="grunt"(с абсолютной позицией к блоку с id="div009" ).У блока с id="div009" на background повешено изображение и при наведении мыши на div с class="grunt"(область для класса грунт задается координатами, код ниже) он становится видимым(код скрипта ниже) и соответственно накладывается на изображение которое стоит на background у блока с id="div009" .У меня на ноутбуке все накладывается идеально и в нужном месте(так как я подобрал left для своего монитора).Проблема в том,что как иолько меняется ширина окна браузера(даже незначительно) то и соответственно на других компах(с другими разрешениями мониторов) div с class="grunt" уже не накладывается на изображение блока с id="div009" в нужной мне области(так как изображение у блока с id="div009" смещается, а отступ у div с class="grunt" остается left=333px )
Я понимаю ,что мне надо при событии $(window).resize отслеживать изменение ширины окна и динамически менять отступ left.Но как я ни пытался ничего не выходит(отступ left рассчитывается неправильно).
Просьба, не пинайте ,а подскажите пожалуйста как это правильно сделать?

Код:
 <map name="pic_montag">
     <area shape="circle" coords="180,90,90"   class="grunt">
  </map>
Код:
 <div class="divSTD" style="width:100%;  margin-top:5px">
     <div id="div009" style="position: relative;">
        <div class="grunt" style="display: none; font-family: verbana; 
            position: absolute;filter:alpha(opacity=70);opacity: 0.8; top: 10.5%;
           left:333px;width: 164px;height: 164px; border-radius: 82px; 
           background: rgb(255, 255, 255);">'
             <div style="margin-top: 24px;line-height:17px; color:black;
                             font-size:12px;cursor:pointer">
                Без учета<br>особенностей грунта,<br> 
                даже самый хороший септик прослужит Вам не долго
           </div>'
        </div>
     </div>
 </div>
$('.grunt').mouseleave(function() {
           $('.grunt').hide();
                                });
 $('.grunt').mouseenter(function() {
            $('.grunt').show();
                                });

Последний раз редактировалось yintar, 23.12.2015 в 12:48.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
позиционирование блока sash003 Элементы интерфейса 1 23.10.2014 22:17
Позиционирование блока boichukvd Общие вопросы Javascript 6 08.04.2013 22:00
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Позиционирование блока по центру окна Keksman jQuery 2 21.03.2012 16:14
позиционирование блока Yurii Общие вопросы Javascript 0 26.08.2008 08:16