Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Библиотека javascript эффектов (https://javascript.ru/forum/project/8701-biblioteka-javascript-ehffektov.html)

HelpeR 09.04.2010 10:10

Библиотека javascript эффектов
 
Здравствуйте всем!
Представляю свой сайт посвященный javascript эффектам.
Если после просмотра сайта будут замечания или дополнения всегда рад выслушать вас. Так же можете дать совет по созданию какого нибудь полезного эффекта. Он будет создан и включен в сайт. Полное описание сайта и эффектов в блоге

x-yuri 09.04.2010 11:47

MySelect, не закрывается при щелчке за пределами, последняя Опера

PeaceCoder 09.04.2010 11:50

PhotoLine. Перепутал механизм стрелок. Стрелка вправо должна крутить рисунки не в право а влево... и наоборот.

HelpeR 09.04.2010 11:52

x-yuri, На счет этого тоже думал как это можно было бы реализовать. Ведь нельзя же вмешиваться в js код другого сайта. Т.е. если установить document.onclick напирмер, то получится что я заменил обработчик события, когда у него стоял другой.

HelpeR 09.04.2010 11:53

PeaceCoder, на счет стрелок мне кажется что они крутят в правильном направлении

Skipp 09.04.2010 11:56

Цитата:

Сообщение от HelpeR (Сообщение 50735)
PeaceCoder, на счет стрелок мне кажется что они крутят в правильном направлении

Кажется!=)

HelpeR 09.04.2010 11:57

Skipp, Ведь это же логично при клике на право ожидать что лента начнет пролистываться в правую сторону а не в левую

Skipp 09.04.2010 12:00

Обычно посетитель думает иначе=) "а что же там с той стороны находится"

x-yuri 09.04.2010 12:00

Цитата:

Сообщение от HelpeR
x-yuri, На счет этого тоже думал как это можно было бы реализовать. Ведь нельзя же вмешиваться в js код другого сайта

можно временно добавлять свой обработчик, не забывая сообщать о событиях старому обработчику

x-yuri 09.04.2010 12:03

Цитата:

Сообщение от HelpeR
Skipp, Ведь это же логично при клике на право ожидать что лента начнет пролистываться в правую сторону а не в левую

Логично... нелогично... как минимум три человека ожидали другого поведения. Кроме того, не видно, что стрелка неактивна

HelpeR 09.04.2010 12:04

Каким образом можно узнать какой на данных момент является обработчик события если он добавлен через addEventListener. Ведь это же пока не реализовано.

HelpeR 09.04.2010 12:05

Цитата:

Сообщение от x-yuri (Сообщение 50741)
Логично... нелогично... как минимум три человека ожидали другого поведения. Кроме того, не видно, что стрелка неактивна

Спасибо за замечание не подумал. Сейчас исправлю.

x-yuri 09.04.2010 12:09

можно onclick перехватывать, в смысле не через addEventListener

HelpeR 09.04.2010 12:13

идею понял... но можно наводящий пример?

Kolyaj 09.04.2010 12:14

Цитата:

Сообщение от HelpeR
Каким образом можно узнать какой на данных момент является обработчик события если он добавлен через addEventListener.

Вот и свой обработчик нужно добавлять через addEventListener.

HelpeR 09.04.2010 12:15

Цитата:

Сообщение от Kolyaj (Сообщение 50749)
Вот и свой обработчик нужно добавлять через addEventListener.

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

Kolyaj 09.04.2010 12:21

С чего бы ему заменяться? addEventListener же, а не setEventListener.

HelpeR 09.04.2010 12:28

да странно, я почему то всегда думал что обработчик заменится. Да век живи век учись ))) спасибо Kolyaj
<div id="s">asdf</div>

var s = document.getElementById('s');
s.addEventListener('click', function() { alert('one'); }, false);
s.addEventListener('click', function() { alert('two'); }, false);

x-yuri 09.04.2010 14:00

да пожалуй вариант Kolyaj проще и лучше. Причем можно и не убирать свой обработчик

HelpeR 11.04.2010 16:56

