Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> не знаю что делать, может кто-нибудь будет давать задания 
:(
    Опции темы
Рыжий
Дата 6.6.2005, 20:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Тема в разделе PHP идет с большим успехом, предлагаю организовать и в JS smile
Хочу изучить Java Script, может поможете? Давайте задания, мы будем писать скрипты и т.д.
Пока что у меня знания базовые, начнем с чего-нибедь легкого, постепенно поднимаясь и совершенствуясь smile Ну вы меня поняли smile
Жду вопрос №1

М
 

Модератор Aliance: за каждое решение заданного мною вопроса буду ставить плюс тому, чье решение на мой вкус сочту наиболее правельным :thumbs-up


Это сообщение отредактировал(а) Aliance - 7.6.2005, 00:41
PM MAIL ICQ   Вверх
Aliance
Дата 6.6.2005, 21:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Начнем с того, что половина знаний - это теория. ИМХО, лучшее обучение - с книжкой. Хорошую литературу мы уже обсуждали.
Затем, подумай, кто сюда будет писать: в большинстве своем новички, чтобы получить быстро и бесплатно нужный им скрипт. Но новички наврятли смогут разумно оценить сложность скрипта => он может вполне не попасть под категорию ‘легкий’, с коего ты решил начать.
Я не сторониик такой темы, т.к. вместо того, чтобы сделать упорядоченный раздел (вопрос-ответ) мы "сольем" несколько таких тем в одну (эту) => получится хаос.

Но раз ты так хочешь и пока эта тема будет жить, давай попробуем.

Напиши мне сценарий для rollover изображений.
Условия:
  • удобочитаемый вид кода
  • сценарий основан на стандартах W3C DOM
  • код работает в моделях IE & W3C DOM (совсестим с браузерами, минимум 5ой версии)

Так же каждая существенная строчка (т.е. строчку } не нужно) должна быть закомментирована - описание строчки.

Желаю удачи smile
PM MAIL WWW ICQ Skype   Вверх
Рыжий
Дата 6.6.2005, 22:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



ну давай не будем топить корабль, который еще не вышел в море smile

Посмотри в разделе PHP эта тема довольно хорошо прижилась smile

Вот накатал немного, можешь глянуть на rollover:

Код

<html>

<head>
  <title></title>
<script language="JavaScript">
<!--
/* Всем привет! Вот ответ на вопрос №1 от Aliance:
   Во-первых указываем что сейчас пойдет JS код это я сделал выше.
   закоментируем весь мой код, для того чтоы Плохие браузеры (без поддержки JS) его не показывали.
*/
function rull_over()      //это я создал функцию =)
     {
          document.images[0].src='2.jpg';  /*
                                             Обращаемся к нашему рисунку,
                                             Т.К. он самый первый в появлении на странице,
                                             его индекс будет 0. Дальше пишем, что значение
                                             src нужно заменить на '2.jpg'
                                           */
     }
function roll_up()        //это я создаю вторую функцию =)
     {
          document.images[0].src='1.jpg';   //В принципе действия аналогичные функции Э1
     }
//-->
</script>

</head>
<body>
<img src="1.jpg" onmouseover="rull_over();" onmouseout="roll_up();">
<!-- ну а здесь я просто
     использую эти 2 функции по назначению. onmouseover - это событие, когда на картинку мы наводим
     мышкой, а onmouseout - когда мы забираем мышку.
     Если будут вопросы - пишите на PM =)))
-->
</body>

</html>


PS Aliance молодец, не стал сразу грузить smile
Добавлено @ 22:30
Цитата(Aliance @ 6.6.2005, 20:09)
ценарий основан на стандартах W3C DOM

А как можно проверить?? Я конечно извеняюсь но smile просто не сталкивался еще с этим.

Это сообщение отредактировал(а) PHP-Script - 6.6.2005, 22:28
PM MAIL ICQ   Вверх
Aliance
Дата 6.6.2005, 22:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Хотелось бы функции, которые можно использовать при любом модернизации.

Подсказываю, если мне нужно так:
Код

<img src="test.jpg">
<img src="1.jpg" onmouseover="rull_over()" onmouseout="roll_up()">

То твоя функция не сработает как ожидалось smile
PM MAIL WWW ICQ Skype   Вверх
Рыжий
Дата 6.6.2005, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



не проблема, щас исправим smile
PM MAIL ICQ   Вверх
Aliance
Дата 6.6.2005, 22:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(PHP @ 6.6.2005, 23:27)
А как можно проверить??

Т.е. использовать современные методы.
Скажем, вместо document.all[] - document.getElementById() и т.п.
http://www.w3.org
PM MAIL WWW ICQ Skype   Вверх
Рыжий
Дата 6.6.2005, 22:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Все - исправил, смотри:

Код

<html>

<head>
  <title></title>
<script language="JavaScript">
<!--
/* Всем привет! Вот ответ на вопрос №1 от Aliance:
   Во-первых указываем что сейчас пойдет JS код это я сделал выше.
   закоментируем весь мой код, для того чтоы Плохие браузеры (без поддержки JS) его не показывали.
*/
function rull_over(new_img)      //это я создал функцию =)
     {
          document.images[0].src=new_img;  /*
                                             Обращаемся к нашему рисунку,
                                             Т.К. он самый первый в появлении на странице,
                                             его индекс будет 0. Дальше пишем, что значение
                                             src нужно заменить на 'новый рисунок, который
                                             мы передаем в параметрах к функции
                                           */
     }
function roll_up(old_img)        //это я создаю вторую функцию =)
     {
          document.images[0].src=old_img;   //В принципе действия аналогичные функции №1
     }
//-->
</script>

</head>
<body>
<img src="1.jpg" onmouseover="rull_over('2.jpg');" onmouseout="roll_up('1.jpg');">
<!-- ну а здесь я просто
     использую эти 2 функции по назначению. onmouseover - это событие, когда на картинку мы наводим
     мышкой, а onmouseout - когда мы забираем мышку.
     Если будут вопросы - пишите на PM =)))
-->
</body>

</html>




PM MAIL ICQ   Вверх
Aliance
Дата 6.6.2005, 22:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Не совсем понял. Сделай еще так:
вторым аргументом передай глобальную ссылку This - она укажет на объект. А потом меняй this.src = new_src.
Ведь document.images[0] - меняет src только у первой картинки, что не есть гут.
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 6.6.2005, 23:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



А что, вроде неплохо, присоединюсь, мой вариант.
Код

<html>
 <head>
  <title>Rollover</title>
  <script type="text/javascript" language="javascript">
  <!--
      // Первый аргумент - ID объекта
      // Второй аргумент - новый "сорс" картинки.
      function set_over(object, new_src)
      {
           // Делаем указатель на объект
           var el = document.getElementById(object);
           // Присваеваем новый "сорс" у картинки.
           el.src = new_src;
      }
   // --> 
  </script>
</head>
<body>
<img src="6.jpg" />
<br />
<img src="6.jpg" id="1" onmouseover="set_over(this.id, 'elf.gif')" onmouseout="set_over(this.id, '6.jpg')"/>
</body>
</html>

Альтернативный вариант, определенно заслуживающий внимания.
Код

<img src="image.gif" name="myImage"  defaultSrc="image.gif" selectedSrc="image-s.gif" onMouseOut="this.src = this.getAttribute('defaultSrc');" onMouseOver="this.src = this.getAttribute('selectedSrc');">

Однако стандарт XHTML его считает неправильным.

Исправил со всеми поправками, для дальнейшего просмотра.

Это сообщение отредактировал(а) Opik - 7.6.2005, 00:58
PM MAIL Skype   Вверх
Aliance
Дата 6.6.2005, 23:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Opr @ 7.6.2005, 00:30)
Однако как тут со стандартами - не знаю.

XHTML не прокатит.

Вариант Opr намного лучше.
Теперь, думаю, все. Вот минусы последнего (лучшего) варианта:
  • нет предзагрузки картинок
  • переменныя el объявлена как глобальная

PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 6.6.2005, 23:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
Цитата
переменныя el объявлена как глобальная

а как правильно?
Код

      function set_over(object, new_src)
      {
           // Делаем указатель на объект
           var el;
           el = document.getElementById(object);
           // Присваеваем новый "сорс" у картинки.
           el.src = new_src;
      }

?
PM MAIL Skype   Вверх
Aliance
Дата 6.6.2005, 23:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Зачем же столько извратов smile Зри в корень:
Код

var el = document.getElementById(object);

PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 6.6.2005, 23:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
ок, хотел так... но всё же.. smile) значит правильно понял, что делаем далее?
PM MAIL Skype   Вверх
Aliance
Дата 6.6.2005, 23:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Opr @ 7.6.2005, 00:47)
что делаем далее

скажем, скрытие текста.
Задача:
иммется надпись Скрыть, и текст внизу. Оба в своих дивах. При нажатии на надпись - текст скривается, а надпись меняется на показать. При нажатии снова - все наоборот smile
Условия:
  • использование div`ов
  • использование методов W3C или других совместимых
  • быстрота работы

PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
Код

<html>
 <head>
  <title>Show/Hide</title>
  <script type="text/javascript" language="javascript">
  <!--
      // Первый аргумент - указатель на слой, который нужно СКРЫТЬ
      // Второй аргумент - указатель на слой, который нужно ПОКАЗАТЬ
      function shide(sobject, hobject)
      {
           // Делаем указатели на объекты
           var hel = document.getElementById(hobject);
           var sel = document.getElementById(sobject);
           // Показываем слой
           hel.style.display = '';
           // Скрываем слой
           sel.style.display = 'none';
      }
   // --> 
  </script>
</head>
<body>
<div id="show" >
<a href="#" onclick="shide('show', 'hide')">Показать</a>
1
</div>
<div id="hide" style="display: none">
<a href="#" onclick="shide('hide', 'show')">Скрыть</a>
2
</div>
</body>
</html>

Однако ещё можно через свойство visible вроде, только вот не помню, как точно, и что лучше тоже не знаю, и пользуясь случаем, спрашиваю, что лучше: display, или visible?

Это сообщение отредактировал(а) Opr - 7.6.2005, 00:11
PM MAIL Skype   Вверх
Рыжий
Дата 7.6.2005, 00:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Aliance ого, ну ты быстро, после такого легенького сразу на div'ы перешел smile


Opr уменя нет шансов smile
PM MAIL ICQ   Вверх
Aliance
Дата 7.6.2005, 00:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Opr @ 7.6.2005, 01:09)
пользуясь случаем, спрашиваю, что лучше: display, или visible?

Правельно так:
Код

elem.style.visibility = "visible | hidden";

Правельно / неправельно - зависит от задачи. Отличия в том, что visibility оставляет место для блока, т.е. как бы блок становится прозрачным, а display - убирает. В большинстве случаев (лично я точно) используется display.

Не очень разумно. По крайней мере с моей точки зрения.
Подскажу алгоритм. Имеем:
Код

<div id="name">Скрыть</div>
<div id="text" style="display: block">ляляляляля</div>


Код

// вызывается при onclick на div id="name"
if (div id-text = block) {
   div id-text = none;
   div id-name вставить текст = "Показать";
} else {
   div id-text = block;
   div id-name вставить текст = "Скрыть";
}

PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



PHP-Script
я тоже немного знаю, верней знаю только то, с чем сталкивался... а это не так много. + форум перечитал smile))
Добавлено @ 00:25
Aliance
Цитата
Не очень разумно. По крайней мере с моей точки зрения

А с моей - универсальней.
PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 00:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Opr @ 7.6.2005, 01:24)
А с моей - универсальней.

Чем же? У тебя вон сколько блоков, а можно все сократить до двух =)
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Цитата
У тебя вон сколько блоков

2 smile
Цитата
а можно все сократить до двух

PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 00:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Кстати, кому не терпится - задание номер три. Я думал чтоже задать, и вспомнил такую фразу:
Цитата(PHP @ 6.6.2005, 21:47)
Хочу изучить Java Script

Соответственно нужно продвигаться от азов к вершинам. Азы в JavaScript`е это строки. С ними и будет связано следующее задание:

Имеется такое:
Код

var bigString = "vingrad";

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

итог записать так:
Код

var str1 = .....;
var str2 = .....;
var str3 = .....;
alert("Один: "+str1+"\n\nДва: "+str2+"\n\nТри: "+str3);

Добавлено @ 00:38
Opr
sorry smile это называется сонный маразм smile
Но у тебя текст 1 и текст 2 разный. А даже если и сделать его одинаковым - то при его большом объеме - html код будет весит вдвое больше smile
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
Цитата
Но у тебя текст 1 и текст 2 разный

не вижу смысла его делать одинаковым.
PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 00:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Ой, даже так:
текст №1 - вообще должен быть пустым. А сам текст должен быть в тексте №2. вот. так будет правельнее smile
все...ушел спать...а то еще какого-нибудь бреда нанесу smile
Добавлено @ 00:44
Кстати, ты наверное не корректно понял задачу. Смотри на моем сайте решение мое, в новостях ссылка скрыть
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Что-то я третье задание не понял, по-моему ты что то перемутил с описанием, перечитай пож-та.
PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 00:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Вырезать часть строки.
Даю подсказку - методы substring(), slice() и substr()
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
Цитата
Ой, даже так:
текст №1 - вообще должен быть пустым. А сам текст должен быть в тексте №2. вот. так будет правельнее 
все...ушел спать...а то еще какого-нибудь бреда нанесу

вот в этом и удобство, у тебя он должен быть заведомо пустой, у меня же - может быть и нет, т.е есть выбор показа/скрытия.
PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 00:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



А смысл в скрытии тогда? Ты пишешь например:
Цитата

Я хочу вам сообщить, что я выйграл в лотерею и купил смотреть список

При нажатии на ссылку смотреть список - блок со списком покупок станет видимым. Те же, кому все равно на то, что я купил и не хотят тратить место - не открывают его :-) имхо так smile
PM MAIL WWW ICQ Skype   Вверх
Opik
Дата 7.6.2005, 00:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Aliance
повторю - задачу перечитай третью.
Добавлено @ 00:51
Цитата
А смысл в скрытии тогда

а если я хочу сделать красиво? т.е добавлю, например картинку. А вдруг она мне где то не нужна?
PM MAIL Skype   Вверх
Рыжий
Дата 7.6.2005, 00:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



во превых, сейчас ночь и без 100 грамм 3 задачу не поймешь smile
Во вторых Aliance ну в принципе можеш и написать комментарии, а еще лучше - входные и выходные данные ко всему

В третьих Opr ты что себе ник смменил?? smile
PM MAIL ICQ   Вверх
Opik
Дата 7.6.2005, 01:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



PHP-Script
Я подправил пост с первым решением, подправил чутка.
Про третью задачу: думаю что Aliance ошибся немного в её изложении, из-за
Цитата
сейчас ночь
. и утром исправит сиё положение smile.
Цитата
В третьих Opr ты что себе ник смменил??

Я давно уже везде Opik, лишь на Винграде оставался Opr'ом. Да и сайт мой: www.opik.ru smile
PM MAIL Skype   Вверх
Sardar
Дата 7.6.2005, 02:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Задание по интересней smile

Имеем список наименований, пусть это будут ссылки в скролируемом слое в три столбика. Скролируемый слой это окошко, ставим на релативную позицию и адаём стиль overflow: auto если кто не знает smile

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

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

Код по алгоритму ничем не оличаеться от второго задания Aliance, но на этот раз у нас должен быть полностью маштабируемый код, так как:
  • элементов в окошке может быть сколь угодно
  • каждый элемент несёт на себе (пока в аттрибутах) описание, т.е. показываемый слой подсказки генерим "на лету"
  • подсказка может содержать html разметку

Ршение покажу чуть позже smile

Следующим шагом будет добавление чекбоксов к элементам и выбор. Затем все выбранные элементы (не забываем что это не input'ы а ссылки или span'ы smile ) будем забивать в форму и отсылать на сервер.

Затем мы научимся подгружать элементы для окошка из XML файла(который будем генерить на сервере, но на этом не обостряемся). Интерактивной подзагрузки не будет, просто открываем страницу, ждём пока придёт весть XML, даём юзеру выбрать.

Последний штрих: переписываем весь код в нормальный обьектный вид. Запускаем, смотрим smile

Где это может применяться? Где угодно, это множественный выбор, например список товаров или писем в почтовом ящике показать можем. С выбранными можно сделать определённое действие(сравнить, удалить и т.п.)

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Opik
Дата 7.6.2005, 03:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Sardar
а ты покажи как они хранятся хотя бы. А то немного непонятно.
PM MAIL Skype   Вверх
Aliance
Дата 7.6.2005, 10:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137





Цитата(Sardar @ 7.6.2005, 03:58)
были выше развивают "теоретические" навыки, но не имеют практического прямого смысла.

Я их всех использовал у себя :-) Это мелочи жизни, без которых нет дизайнерской задумки, так что тут ты не прав smile Ведь большинство проектов включают себя и менно такой JS, а не сложные вещи smile Повторю - большинство... smile
PM MAIL WWW ICQ Skype   Вверх
o.s.a.
Дата 7.6.2005, 17:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



Я тоже хочу присоединиться, но за таким как Opik мне никак не угнаться.
Только закончил писать голосование на ПХП в аналогичной данному топику теме.
JS тоже хочу изучать.

Sardar - очень интересно, но задание на вид очень объемное, а следовательно непонятное.
Цитата
Имеем список наименований, пусть это будут ссылки в скролируемом слое в три столбика. Скролируемый слой это окошко, ставим на релативную позицию и адаём стиль overflow: auto если кто не знает smile

Можно немного по-подробнее об этом (как сделать).



--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Sardar
Дата 7.6.2005, 22:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Подсказка:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">

.description {
  position: relative;
  width: 140px;
  height: 250px;
  background-color: #f0eff9;
  overflow: auto;
  border: 1px solid navy;
}

.container {
  position: relative;
  float: left; 
  overflow: auto;
  width: 200px;
  height: 250px;
  border: 1px solid navy;
  background-color: #f0eff9;
}

