Comments on: Использование Scriptaculous для изменения прозрачности элементов web страницы

By: Anthony

Anthony — Fri, 22 Aug 2008 07:15:32 +0000

попробуй установить в свойствах элементов position:absolute и z-index больше, чем у твоего прозрачного div'а

By: Владимир

Владимир — Sun, 13 Jan 2008 16:18:17 +0000

Я тоже немного поэкспериментировал. Похоже, что установка прозрачности контейнера автоматически распространяется на все вложенные элементы (по-идее так и должно быть). Если внешний элемент невидимый, то и его содержимое должно быть невидимым. Иначе чтобы сделать невидимым абзац:

111122221111

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

В любом случае, эту проблему можно обойти. Например, изменив разметку страницы.

By: Hot Ice

Hot Ice — Sun, 13 Jan 2008 09:04:24 +0000

Большое спасибо за помощь!
Я так пробовал, но у меня не вышло. Видимо в прошлый раз где-то допустил ошибку.

Еще один вопрос. можно ли сделать так, чтобы на внутренние элементы, которые являются содержимым этих div'ов не наследовались свойства прозрачности?
Я пробовал для них прописать в таблице CSS

#innerdiv { height: 220px; filter:alpha(opacity=100) !important; -moz-opacity: 1.0 !important; -khtml-opacity: 1.0 !important; opacity: 1.0 !important; }

Но ничего не выходит.
Так же я пробовал для них прописать обработчики:

new Effect.Opacity('innerdiv', {duration:2.5, from:0.0, to:1.0});

- и это тоже не помогло.

By: Владимир

Владимир — Sat, 12 Jan 2008 18:10:58 +0000

Вы четыре раза установили обработчик функции window.onload

Т.е. вы объявили 4 различных функции и установили их как обработчики.

Представьте, что произойдет, если выполнить такой код:
m = 1;
m = 2;
m = 3;
Чему будет равно m? Правильно, 3.
Точно также после исполнения вашего кода в качестве обработчика будет использоваться последняя функция

window.onload = function() {
new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8});
}

И выполняться будет только она.
Исправить ситуацию не сложно. Просто разместите все обработчики внутри одной функции:

window.onload = function() {
new Effect.Opacity('div', {duration:3, from:0.0, to:0.9});
new Effect.Opacity('div2', {duration:3, from:0.0, to:0.8});
new Effect.Opacity('div3', {duration:3, from:0.0, to:0.8});
new Effect.Opacity('div4', {duration:3, from:0.0, to:0.8});
}

P.S. Если нужно изменить последовательность выполнения эффектов почитайте Управление эффектами (Scriptaculous)

By: Hot Ice

Hot Ice — Fri, 11 Jan 2008 22:43:27 +0000

*new Effect.Opacity('

By: Hot Ice

Hot Ice — Fri, 11 Jan 2008 22:42:16 +0000

Сорри, допустил ошибку:

new Effect.Opacity$('

Но исправление на

new Effect.Opacity$('

проблему не решает.

By: Hot Ice

Hot Ice — Fri, 11 Jan 2008 22:20:11 +0000

Привет. Спасибо за статью.
На ее основе я решил сверстать макет своего дизайна на сайте. И у меня возникла проблема. Мне необходимо, чтобы при загрузке страницы 3 div'a уменьшали свою прозрачность с о до 80% и один div до 90% в течении 3 секунд. Я использовал файлы из приложенного архива. В testEffects.js заменил содержимое на:

window.onload = function() { new Effect.Opacity$('div', {duration:3, from:0.0, to:0.9}); }
window.onload = function() { new Effect.Opacity$('div2', {duration:3, from:0.0, to:0.8}); } window.onload = function() { new Effect.Opacity$('div3', {duration:3, from:0.0, to:0.8}); }
window.onload = function() { new Effect.Opacity$('div4', {duration:3, from:0.0, to:0.8}); }

И при этом срабатывает только последний div4. Что я делаю не так?

Пересмотрел много статей по aculo, но ничего не нашел.
Единственное что-то похожее - это функция $():
allNodes = $("firstDiv", "secondDiv"); for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML); }
Только как ее использовать - не знаю.

Заранее спасибо за помощь.