Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

0 Пользователей и 1 Гость просматривают эту тему.
  • 12 Ответов
  • 3564 Просмотров
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Здравствуйте. На сайте http://crimson-land.ru/ справа от верхнего меню есть "лупа", кнопка поиска, нажав на которую откроется mod_search.
Для этой кнопки-лупы я не могу подобрать class / id (выяснить его имя), который бы задавал ей стиль в то время, как отображается mod_search. Привожу кусок кода:

Цитировать
<script type="text/javascript">
function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
    document.getElementById(id).style.display = 'block';
  } else {
    document.getElementById(id).style.display = 'none';
  }
  return false;
}
</script>

<div id="ts" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>
<div id="container" style="display:none;"><jdoc:include type="modules" name="search" /></div>
В CSS файле:
Цитировать
#ts{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
#не известный id{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}
Бкз проблем получается сделать hover, но это не совсем то, что нужно т.к. как только курсор отводится в сторону от "лупы", стиль пропадает.
Хочу, чтобы в результате выглядело примерно как на картинке:

Какие есть варианты?
Спасибо.
Помог? Поставь(те) плюс в репутацию.
*

wfedin

  • Завсегдатай
  • 1273
  • 102 / 0
Re: Класс для элемента с событием onclick
« Ответ #1 : 09.07.2011, 01:23:09 »
Не нето  ^-^ Упс уже готово.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #2 : 09.07.2011, 01:27:13 »
Да, я привел фрагмент выше. А "#не известный id" (в CSS файле он пока обозначен как #ts.active) такого содержания:
Цитировать
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
Помог? Поставь(те) плюс в репутацию.
*

varX

  • Живу я здесь
  • 2467
  • 141 / 5
  • разработка компонентов
Re: Класс для элемента с событием onclick
« Ответ #3 : 09.07.2011, 01:28:44 »
Код: javascript
function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = 'block';
document.getElementById('ts').style.background = 'url(./images/sh.gif) #F9F9F9 no-repeat center';
} else {
document.getElementById(id).style.display = 'none';
document.getElementById('ts').style.background = 'url("./images/s.png") no-repeat scroll center center transparent';
}
return false;
}
Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #4 : 09.07.2011, 01:49:00 »
lcd25, спасибо. При 'block' отображается цвет фона #F9F9F9, а sh.gif - нет (хотя изображение присутствует на сервере). При первом клике в фоне по-прежнему отображается s.png, а при повторных (без перезагрузки страницы) - ничего.
Еще нужно добавить для фона при клике:
Цитировать
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
Нужно будет указать по аналогии?
Код
document.getElementById('ts').style.background = 'border-radius:10px 10px 0 0';'-moz-border-radius:10px 10px 0 0';'-webkit-border-radius:10px 10px 0 0';
?
Это все нельзя скрыть в CSS? Чтобы после клика отображался какой-нибудь #tsh, а при повторном - снова #ts. Спасибо.
Помог? Поставь(те) плюс в репутацию.
*

Lex

  • Завсегдатай
  • 1615
  • 274 / 1
Re: Класс для элемента с событием onclick
« Ответ #5 : 09.07.2011, 01:52:36 »
document.getElementById(id).setAttribute("class", "myClass");
Жизнь заставила учиться.
В личке на вопросы не отвечаю.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #6 : 09.07.2011, 02:21:13 »
document.getElementById(id).setAttribute("class", "myClass");
Сделал, но вышло как-то не так:
Код
<script type="text/javascript">
function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
    document.getElementById(id).style.display = 'block';
