Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: вывести блок

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
alexiy
Отправлено: 27 Марта, 2013 - 09:32:04
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
есть HTML
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <ul>
  3.    <li><a href = "#" level = "1">1</a></li>
  4.    <li><a href = "#" level = "2">2</a></li>
  5.    <li><a href = "#" level = "3">3</a></li>
  6.    <li><a href = "#" level = "4">4</a></li>
  7.    <li><a href = "#" level = "1">5</a></li>
  8. </ul>
  9.  

как средствами JQery сделать так, чтобы при наведении на какой либо li в случае если level =1 с правой стороны списка вылетал простой div блок и в нем было бы написано скажем "DONE!"? в момента когда мышка не находится на этом блоке он пропадал бы?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 09:39:46
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. // ...
  3.  
  4.    $('li:has(a[level="1"])').hover(function(){
  5.  
  6.           // Показываем блок
  7.  
  8.       }, function(){
  9.  
  10.           // Скрываем блок
  11.  
  12.    });
  13.  
  14. // ...
  15.  


Скрытый блок должен быть предварительно спозиционерован.
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 09:45:24
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777 а как именно происходит само действие показа и скрытия блока?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 09:49:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var myBlock = $('#myBlock');
  3.  
  4. $('li:has(a[level="1"])').hover(function(){
  5.  
  6.      myBlock.fadeIn(200);
  7.  
  8.   }, function(){
  9.  
  10.      myBlock.fadeOut(200);
  11.  
  12. });
  13.  
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 09:50:09
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777 но при загрузке страницы я так понимаю тот блок который хочу показывать нужно делать ему hide()?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 09:51:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
И весь jQ должен быть в:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(e) {
  3.     // jQ code
  4. });
  5.  

(Добавление)
alexiy пишет:
но при загрузке страницы я так понимаю тот блок который хочу показывать нужно делать ему hide()?

CODE (css):
скопировать код в буфер обмена
  1.  
  2. #myBlock {
  3.     display:none;
  4. }
  5.  
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 09:54:10
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777 ну эт понятно, просто иногда у меня этот блок при загрузке страницы появляется и потом пропадает...
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 09:54:56
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Потому его надо уже в css скрыть.
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 10:14:57
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777 в принципе все понятно, но как задать блоку нужное позиционирование, чтобы он отоброжался рядом с Li?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 11:10:30
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
CODE (css):
скопировать код в буфер обмена
  1.  
  2. #wrapp {
  3.         display:inline-block;
  4.         vertical-align:top;
  5.         position:relative;
  6.         }
  7.  
  8.  
  9. UL {
  10.         border:1px solid #000;
  11.         overflow:hidden;
  12.         display:inline-block;
  13.         vertical-align:top;
  14.         }
  15.  
  16. UL, LI {
  17.         margin:0;
  18.         padding:0;
  19.         list-style:none;
  20.         }
  21.        
  22. LI { float:left; }
  23.        
  24.        
  25. A { display:block; padding:5px 10px; }
  26.  
  27.        
  28. #myBlock {
  29.         position:absolute;
  30.         top:0;
  31.         left:100%;
  32.         border:1px solid #000;
  33.         padding:5px 10px;
  34.         background:#FFC6C6;
  35.         }
  36.        
  37.  


CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="wrapp">
  3.   <ul>
  4.    <li><a href="#" level="1">1</a></li>
  5.    <li><a href="#" level="2">2</a></li>
  6.    <li><a href="#" level="3">3</a></li>
  7.    <li><a href="#" level="4">4</a></li>
  8.    <li><a href="#" level="1">5</a></li>
  9.   </ul>
  10.   <div id="myBlock">Текст</div>
  11. </div>
  12.  
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 11:35:53
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777
сделал примерно так:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.                                 $('li').hover(function(){
  4.                                         //show menu
  5.                                         var pos = $(this).position();
  6.                                         var posX = pos.left + $(this).width();
  7.                                         var posY = pos.top;
  8.                                         if($(this).find('a').attr('level') == 1){
  9.                                                 $('#slide_menu').offset({left: posX, top: posY});
  10.                                                 $('#slide_menu').show();
  11.                                                 //alert('left: ' + posX + ' '+ 'top: ' + posY);
  12.                                         }
  13.                                 }, function(){
  14.                                         //hide menu
  15.                                         $('#slide_menu').hide();
  16.                                 });
  17.                         });
  18.  

но если наводить и уводить мышку, то элемент все время уходит левее и ниже, до бесконечности, в чем проблема?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 11:41:07
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
alexiy пишет:
в чем проблема?

Слушайте, я Вам даже стили описал.
Берите, разбирайте.
И не надо пытаться делать средствами JS то, что можно сделать с помощью, преднозначенным для этого, инструментом.
В данном случае CSS.

alexiy пишет:
pos = $(this).position();

Метод position преднозначен для элементов, у которых задано правило position отличное от static.
Видимо, спутали с offset().

И что это ?
alexiy пишет:
$(this).find('a').attr('level') == 1

Я же Вам написал JS выше:
CODE (javascript):
скопировать код в буфер обмена
  1. $('li:has(a[level="1"])').hover(function(){

li:has(a[level="1"]) - выбрать все элементы LI в которых есть ссылки с атрибутом level co значнием 1.

Вот, рабочий пример:
http://jsfiddle[dot]net/rR5Kh/4/
 
 Top
alexiy
Отправлено: 27 Марта, 2013 - 12:12:47
Post Id



Посетитель


Покинул форум
Сообщений всего: 483
Дата рег-ции: Янв. 2011  


Помог: 6 раз(а)
armancho7777777 фишка в том, что выпадающий элемент не должен пропадать если на него навести мышкой или увести курсор с li
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 12:36:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Думайте.
Подскажу только что Вам понадобится.

CODE (javascript):
скопировать код в буфер обмена
  1. setTimeout();
  2. clearTimeout();

(Добавление)
alexiy пишет:
или увести курсор с li

Это-то зачем?
Как он будет пояляться, если его не скрыть ?
 
 Top
armancho7777777 Супермодератор
Отправлено: 27 Марта, 2013 - 15:29:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Ан нет, вру alexiy.
Не совсем понял задачу.
Перечитал посты Ваши, по ходу Вам это надо:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('li:has(a[level="1"])').mouseenter(function(){
  3.     $('#myBlock').fadeIn(200, function(){
  4.         $(this).mouseleave(function(){
  5.             $(this).fadeOut(200);
  6.         });    
  7.     });
  8. });
  9.  
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB