Быстрая смена стилей с сохранением в cookies

[Alecto]

используется быстрое переключение мобильного стиля.
код следующий

Код: Выделить всё

<!-- IF S_QUICK_STYLE_OPTIONS -->

   <form action="{S_QUICK_STYLE_ACTION}" method="post">

      <div id="quick-style" align="left">

         <label for="prime_quick_style">
            <span style="font-size:0.9em;vertical-align:middle;">{L_PRIME_QUICK_STYLE}: </span>
            <select name="prime_quick_style" id="prime_quick_style" style="font-size:0.9em; width: 100px;" onchange="this.form.submit();">{S_QUICK_STYLE_OPTIONS}</select>
         </label>

   </form>

<!-- ENDIF -->

выглядит так


суть проблемы:
1 - форма прячется, когда курсор выходит за ее пределы.
2 - при выборе 2 и 3 стилей в раскрывающемся списке форма исчезает, выбор стиля не происходит (сам разворачиваю список мышкой, затем с клавиатуры выбираю стиль и жму enter, но всем то это не объяснишь...)

что-бы хотелось:
можно ли заменить выпадающий список и действия с ним на обычный список?
понимаю, что копать надо в сторону замены select, но вот на что? и как как поменять обработчик onchange="this.form.submit();"
если можно обойтись малой кровью - помогите пожалуйста.

[Алг]

если можно обойтись малой кровью - помогите пожалуйста.

думаю, можно, только пару вопросов, ибо такой мод не ставила

1 - форма прячется, когда курсор выходит за ее пределы.

термин форма вы употребляете по отношению к окошку с комбобоксом? форма в html обозначает нечто другое. Возможно к окошку привязано событие onmouseout, которое прячет блок с окошком

можно ли заменить выпадающий список и действия с ним на обычный список?

конечно можно, дайте ему атрибут size="N"где N - количество ваших стилей

понимаю, что копать надо в сторону замены select, но вот на что? и как как поменять обработчик onchange="this.form.submit();"

select заменять ни на что не надо, обработчик меняется так onchange="my_function();" и в my_function пишете нужный вам код
и хотела бы вживую посмотреть этот комбо, но на вашем форуме не нашла

[Alecto]

термин форма вы употребляете по отношению к окошку с комбобоксом?

вы меня запутали :)
это DIV с идентификатором, ниже его полный код:

Код: Выделить всё

<!-- IF S_QUICK_STYLE_OPTIONS -->

   <form action="{S_QUICK_STYLE_ACTION}" method="post">

      <div id="quick-style" align="left">

         <label for="prime_quick_style">
            <span style="font-size:0.9em;vertical-align:middle;">{L_PRIME_QUICK_STYLE}: </span>
            <select name="prime_quick_style" id="prime_quick_style" style="font-size:0.9em; width: 100px;" onchange="this.form.submit();">{S_QUICK_STYLE_OPTIONS}</select>
         </label>

   </form>

<!-- ENDIF -->

класс css

Код: Выделить всё

#quick-style {
	height:31px;
	width:160px;
	padding-top:10px;
	padding-left:15px;
	margin-left:-160px;
	border-radius: 10px 0;
	-moz-border-radius: 10px 0;
	-khtml-border-radius: 10px 0;
	-webkit-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px;
}

и хотела бы вживую посмотреть этот комбо, но на вашем форуме не нашла

доступен после входа на сайт. тестовый логин-пароль у вас есть.
если что - напомню в скайп.

[Алг]

я заходила с тестовым аккаунтом, но не увидела, к сожалению

это DIV с идентификатором, ниже его полный код:

Код: Выделить всё

<div id="quick-style" align="left">...

внутри дива нет событий, но они могут быть навешаны в другом месте, в js файле, например
Сделайте поиск "quick-style" по всему проекту и найдётся привязанное событие.
Кроме того в приведённом коде я не увидела закрывающего тега </div>
Если его нет, это тоже может быть причиной кривой работы окна, даже скорее всего

[Alecto]

я заходила с тестовым аккаунтом, но не увидела, к сожалению

кнопка слева от Добро пожаловать, дорогой друг..., DIV появляется при наведении на кнопку

но они могут быть навешаны в другом месте, в js файле

нет. весь код работы с блоком приведен выше.

Кроме того в приведённом коде я не увидела закрывающего тега </div>

да, была ошибка. поправил, но ничего не изменилось - по прежнему блок исчезает во время выбора стиля.

Добавлено спустя 7 минут 12 секунд:
вот еще что обнаружил:
описанная выше проблема фиксируется только в файрфоксе.
в опере и хроме все работает абсолютно корректно.

[Alecto]

Спасибо Алг, с ее помощью проблему локализовали и решили.

может кому пригодится...

старый код анимации блока (не сохранился) обновил до новой версии:

Код: Выделить всё

			function() {jQuery('div', this).stop(true, false).delay(200).slideDown(200);},
			function() {jQuery('div', this).stop(true, false).fadeOut(200);}

кроме того, ошибку с FF последней версии (аварийное завершение работы программы) вызывал эффект jQuery (версии 1.10.2) slideUp, который был заменен на fadeOut, после чего ошибка исчезла.

[Алг]

Ну логичнее с fadeOut использовать fadeIn конечно. И кнопку можно будет не нажимать
старый код у меня сохранился
найти

Код: Выделить всё

function () {jQuery('div', this).stop(true, true).delay(200).slideDown(200);},
			function () {  jQuery('div', this).stop(true, true).slideUp(200); }

заменить на

Код: Выделить всё

           function () {jQuery('div', this).stop(true, false).delay(200).fadeIn(200); },
			function () { jQuery('div', this).stop(true, false).fadeOut(200); }
  

главная фишка не в замене slideUp на fadeOut, а в том, что для ФФ надо заменить stop(true, true) на stop(true, false), иначе происходит крах браузера ФФ