.container .content {
  display: block;
  clear: both;
  margin: 3px 10px 1px 10px;
  padding-left: 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 16px;
  font-weight: bold;
  color: #323a0a;
}
.container .content:hover {
  margin-left: 8px;
  border-left: 2px solid #733109;
  color: #736509; 
}

.text {
  float: left;
  width: 60%;
  font-family: Verdana;
  font-size: 14px;
  color: #2b0a50;
}
</style>
</head>

<body>
<div class="text">
Вот пример скролируемого окошка. Содержимое для простоты будет в один ряд.
Внутрь такого окошка можно положить что угодно, в нашем случае это будут ссылки
с именами участников. Почему ссылки? Потому что не нужно париться с onmouseover
что бы сделать выделение при наводе мышкой, нам поможет псевдо класс
<b>hover</b> у ссылок.
</div>


<div class="container">
<a class="content" href="http://vingrad.ru/@Opik" title="Профиль пользователя Opik">Opik</a>
<a class="content" href="http://vingrad.ru/@o.s.a" title="Профиль пользователя o.s.a">o.s.a</a>
<a class="content" href="http://vingrad.ru/@Aliance" title="Профиль пользователя Aliance">Aliance</a>
<a class="content" href="http://vingrad.ru/@PHP-Script" title="Профиль пользователя PHP-Script">PHP-Script</a>
<a class="content" href="http://vingrad.ru/@Akina" title="Профиль пользователя Akina">Akina</a>
<a class="content" href="http://vingrad.ru/@Sardar" title="Профиль пользователя Sardar">Sardar</a>
<a class="content" href="http://vingrad.ru/@Anton Saburov" title="Профиль пользователя Anton Saburov">Anton Saburov</a>
<a class="content" href="http://vingrad.ru/@Wowa" title="Профиль пользователя Wowa">Wowa</a>
<a class="content" href="http://vingrad.ru/@sergej.z" title="Профиль пользователя sergej.z">sergej.z</a>
<a class="content" href="http://vingrad.ru/@oleg1973" title="Профиль пользователя oleg1973">oleg1973</a>
<a class="content" href="http://vingrad.ru/@Cheba" title="Профиль пользователя Cheba">Cheba</a>
<a class="content" href="http://vingrad.ru/@Caramel" title="Профиль пользователя Caramel">Caramel</a>
<a class="content" href="http://vingrad.ru/@Red Dragon" title="Профиль пользователя Red Dragon">Red Dragon</a>
<a class="content" href="http://vingrad.ru/@Good Boy" title="Профиль пользователя Good Boy">Good Boy</a>
</div>
<!-- help/description window -->
<div class="description"></div>
</body>
</html>

Сверстал за 5 минут, потому в мозилле глючит, слой с подсказкой ведёт себя так как будто он на абсолютной позиции. Это явно бред со стороны ящерообразной smile
Это что бы вы могли представить что есть что, потом покажу нормальную вёрстку и мой вариант кода. Подсказку можете хранить на ваш выбор, либо в аттрибутах тега либо массивом в JS. В любом случае вёрстка подсказки должна генериться скриптом, никаких заранее отпечатанных скрытых слоёв.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 7.6.2005, 22:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(o @ 7.6.2005, 18:02)
задание на вид очень объемное, а следовательно непонятное

Почему, почему следовательно. Ничего пободного. Объемное неравно сложное. Кроме того, не нужно пугаться сложных заданий.

Это сообщение отредактировал(а) Aliance - 7.6.2005, 22:51
PM MAIL WWW ICQ Skype   Вверх
Рыжий
Дата 7.6.2005, 23:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



хм, я тут подумал - предлагаю например opik'y выкладывать код скажем к себе на сайт ну или
Sardar'у на PM отправить, ато как только видишь готовое решение - глаза невольно вникают в код а руки тянуться к копировать/ вставить:hehe

Это сообщение отредактировал(а) PHP-Script - 7.6.2005, 23:47
PM MAIL ICQ   Вверх
Opik
Дата 8.6.2005, 01:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



PHP-Script
o.s.a.
вы меня извините конечно smile
Sardar
Т.е подсказка "Профиль пользователя Opik"
должна грузится в <div class="description"></div>? или я опять что то не понял?
PM MAIL Skype   Вверх
Sardar
Дата 8.6.2005, 02:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Opik пусть будет так(т.е. аттрибут title). Важна идея генерации слоя с контентом и его показа. Естественно что при втором показе мы слой уже не генерим, а показываем старый.

