hAhol
-
Posts
20 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by hAhol
-
-
доброго всем времени суток
Хочу спросить помощи, так как самостоятельно не могу решить задачку. Суть изложена в названии темы - моя цель сделать некий 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">Отдельно от моей странички менюшка работает, абсолютно так, как мне нужно. А вот объединить не получается. Заранее спасибо.
div как ссылка в firefox 3.6
in HTML Coding
Posted · Edited by hAhol
Хм..я об этом не подумал. А сейчас, закомментировав нужную часть CSS, убедился.. Большое спасибо за разъяснение, надо лучше изучить вопрос
А возможно ли это как-то обойти? Ведь два других вышеозначенных браузера умудряются понять z-index в удобном мне ключе Я понимаю, что кардинальное решение проблемы - не использовать масштабирование средствами CSS и переключиться на что-то другое. И скорее всего это будет надежней, что ли. Даже если привязаться к размеру div'а. Но возможно ли обойтись "малой кровью"?
ЗЫ В любом случае, поняв суть проблемы теперь я смогу решить её. Просто интересно