Залил изменения!
PhotoLine - лента крутится в нужных направлениях и также добавил не активность стрелок при достижении конца ленты.
MySelect - открытые списки исчезают при клики в любом месте документа. (в блоге оставлял вопрос на счет реагирования на клавиатуру). Задаю его здесь тоже.
Многие пользователи переключаются на select через клавишу tab, но т.к. этот select явяется div, то он не может получить фокус, пытался сделать это же с невидимым input, все так же без полезно. Если у кого есть какие идеи подскажите пожалуйста. Заранее спасибо!

B~Vladi 11.04.2010 18:10

Убери javascript:lenta.next(); из ссылок.

Select лишен многого стандартного функционала - выбор стрелками и по первым буквам. Да и вообще, если писать формы, не надо забывать о фокусе.
Цитата:

Сообщение от HelpeR
Если у кого есть какие идеи подскажите пожалуйста. Заранее спасибо!

Использование подставных инпутов добавит только гемороя. Можно ещё использовать ссылки. Но я бы сделал свою поддержку фокуса - анализируешь DOM на расположение элементов и перехватываешь TAB. Думаю идея ясна.

Octane 11.04.2010 19:01

http://designformasters.info/stuff/s...example-1.html ;)

HelpeR 12.04.2010 21:56

спасибо!
position:absolute и left: -999px; мне очень понравилось )))
Очень хороший и легкий подход. Но мне теперь придется добить свой с отлавливанием таб. Хотя я использую
Цитата:

The following elements can have focus and are tab stops by default: a, BODY, button, frame, iframe, img, input, isIndex, object, select, textArea.
The following elements can have focus by default but are not tab stops. These elements can be set as tab stops by setting the tabIndex property to a positive integer. applet, div, frameSet, span, table, td.

HelpeR 13.04.2010 20:58

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

HelpeR 24.04.2010 01:28

Изменил дизайн и включил некоторые доработки. Добавил английский язык, тексты которого еще будут исправляться. Если кто скачивал эффекты, скачайте пожалуйста еще раз исправленную версию. В эффекте prompt теперь png рисунки, т.к. при появлении эффекта часть текста могла перекрываться.

Gozar 24.04.2010 11:48

HelpeR,
Это не библиотека, это жалкая пародия на jQuery. Либо добавьте туда ещё эффектов 20 либо не называйте это библиотекой.

HelpeR 24.04.2010 14:32

Gozar, она будет расти постепенно! Нечего сразу не бывает!

Riim 25.04.2010 18:03

Цитата:

Сообщение от Gozar
не называйте это библиотекой

фреймворк и библиотека - разные вещи. Любая хрень с 2+ функциями имеет право называться библиотекой.

upd: да и вообще неплохо сделано.

Gozar 25.04.2010 20:32

Цитата:

Сообщение от Riim (Сообщение 53003)
фреймворк и библиотека - разные вещи. Любая хрень с 2+ функциями имеет право называться библиотекой.

upd: да и вообще неплохо сделано.

Ну тогда у меня каждый сайт это библиотека. :)

не могу никак согласиться что сделано неплохо:
<script language="javascript">
    var ln_photos = ['1.jpg','2.jpg','3.jpg']; // названия рисунков ленты
    var ln_big_photos = ['1b.jpg','2b.jpg','3b.jpg']; // название больших рисунков
    var pic_dir = '/img/'; // директория хранения рисунков
    var ln_titles = ['Описание1','Описание2','Описание3']; //Описание к фотографиям
    var ln_all_pics = 3; // кол-во отображаемых рисунков на ленте
    var ln_speed = 0; // скорость прокрутки фотографий (0-макс)
    var ln_step = 5; // кол-во пикселей прокрутки. Так же влияет на скорость прокрутки
    var ln_bgcolor = '#fff000'; // цвет фона фотоленты
    var ln_border = '0px'; // настройка рамки фотоленты(толщина, вид и цвет)
    var ln_left_src = './img/arrow_left.jpg'; // левая стрелка (указывать полный путь)
    var ln_left_src_disable = './img/arrow_left_disable.jpg'; // левая стрелки (не активная)
    var ln_left_arrow_width = 40; // ширина левой стрелки
    var ln_left_arrow_height = 50; // высота левой стрелки
    var ln_right_src = './img/arrow_right.jpg'; // правая стрелка
    var ln_right_src_disable = './img/arrow_right_disable.jpg'; // правая стрелка (не активная)
    var ln_right_arrow_width = 40; // ширина правой стрелки
    var ln_right_arrow_height = 50; // высота правой стрелки
    var pic_width = 250; // ширина рисунков
    var pic_height = 188; // высота рисунков
    var pic_padding = 2; // padding рисунка
    var pic_border = '1px solid #ff0000'; // рамка рисунка
    var pic_margin = 4; // margin рисунка