Opik не ищи сложности, задачка пока очень простая, а где инфу брать - это не важно. Мы в будущем хотим содежимое окошка из XML файла брать, там у нас будет спец тег для этого smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
o.s.a.
Дата 8.6.2005, 04:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



Код

<a class="content" href="http://vingrad.ru/@Good Boy" title="Профиль пользователя Good Boy">Good Boy</a>

здесь уже есть подсказка (title). правильно? Но почему она не отображается тогда в браузере когда курсор нах-ся над ссылкой?

А в <div class="description"></div> (т.е. во 2-ое окошко) должна идти более подробная инфа, чем
title="Профиль пользователя Good Boy". Правильно я понял???


--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Opik
Дата 8.6.2005, 09:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Sardar
просто мне не понять, какую именно инфу показывать...smile))
PM MAIL Skype   Вверх
Sardar
Дата 8.6.2005, 11:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Видать не ясно пояснил, звиняюсь smile
В моей вёрстке видим два слоя. В первом у нас инфа (ссылкии с чем угодно), во втором должно появиться описание каждой ссылки. Все запускаем какой нибудь инсталятор, кликаем по опциям, смотрим как (зачастую) справа появляються описания каждой опции. У нас для этого слой description, там появляеться описание в любом удобном для вас виде.

Само описание идёт аттрибутом opisanie. Другими словами для теста сделаем пока на аттрибутах, а потом... в прочем не будем забегать вперёд, а то и так не ясно... smile

Кратко: в каждом теге а есть аттрибут opisanie. Содержимое аттрибута нужно показать в слое с className="description" (это слой контейнер), для ваших слоёв придумайте свои классы. Для генерации контента в целях обучения будем пользоваться методами DOM, т.е. никаких innerHTML. Потом когда поймёте механизм (смысл которого: теги не есть текст, а обьекты), перейдём к innerHTML для простоты.

Завтра выкладываю подсказку если не решите. Честно, работы ровно на 5 минут, мы только начали, а уже столько вопросов smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Рыжий
Дата 8.6.2005, 13:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Цитата(Sardar @ 8.6.2005, 10:25)
Завтра выкладываю подсказку если не решите.

НЕт нет не надо, подсказок достаточно - если уж совсем не сможем решить - попросим, а так пока не надо, вот я например почему не решаю?? - Да потому что у меня щас дел по горло - ухожу из дома в 9 приходу в 6 да еще и домашнее задание(я на англ дополнительно хожу - не дай Бог вам решать то что я делаю...) ну и т.д. Просто времени достаточно нету чтобы сесть и все написать, возможно завтра сделаю(ну или седня вечером smile )
PM MAIL ICQ   Вверх
o.s.a.
Дата 8.6.2005, 16:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



Может я чего-то не понимаю
Цитата
в каждом теге а есть аттрибут opisanie

тег а:
Код

<a class="content" href="http://vingrad.ru/@Opik" title="Профиль пользователя Opik">Opik</a>

есть аттрибуты class, href и title, т.е. то, что в title, должно быть выведено в
контент description, да? Или же в description писать любое описание, свойственное каждому юзеру?


--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Sardar
Дата 9.6.2005, 00:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



PHP-Script, OK, спешить не будем. Я тоже сейчас занят, экзамены smile
o.s.a. вот код:
Код
<a
  class="content"
  href="http://vingrad.ru/@Opik"
  title="Профиль пользователя Opik"
  opisanie="%D0%9D%D0%B0%D1%88%20%D0%B1%D0%B3%D0%B0%D0%B2%D1%8B%D0%B9%20%3Cb%3EOpik%3C%2Fb%3E%2C%20%3Cspan%20style%3D%22color%3A%20red%22%3E%D1%83%D0%B3%D0%B0%20%D1%82%D0%BE%D0%B2%D0%B0%D0%B3%D0%B8%D1%89%D0%B8%3C%2Fspan%3E!!!">Opik</a>


В аттрибуте opisanie лежит текст подсказки. Для простоты это encodeURIComponent закодированная строка.
Для справки: encodeURIComponent кодирует текст в UTF-8 (в JS строки в юникоде), а затем в url. Потому на русские симвлы кодируютьса парами %HH%HH. Раскодируеться это без проблем decodeURIComponent.

Достаём текст из аттрибута. Создаём если надо слой, применяем стили и т.п. Для простоты юзаем innerHTML что бы вставить контент, так как парсить текст не имеет смысла. Но от DOM не отмажетесь когда будем брать всю инфу из XML smile Показываем слой при наводе мышки на линк, скрываем если мышь убрали.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Opik
Дата 9.6.2005, 00:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Sardar
А стандарты ругаться будут smile
тут юзать onmouseover нужно?))) Хотя ты говорил нет, по другому я не знаю.
PM MAIL Skype   Вверх
Sardar
Дата 9.6.2005, 00:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(Opik @ 8.6.2005, 23:26)
А стандарты ругаться будут