document.getElementById(id).setAttribute("class", "tsh");
  } else {
    document.getElementById(id).style.display = 'none';
  }
  return false;
}
</script>
Код
.ts{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
.tsh{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}
Помог? Поставь(те) плюс в репутацию.
*

varX

  • Живу я здесь
  • 2467
  • 141 / 5
  • разработка компонентов
Re: Класс для элемента с событием onclick
« Ответ #7 : 09.07.2011, 02:42:08 »
Если нужен класс:
Код: javascript
function showhide(id) {
var a=document.getElementById(id);
if(a.style.display=='none') {
a.style.display = 'block';
a.className ='tsh';
} else {
a.style.display = 'none';
a.className ='ts';
}
return false;
}
Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #8 : 09.07.2011, 02:59:26 »
Спасибо. К сожалению, снова не вышло. Думаю из-за присутствия класса в div'е:
Код
<div class="ts" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>
Создается впечатление, что ts и tsh в таком случаю применяются не к самой "лупе", а модулю поиска, у которого свой id
Код
div.search {
margin-right:5px;
height:30px;
float:right;
z-index:9999999;
background:#F9F9F9;
width:250px;
-moz-border-radius: 10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;border-radius:10px 0 10px 10px;
-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
z-index:9999999;
}
Помог? Поставь(те) плюс в репутацию.
*

varX

  • Живу я здесь
  • 2467
  • 141 / 5
  • разработка компонентов
Re: Класс для элемента с событием onclick
« Ответ #9 : 09.07.2011, 03:07:00 »
Конечно, у вас кнопка другой элемент совсем. Добавьте к ней id ('btn'), например, и обращайтесь к нему.
Код: javascript
function showhide(id) {
var a=document.getElementById(id);
var b=document.getElementById('btn');
if(a.style.display=='none') {
a.style.display = 'block';
b.className ='tsh';
} else {
a.style.display = 'none';
b.className ='sh';
}
return false;
}
Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #10 : 09.07.2011, 04:00:59 »
Для элемента
Код: html4strict
<div id="btn" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>
до клика на выходе получается так:
Код: html4strict
<div id="btn" onclick="showhide('container')">
После первого клика:
Код: html4strict
<div id="btn" onclick="showhide('container')" class="tsh">
После второго:
Код: html4strict
<div id="btn" onclick="showhide('container')" class="ts">
при javascript'е
Код: javascript
function showhide(id) {
var a=document.getElementById(id);
var b=document.getElementById('btn');
if(a.style.display=='none') {
a.style.display = 'block';
b.className ='tsh';
} else {
a.style.display = 'none';
b.className ='ts';
}
return false;
}и стилях:
Код: css
.ts, #btn{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
.tsh{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}
т.е. нужно каким-то образом после 1 и последующих нажатий по кнопке избавиться от id="btn"?
Помог? Поставь(те) плюс в репутацию.
*

varX

  • Живу я здесь
  • 2467
  • 141 / 5
  • разработка компонентов
Re: Класс для элемента с событием onclick
« Ответ #11 : 09.07.2011, 12:02:30 »
А зачем #btn в таблицу стилей то засовывать?
Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.
*

slepoy

  • Давно я тут
  • 753
  • 24 / 0
  • Тотальная шизофазия
Re: Класс для элемента с событием onclick
« Ответ #12 : 09.07.2011, 13:20:03 »
Спасибо. Удалил #btn из css-файла. Заработало. Но до первого клика фон, который отображается под кнопкой (кнопка - это прозрачное изображение 1х1px, а фон и представляет из себя изображение лупы), не отображается.
Возможно тогда стоит переделать саму кнопку - сделать не прозрачной, а лупой. Но как добавить замену самой кнопки при первом клике?
« Последнее редактирование: 09.07.2011, 14:12:52 от slepoy »
Помог? Поставь(те) плюс в репутацию.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Выбрать 3 элемента через 3

Автор Forgiving

Ответов: 7
Просмотров: 1215
Последний ответ 21.05.2020, 12:00:43
от sivers
Как сделать отступ от абсолютного элемента?

Автор wishlight

Ответов: 6
Просмотров: 2820
Последний ответ 20.04.2019, 00:06:28
от dmitry_stas
Вывод элемента :after в одной строке с последним словом

Автор lalalag

Ответов: 3
Просмотров: 1631
Последний ответ 15.06.2017, 16:38:35
от Shustry
Как поменять CSS класс кнопки «Подробнее»в шаблоне?

Автор shrek_01

Ответов: 2
Просмотров: 2354
Последний ответ 23.12.2016, 20:03:43
от shrek_01
[FAQ] CSS-класс страницы

Автор Orion

Ответов: 87
Просмотров: 66862
Последний ответ 07.09.2016, 13:00:21
от Shustry