hAhol
-
Posts
20 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by hAhol
-
Хм..я об этом не подумал. А сейчас, закомментировав нужную часть CSS, убедился.. Большое спасибо за разъяснение, надо лучше изучить вопрос А возможно ли это как-то обойти? Ведь два других вышеозначенных браузера умудряются понять z-index в удобном мне ключе Я понимаю, что кардинальное решение проблемы - не использовать масштабирование средствами CSS и переключиться на что-то другое. И скорее всего это будет надежней, что ли. Даже если привязаться к размеру div'а. Но возможно ли обойтись "малой кровью"? ЗЫ В любом случае, поняв суть проблемы теперь я смогу решить её. Просто интересно
-
доброго всем времени суток Хочу спросить помощи, так как самостоятельно не могу решить задачку. Суть изложена в названии темы - моя цель сделать некий div ссылкой. На страничке имеется выпадающая менюшка, сделанная на jQuery и CSS. Под ней есть див с картинкой внутри. Я использую ShadowBox, в итоге код получился для конструкции такой: <div id="имя"> <a href="путь" rel="shadowbox;width=640;height=480" title="что-то"> <img src="путь" title="что-то" alt="название" class="pic"/> </a> </div> У менюшки описан z-index: 5, ввиду того что картинка обновляется скриптом и иногда возникает эффект "мерцания" этой самой менюшки. То бишь перекрывается она. Сворачивается и не всегда разворачивается обратно. Для div'а z-index не описан, а для класса pic он описан в -1 (использую для масштабирования средствами CSS - вариация на это) Проблема выглядит так: в IE8 и Опере 10.50 все работает, менюшка красивая и ссылки нажимаются да и картинки обновляются. А вот в огнелисе 3.6 не работают ссылки. Остальное без проблем. Я тут же двинулся к валидатору, однако он выдает зеленую карточку Тогда я решил поэкспериментировать с z-index у меню и картинок с div'ами. Однако в огнелисе ссылки так и не нажимаются, хотя менюшка "испортилась" морганием так же, как и в осле с оперой. Да, под неработоспособностью ссылки я имею ввиду то, что огнелис в принципе как ссылку этот объект не воспринимает. Даже если нажать правой кнопкой мыши. Для него это просто картинка. Доктайп странички: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Для ссылок в CSS описаны только цветовые параметры (посещенная и не посещенная). Еще я точно знаю, что раньше у меня в огнелисе все работало. Собственно я в нем всегда и делал (FireBug в помощь ). Потом огнелис обновился, а я подкручивал для корректного отображения в IE - и когда открыл в лисичке, то получил такую головоломку. К сожалению, я не помню на которой версии у меня точно работало. z-index у менюшки и класса pic не менялся с тех пор, как все работало в лисе. Я постарался описать максимально полно суть возникшей проблемы и все пути, что я попробовал. Буду благодарен за любую идею, заранее спасибо.
-
Утрируете, уважаемый
-
[offtopic] А разве обязательно изобретать велосипед? Можно же взять готовые решения и переделать под себя. В интернете масса свободнодоступных менюшек - от просто выпадающих до "аккордеонов" разной ориентации. [/offtopic]
-
Большое спасибо Очень помогли. Да, он умеет веб-камеры, но только по RTMP. Буду разбираться Еще раз спасибо
-
Доброго времени суток Не получается ответить на вопрос один, может подскажете.. Имеется камера, к которой доступ только по сети, благо что под админом. Все контакты с ней возможны только через ослика, так как всё завязано на ActiveX. Камера вот - http://91.151.240.240/ Получается, что ввожу логин-пароль - она проверяет, что мне можно. И если можно смотреть, то показывает. Кажется всё просто.. Меня интересует - можно ли выдрать видео-поток куда-то отдельно? Скажем вставить объектом в страничку, которая сможет открываться везде, а не только в ИЕ? Я понимаю, что тут будет небольшая запинка с рассказом камере, кто к ней подключился. Я что-то попользовал гугл, но так и не понял - возможно ли отделение видеопотока.. Просто если можно это сделать, то я буду искать как Потому при ответе "да, можно", я бы очень был благодарен паре слов о направлении поисков Моей целью является прикрутить эту камеру к другим, что у меня уже есть на одной страничке. Остальные камеры просто отдают стоп-кадры, которые я отображаю (перезагружая картинку через равные промежутки, получая видимость "живой" камеры). Разумеется, данную камеру тоже можно научить делать стоп-кадры, но к ней (в отличие от других) я имею доступ, а потому есть идея прикручивать именно видеопоток, а не стоп-кадры. Заранее спасибо
-
ShadowBox В некоторых случаях из пушки по воробьям, но данный скрипт очень хорош. ИМХО, разумеется
-
Подменить src изображений в таблице, для их обновления..
-
Добрый день всем. Подсмотрел на одной страничке скриптик: function refr() { var bk = document.getElementById("t"); if(!bk) return false; var el = bk.getElementsByTagName("img"); if(!el) return false; var ell = el.length; var d = new Date(); var par = d.getHours() + "" + d.getMinutes(); for(var i = 0; i < ell; i++) { el[i].src = el[i].src + "?par=" + par; } } var tm = setInterval("refr()", 1000); Он обновляет картинки методом замены src. Сначала обращается к таблице (первая строка, id "t"). Потом собственно к картинкам (tag "img"). А потом начинает на основе даты мотать src (обновление раз в секунду). Не смог в оригинале найти управление данным скриптом. Если пользую в таком виде, неплохо кушает процессорное время и запасы RAM. Не мог бы кто подсказать, в какую сторону копать? Я так понимаю, надобно время от времени очищать кэш.. Или ерунду собираю?
-
#myslidemenu { position: relative; z-index: 100; display: table; table-layout: auto; } Это в теле моей странички. Ссылаюсь на id div'а, в котором меню. Собственно, два последних параметра заставляют (я так думаю) быть его резиновым. А это - .jqueryslidemenu{ font: bold 12px Verdana; background: #414141; margin: 0 auto; в css файле меню самого. Класс того же самого div'а. Зачем margin, понятно
-
Спасибо, но тут "или-или". Либо автоподгонка размера с помощью "float: left" в классе этого меню, либо выравнивание по центру с помощью "margin: 0 auto". Я нашел другое решение (кажется ): в свойствах CSS я указываю менюшке по её id два параметра: "display: table; table-layout: auto;". А в CSS-файле самого меню (там все по классам) говорю "margin: 0 auto". Усе работает Если еще и у заказчика заработает, то я счастлив
-
Экспериментирование - самое главное Как правило именно там рождается истина. Или очередной велосипед :-D По теме - да, мне желательно резиновый width и по центру верхнего края экрана. Первое - из-за того, что данное меню на другом разрешении выглядит не так - расползается на две строчки (последний Folder переносится на "новую" строку). А по центру - из-за эргономики и любви к симметрии У меня там преимущественно картинки в ячейках, если не по центру (а как в случае "float: left" слева) то одна из ячеек частично перекрывается. Я понимаю, очень мало, но тем не менее. Не эстетично. Плюс заказчик тоже кривит личность...
-
Можно я здесь же спрошу про саму менюшку? Вот её css: .jqueryslidemenu{ font: bold 12px Verdana; background: #414141; min-width: 392px; width: 392px; max-width: 500px; margin:0 auto; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; } Мои изменения - min-width, max-width и значение width в описании первого класса. Мне нужно, чтоб полосочка, на которой располагается меню (первый класс её описывает, как я понимаю) автоматически изменяла ширину под содержимое, что там будет. Ну и не зависела от разрешения/размера. Как это сделать? Вместо всех width'ов можно вставить float:left, и это решает задачу, но тогда меню не по центру... И я не могу пользоваться связкой left: 50% + margin-left: -xx, так как ширина не фиксирована
-
Я не в курсе Лайтбокс и тинибокс были отклонены потому, что не могут того, что мне надо. Потому пришел к лайтвиндоу. А скорость шэдоу меня вполне устраивает, тем более она настраивается, как я понял.
-
Проблема решилась использованием ShadowBox'а. Большое спасибо за помощь
-
Да, действительно - z-index можно убрать. Я еще покопался - проблема из-за некой несовместимости данной менюшки с LightWindow. Если я удаляю строки, подключающие его файлы - все работает, менюшка там, где должна быть и работает так, как должна. Так что большое Вам спасибо, вопрос попросту меняется. Буду придумать, как их подружить. Есть идеи - это вообще возможно?
-
Большое спасибо. Меню стало сверху, но выпадающие списки отсутствуют. Как будто заданы папки (элементы Folder) но нет суб-элементов (тех, по 8 в каждой папке). И опять же - не отображаются даже стрелки около названия папок. Т.е., складывается впечатление, что браузер считает список суб-элементов отсутствующим. Хотя отдельно от моей странички - все работает (и после Вашей поправки насчет тега, валидна). Я также после опробывания Вашего совета попробовал изменить css самого меню: .jqueryslidemenu{ font: bold 12px Verdana; background: #414141; width: 392px; margin:0 auto; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; z-index: 100; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; z-index: 100; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; z-index: 100; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; z-index: 100; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; z-index: 100; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; z-index: 100; } Для изображений стрелок, элементов первого уровня и элементов всех уровней вложенности добавил "z-index: 100". Такой совет, в том числе, мелькал в блоге, где я увидел данное меню. Только там речь шла об одновременной работе двух таких менюшек. Однако мне не помогает - вложенные списки отсутствуют. Я вижу только элементы самого верхнего уровня.
-
Просто сверху. А таблица (как единственный элемент контента) под ним. Как бы я могу сделать, что меню будет наверху. Но оно не функционально - не выпадают списки с элементами папок, однако код менюшки не меняется, только игра с z-index. Все мои идеи (z-index: х, position: х) разбились о неработоспособность меню. Потому решился спросить тут.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="shortcut icon" href="images/favicon.ico"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <title>...</title> <script type="text/javascript"> function refr() { var bk = document.getElementById("t"); if(!bk) return false; var el = bk.getElementsByTagName("img"); if(!el) return false; var ell = el.length; var d = new Date(); var par = d.getHours() + "" + d.getMinutes(); for(var i = 0; i < ell; i++) { el[i].src = el[i].src + "?par=" + par; } } var tm = setInterval("refr()", 1000); </script> <style type="text/css"> .ch1 { position: absolute; left: 0%; top: 0%; width: 50%; height: 50%; z-index: 1; } .ch2 { position: absolute; left: 50%; top: 0%; width: 50%; height: 50%; z-index: 1; } .ch3 { position: absolute; left: 0%; top: 50%; width: 50%; height: 50%; z-index: 1; } .ch4 { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; z-index: 1; } #web5 { display: none; } #web6 { display: none; } #web7 { display: none; } #web8 { display: none; } A { color: #808080; } A:visited { color: #808080; } #t { position: absolute; left: 0px; top: 0px; border: 0px; } .pic { width: 100%; height: 100% border: 0px; position: absolute; left: 0px; top: 0px; z-index: -1; } </style> <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jqueryslidemenu.js"></script> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> </head> <body onload="refr();" bgcolor="#808080"> <table id="t"> <tr><td><div class="ch1"> <div id="web1"><a href="1.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation= true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div> </div> </td> <td> <div class="ch2"> <div id="web2"><a href="2.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation= true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div> </div> </td></tr> <tr><td><div class="ch3"> <div id="web3"><a href="3.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation= true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div> </div> </td> <td><div class="ch4"> <div id="web4"><a href="4.html" params="lightwindow_width=740,lightwindow_height=580,lightwindow_loading_animation= true,lightwindow_type=external" class="lightwindow" title="" caption=""><img src="" title="" alt="" class="pic"/></a></div> </div> </td></tr> </table> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.5</a></li> <li><a href="#">Sub Item 1.6</a></li> <li><a href="#">Sub Item 1.7</a></li> <li><a href="#">Sub Item 1.8</a></li> </ul> </li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> <li><a href="#">Sub Item 2.4</a></li> <li><a href="#">Sub Item 2.5</a></li> <li><a href="#">Sub Item 2.6</a></li> <li><a href="#">Sub Item 2.7</a></li> <li><a href="#">Sub Item 2.8</a></li> </ul> </li> <li><a href="#">Folder 3</a> <ul> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> <li><a href="#">Sub Item 3.6</a></li> <li><a href="#">Sub Item 3.7</a></li> <li><a href="#">Sub Item 3.8</a></li> </ul> </li> <li><a href="#">Folder 4</a> <ul> <li><a href="#">Sub Item 4.1</a></li> <li><a href="#">Sub Item 4.2</a></li> <li><a href="#">Sub Item 4.3</a></li> <li><a href="#">Sub Item 4.4</a></li> <li><a href="#">Sub Item 4.5</a></li> <li><a href="#">Sub Item 4.6</a></li> <li><a href="#">Sub Item 4.7</a></li> <li><a href="#">Sub Item 4.8</a></li> </ul> </li> <br style="clear: left" /> </div> </body> </html>
-
Приветствую. Имеется любопытное выпадающее меню на CSS/JQuery. А у меня страничка с таблицей на всю область экрана. При верстке я получаю - таблица закрывает собой меню. Если установить таблице (или её содержимому) z-index, равный скажем "-1", то я вижу меню. Но только элементы-папки. Содержимого нет (равно как и стрелочки вниз). И по наведению/клику не разворачивается (выпадает). Если же не ставить таблице/содержимому z-index, а задать его для менюшки (отдельно в стилях моей страницы либо в тексте css-файла, являющегося частью меню) скажем в значение "5", то не отображается опять же. Вопрос в том, где мне порыться, где покопать, чтоб смочь сверстать как необходимо (менюшка, полностью функциональная, сверху всего содержимого) Вот CSS моей странички: .ch1 { position: absolute; left: 0%; top: 0%; width: 50%; height: 50%; z-index: 1; } .ch2 { position: absolute; left: 50%; top: 0%; width: 50%; height: 50%; z-index: 1; } .ch3 { position: absolute; left: 0%; top: 50%; width: 50%; height: 50%; z-index: 1; } .ch4 { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; z-index: 1; } #web5 { display: none; } #web6 { display: none; } #web7 { display: none; } #web8 { display: none; } A { color: #808080; } A:visited { color: #808080; } #t { position: absolute; left: 0px; top: 0px; border: 0px; } .pic { width: 100%; height: 100% border: 0px; position: absolute; left: 0px; top: 0px; z-index: -1; } Первые 4 класса (chX) - для задания размеров ячеек таблицы (их 4, таблица 2х2); t - это собственно сама таблица; pic - для масштабирования изображений под размер/разрешение браузера/монитора (цепляется за размер div'а). В таком виде я вижу менюшку только доли секунды, пока грузится страничка. Потом таблица полностью перекрывает её. Валидаторы ругаются на менюшку - "End tag for ... omitted, but OMITTAG NO was specified", всего две ошибки таких - на тег li и тег ul. Есть еще ошибки на скрипт LightWindow, теги caption. Но это всё стандартно . Больше ошибок нет. Доктайп - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Отдельно от моей странички менюшка работает, абсолютно так, как мне нужно. А вот объединить не получается. Заранее спасибо.