Это ещё почему?
Цитата(Opik @ 8.6.2005, 23:26)
тут юзать onmouseover нужно?

Да, или есть ещё предложения? smile
В принципе если дико извратиться, то можно заюзать CSS, видел игрушку написанную полностью на стилях smile Правда в нашем случае по моему не прокатит, верстальщики-вирутозы могут проявить мастерство smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Opik
Дата 9.6.2005, 00:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Sardar
аля неизвестный параметр, проверено XHTML 1.0 Strict
PM MAIL Skype   Вверх
Sardar
Дата 9.6.2005, 01:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(Opik @ 8.6.2005, 23:50)
аля неизвестный параметр, проверено XHTML 1.0 Strict

Я же сказал это временно! Поясняю ещё раз: смысл задания - генерация контента. А где вы будете брать инфу, это уже ваша фантазия. В любом случае после мы будем брать инфу из XML. Другими словами: забей на валидатор, на этой стадии мир не увидит твой код.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Opik
Дата 9.6.2005, 03:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Sardar
onmouseover там на каждом линке сделать смогу... и будет тип-топ... или реально одним управится? а ля el.className el.tagName мож ещё что там есть? просто не знаю smile
PM MAIL Skype   Вверх
Opik
Дата 13.6.2005, 16:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: 1
Всего: 55



Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">

.description {
  position: relative;
  width: 140px;
  height: 250px;
  background-color: #f0eff9;
  overflow: auto;
  border: 1px solid navy;
}

.container {
  position: relative;
  float: left; 
  overflow: auto;
  width: 200px;
  height: 250px;
  border: 1px solid navy;
  background-color: #f0eff9;
}

.container .content {
  display: block;
  clear: both;
  margin: 3px 10px 1px 10px;
  padding-left: 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 16px;
  font-weight: bold;
  color: #323a0a;
}
.container .content:hover {
  margin-left: 8px;
  border-left: 2px solid #733109;
  color: #736509; 
}

.text {
  float: left;
  width: 60%;
  font-family: Verdana;
  font-size: 14px;
  color: #2b0a50;
}
</style>
<script>
  function showHelp(hint)
  {
      var el = document.getElementById("description");
      el.innerHTML = hint.title;
  }
  function c2()
  {
      var el = document.getElementById("description");
      el.innerHTML = '';
  }
</script>
</head>

<body>
<div class="text">
Вот пример скролируемого окошка. Содержимое для простоты будет в один ряд.
Внутрь такого окошка можно положить что угодно, в нашем случае это будут ссылки
с именами участников. Почему ссылки? Потому что не нужно париться с onmouseover
что бы сделать выделение при наводе мышкой, нам поможет псевдо класс
<b>hover</b> у ссылок.
</div>


<div class="container"> 
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();" href="http://vingrad.ru/@Opik" title="Профиль пользователя Opik">Opik</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@o.s.a" title="Профиль пользователя o.s.a">o.s.a</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Aliance" title="Профиль пользователя Aliance">Aliance</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@PHP-Script" title="Профиль пользователя PHP-Script">PHP-Script</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Akina" title="Профиль пользователя Akina">Akina</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Sardar" title="Профиль пользователя Sardar">Sardar</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Anton Saburov" title="Профиль пользователя Anton Saburov">Anton Saburov</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Wowa" title="Профиль пользователя Wowa">Wowa</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@sergej.z" title="Профиль пользователя sergej.z">sergej.z</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@oleg1973" title="Профиль пользователя oleg1973">oleg1973</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Cheba" title="Профиль пользователя Cheba">Cheba</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Caramel" title="Профиль пользователя Caramel">Caramel</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Red Dragon" title="Профиль пользователя Red Dragon">Red Dragon</a>
<a class="content" onmouseover="showHelp(this);" onmouseout="c2();"  href="http://vingrad.ru/@Good Boy" title="Профиль пользователя Good Boy">Good Boy</a>
</div>
<!-- help/description window -->
<div class="description" id="description"></div>
</body>
</html>


Это сообщение отредактировал(а) Opik - 13.6.2005, 22:14
PM MAIL Skype   Вверх
o.s.a.
Дата 13.6.2005, 16:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



Opik я тоже до такого же додумался, только выкладывать почему-то не стал smile
А зачем
Код

function c2()



--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Рыжий
Дата 13.6.2005, 17:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Цитата(o @ 13.6.2005, 15:57)
А зачем