/* Настройка описаний фотографий */

    var desc_paddingBot = 3; // нижний padding текста описания
    var desc_font = 'Tahoma'; // шрифт текста описания
    var desc_font_size = 12; // размер шрифта текста описания
    var desc_color = '#120081'; // цвет шрифта текста описания
    var desc_align = 'center'; // выравнивание текста описания

/* Подключение эффекта Blackout */

    var Blackout = 1; // подключение эффекта HR_Blackout 1-да 0-нет
    var Blackout_src = 'Blackout.js'; // полный путь к файлу Blackout.js

/* Если вы подключили эффект Blackout, то настройте его параметры */

    var tit_align = 'left'; // выравнивание описания рисунка
    var tit_font = 'Tahoma'; // шрифт описания
    var tit_font_size = 12; // размер шрифта описания
    var tit_font_color = '#666666'; // цвет шрифта описания
    var main_bgcolor = '#333333'; // цвет главного затемняющегося фона
    var loading_img = 'loading.gif'; // полный путь к рисунку загрузки
    var close_img = 'x.jpg'; // полный путь к рисунку закрытия
</script>

можно подумать что сейчас 10 лет назад. Зачем столько глобальных переменных?

HelpeR 25.04.2010 20:37

Gozar, я постарался дать пользователю максимум настроек для оформления эффекта под его дизайн. А не знающий никогда не полезет в скрипт изменять его для своего дизайна. У вас имеется другой вариант, как преподнести это для пользователя?

Gozar 25.04.2010 20:47

HelpeR,
все что вы говорите понятно, но зачем использовать, я даже считать не буду просто предположу, 20 переменных вместо одной(1)?

ps: размер скрипта слишком большой

HelpeR 27.04.2010 10:50

Цитата:

Сообщение от Gozar (Сообщение 53038)
20 переменных вместо одной(1)?

Не подскажи те с этим моментом?

Kolyaj 27.04.2010 10:55

var config = {
    a1: 1,
    a2: 2,
    a3: 3
};

HelpeR 27.04.2010 11:18

это то ясно. Я подумал, может какой нибудь особый вариант. Не вижу различий между моим подходом и созданием объекта для удобства пользователя?

Gozar 27.04.2010 11:25

HelpeR,
В данном случае пользователь я и мне неудобно отслеживать весь мусор, которым ваш подход загаживает моё пространство имён. Не нравиться критика юзайте сами, а не предлагайте мне "гамно"

HelpeR 27.04.2010 11:44

Gozar, я всегда положительно отношусь к критике и вам спасибо за подсказку на счет засорения пространства имен. Теперь понял разницу. Буду менять!

Aleko 28.04.2010 10:53

HelpeR, да и объект тут не при чем. Фигово конечно что столько глобалок, но вопрос не о том даже, а о том что в каждой строке объявляется отдельная переменная. Можно прописать команду var один раз а не 20:

var a=1,
b=2,
c=3,
d=...


И насчет сайта - не открывайте страницу улучшений в новом окне - это бесит.

Riim 28.04.2010 11:19

Надо как-то так:
EffectName.options = {op1: 5, op2: 10};


или так:
EffectName.init('elemId', {op1: 5, op2: 10});


еще:
EffectName.prototype.defaultOptions = {op1: 5, op2: 10};
EffectName.init('elemId', {op2: 500});// options перезаписывает ключи в defaultOptions

HelpeR 15.05.2010 19:30

Добавил сжатые версии js файлов для скачки. Кстати кто не знает http://shrinksafe.dojotoolkit.org/ думаю самый лучший онлайн сервис по сжатию js файлов

Aleko 15.05.2010 21:30

HelpeR, http://compressorrater.thruhere.net/ , ага.


Часовой пояс GMT +3, время: 16:25.