После того как забираем мышку - слой очищается...
PM MAIL ICQ   Вверх
o.s.a.
Дата 13.6.2005, 17:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



точно, что-то я впарился smile
а теперь что, Sardar?


--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Рыжий
Дата 13.6.2005, 17:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



У меня был такой вариант, послал сардару на PM но без функции onout()
Может не получил - молчит как партизан.
Кстати вот код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">
.description {
  position: relative;
  width: 140px;
  height: 250px;
  background-color: #f0eff9;
  overflow: auto;
  border: 1px solid navy;
}
.container {
  position: relative;
  float: left;
  overflow: auto;
  width: 200px;
  height: 250px;
  border: 1px solid navy;
  background-color: #f0eff9;
}
.container .content {
  display: block;
  clear: both;
  margin: 3px 10px 1px 10px;
  padding-left: 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 16px;
  font-weight: bold;
  color: #323a0a;
}
.container .content:hover {
  margin-left: 8px;
  border-left: 2px solid #733109;
  color: #736509;

}
.text {
  float: left;
  width: 60%;
  font-family: Verdana;
  font-size: 14px;
  color: #2b0a50;
}
</style>
<script language="JavaScript">
<!--

function onarg(abd)
{
  var ass=document.getElementById("description");
  if (!document.getElementById("helps"))  var mess=document.createElement("<div id='helps'>");

  mess.innerHTML=abd.title;
  ass.appendChild(mess);

}
function onout()
{
     var ass=document.getElementById("description");
     ass.innerHTML = '';
}

// -->
</script>

</head>
<body>
<div class="text">
Вот пример скролируемого окошка. Содержимое для простоты будет в один ряд.
Внутрь такого окошка можно положить что угодно, в нашем случае это будут ссылки
с именами участников. Почему ссылки? Потому что не нужно париться с onmouseover
что бы сделать выделение при наводе мышкой, нам поможет псевдо класс
<b>hover</b> у ссылок.
</div>
<div class="container" id="container">
<a class="content" href="http://vingrad.ru/@Opik" onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Opik">Opik</a>
<a class="content" href="http://vingrad.ru/@o.s.a"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя o.s.a">o.s.a</a>
<a class="content" href="http://vingrad.ru/@Aliance"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Aliance">Aliance</a>
<a class="content" href="http://vingrad.ru/@PHP-Script"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя PHP-Script">PHP-Script</a>
<a class="content" href="http://vingrad.ru/@Akina"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Akina">Akina</a>
<a class="content" href="http://vingrad.ru/@Sardar"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Sardar">Sardar</a>
<a class="content" href="http://vingrad.ru/@Anton Saburov"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Anton Saburov">Anton Saburov</a>
<a class="content" href="http://vingrad.ru/@Wowa"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Wowa">Wowa</a>
<a class="content" href="http://vingrad.ru/@sergej.z"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя sergej.z">sergej.z</a>
<a class="content" href="http://vingrad.ru/@oleg1973"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя oleg1973">oleg1973</a>
<a class="content" href="http://vingrad.ru/@Cheba"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Cheba">Cheba</a>
<a class="content" href="http://vingrad.ru/@Caramel"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Caramel">Caramel</a>
<a class="content" href="http://vingrad.ru/@Red Dragon"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Red Dragon">Red Dragon</a>
<a class="content" href="http://vingrad.ru/@Good Boy"onmouseover="onarg(this);" onmouseout="onout();" title="Профиль пользователя Good Boy">Good Boy</a>

</div>
<!-- help/description window -->
<div id="description" class="description"></div>
</body>
</html>

PM MAIL ICQ   Вверх
Aliance
Дата 13.6.2005, 17:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(PHP @ 13.6.2005, 18:40)
Может не получил - молчит как партизан.

Он зант, у него экзамены smile
Не нужно писать в личку, имхо. (пунк 14 правил форума...)
PM MAIL WWW ICQ Skype   Вверх
Рыжий
Дата 13.6.2005, 19:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20



Цитата(Aliance @ 13.6.2005, 16:41)
Он зант, у него экзамены

ага! понятно, Ну желаю ему УДАЧИ!!!


Цитата(Aliance @ 13.6.2005, 16:41)
Не нужно писать в личку, имхо. (пунк 14 правил форума...)

Прочитал, обалдел, больше так не буду smile
PM MAIL ICQ   Вверх
o.s.a.
Дата 9.7.2005, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Xo4y B MocKBy
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15



Цитата
смысл задания - генерация контента.

Opik его уже написал.

Что дальше???


--------------------
Не могу стоять, пока другие работают, пойду полежу.
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1158 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.