psywalker

Присвоить класс, НЕ ЗАДУМЫВАЯСЬ! И, кстати, он же будет и быстрее.

Спасибо. Но я его и правда не знаю. Мне ещё учиться, учиться и учиться Дружище, ты, как обычно в своём репертуаре) Я тебе так скажу, что УЖАСНО рад, что смог сам, своими силами и умом, написать столько скриптов и решить столько задач на чистом JS. Благодаря этому поднялась планка моего опыта и знаний по этой технологии. А это, друг мой, ой, как немаловажно. И, уверен, что тот, кто адекватно рассуждает, обязательно меня поддержат. А вообще я не пойму некоторые споры, на счёт какой-то валидности кода, если речь идёт о работоспособности самого сайта Я, кстати, уделил много времени той же структуре, но, скажу честно - это для меня не на первом месте. Тут я согласен с Great Rash. Пусть у тебя хоть трижды обёрнут элемент, но при этом он отлично выполняет свои функции и качественный, я выберу эти обёртки - не задумываясь!

Дык ведь ничего и не должно происходить. Всё, ты получил свой рецепт, он у тебя на ладони, бери и делай. Или ты думал, что за тебя скрипты ещё и готовить будут? Да делал по мере возможности. Каждый день по чуть-чуть, но бывало и что тратил больше пол-дня) Зная, что ты всё написал без фреймворков, я бы за тебя проголосовал 2 раза если бы мог.. Только вот как тебе идея: В своём коде ты в самом конце вешаешь formsScripts на window.onload Не лучше обойтись без этого используя formsScripts как самовызывающую функцию?? var formsScripts = (function(){ // весь твой код.. })(); Спасибо! На счёт formsScripts на window.onload, считаю, что сделал правильно всё же. Дело в том, что в твоём случае: (function(){ // весь твой код.. })(); ничего не возвращает и переменная formsScripts будет равна undefined. Тогда вопрос, зачем так делать?

Спасибо, очень рад, что тебе понравилось, старался, не могу отрицать! На счёт вёрстки, я, кстати так же уделил этому много внимание, работа была сделана с помощью http://pixelperfectplugin.com/, т.е. так же попиксельно и дотошно.

DrStrangeLove Дык ведь ничего и не должно происходить. Всё, ты получил свой рецепт, он у тебя на ладони, бери и делай. Или ты думал, что за тебя скрипты ещё и готовить будут? Да делал по мере возможности. Каждый день по чуть-чуть, но бывало и что тратил больше пол-дня)

Дружище, поверь мне, если бы я не стал делать те тысячи мелочей, которые сделал, то и код JS был бы намного меньше. Хотя я тебя понимаю, но там действительно была проделана огромная работа, благодаря которой форма и стала такой удобной и качественной.

Дружище, а мне просто, ради интереса, скажи, что я не доделал? Вроде ж, всё проверял! я не про недочеты - я про количество форм. У этой формы дизайн не как у твоей. или ты сделал, а я не там кликую?? Или надо было только одну делать на выбор, а не как Синдром- четыре?? Ааа, ты про это)) Да, нее, ты просто не понял задание. Форма-то одна, а вот страниц разных 5 Я так и понял.. я кликаю по твоей форме, как мне перейти на другие её страницы?? или у тебя 1форма -1 страница, у Синдрома 1форма -4 страницы. Правильно я понял?? Дык ведь суть в самих Табах! Т.е. в итоге ты должен заполнить все обязательные пункты, прежде чем двигаться дальше. У меня, наприимер - это учтено, в отлиии от того же Синдрома.

Дружище, а мне просто, ради интереса, скажи, что я не доделал? Вроде ж, всё проверял! я не про недочеты - я про количество форм. У этой формы дизайн не как у твоей. или ты сделал, а я не там кликую?? Или надо было только одну делать на выбор, а не как Синдром- четыре?? Ааа, ты про это)) Да, нее, ты просто не понял задание. Форма-то одна, а вот страниц разных 5

Вообще вёрстку обычно называют Блочной, либо на Слоях. Что в принципе одно и тоже.

Дружище, а мне просто, ради интереса, скажи, что я не доделал? Вроде ж, всё проверял!

Вообще лучше Слой.

Нет, ни о какой лени тут и речи быть не может. Для меня это во-первых кайф, а во-вторых бесценный опыт!

А то что у этой работы косяки на косяке - это ты не смотрел? А сам, кстати, чего не сдал свою работу? Я банально не успел Жаль конечно, дружище. Уверен, что там намечалась бомба! И было чему поучиться

Хм...интересно, почему же это нечего? Будет интересно послушать твою критику. А сам, кстати, чего не сдал свою работу?

penchukov, Дружище, а почему бы обычным ЖС не воспользоваться?

Ссылка В общем время было предостаточно, поэтому я решил дополнить задание и сделал, на мой взгляд, полноценную форму, которой, я надеюсь, будет приятно пользоваться любому пользователю. HTML5: Особо много элементов HTML5 вы там не заметите, так как я считаю, что всё таки эта форма и она, хоть и разрешено по спеке, не должна кишить всякими элементами из html5. Я имею ввиду <article>, <section>, <aside> и т.д. Т.е. я считаю, что я внёс в неё по максимуму возможностей этого языка, ровно столько, сколько она заслуживает, учитывая и ИЕ8 конечно же. CSS3: Всё, что возможно, я сделал на на CSS3, т.е. по полной, табы, ползунки, кнопки и т.д. Скрипты: Все скрипты, от А до Я, писал лично сам, на чистом JavaScript (кстати, получил большой опыт). Т.е. не использовал никаких библиотек, jQuery и прочих вещей. Всё сам, своими руками и головой. В связи с чем, код, конечно же основательно вырос, но при этом форма получила удобное и качественное, на мой взгляд, поведение. В общем в краце расскажу, что и как. 1. Страница "Описание" 1. Все <textarea> изначально имеют одну высоту, но написав в ней несколько строк, она само-увеличивается по высоте, в зависимости от их количества. Наглядный пример 2. Страница "Состав" 1. Поиск. Всё таки изначально он был в задании, поэтому я решил его всё же сделать. Как работает. Очень просто. Вбиваем слова в поля, снизу вылазит список с нужными и отсортированными по алфавиту напитками или украшениями, содержащих вводимые символы. Пример Так же из списка можно выбирать напитки с помощью клавиатуры, стрелок и энтера. Всё, что выбрано, появляется наверху, прямо над поиском. 2. Выпадающее меню. Внутри ещё один, бесконечно крутящийся список. Пример 3. Галерея с всплывающими подсказками. Крутится бесконечно. Пример 3. Страница "Как готовить" 1. Загрузка фото. Всё таки решил так же сделать эту вещь. 2. Про <textarea> уже рассказывал выше. 3. Ну и конечно же, добавление шагов, так же посчитал, что без этого шага, форма не будет полноценной. 4. Страница "Параметры" 1. Эмуляция чекбоксов. Тут всё понятно. 2. Выпадающие списки. Тут, я думаю, тоже. 3. Ползунки. Все отчитывают чёткое время, сложность и крепость. Ровно по шкале. Окончание у текста "минут" меняется в зависимости от единицы времени. 5. Страница "Подтвердить" Механизм сборки Тут я в краце хотел бы рассказать про механизм сборки, который я использовал в данной работе. Значит у нас есть Класс с приватными объектами и свойствами, которые скрыты и не могут быть изменены снаружи. Единственное, что связывает их с внешним миром, это методы, которые делают свою работу, занимаются сборкой информации со страниц, валидируют все обязательные элементы, при этом собирая приватные объекты, внутри своего Класса. Как итог, мы имеем один, главный объект, который представляет из себя полную сборку всех деталей, необходимых нам для заполнения блоков с инфой, которые находятся на последней странице нашей формы. Объект, хитро устроен так, что в случае чего, может легко обновить свои свойства, если, например мы решим что нибудь поменять или добавить на любых страницах. Он отслеживает все передвижения и не допустит того, чтобы, например, какая нибудь обязательная информация, не была заполнена. Табы и Редактирование. Ну и конечно же, я не мог оставить своих пользователей без возврата на уже заполненные страницы и редактирования их. Для этого я сделал действующими Табы, благодаря которым в любой момент можно вернуться на нужную страницу и сделать там любые изменения, зная, что при этом, отлаженный и надёжный механизм сборки, соберёт всё то, что было изменено. Причём шагать можно как назад, так и вперёд, с учётом того конечно, если вы уже были на последующих вкладках. И ещё я решил, что будет полезным сделать переходы на страницы, так же с помощью кнопок "Редактирование", которые находятся на последней странице у каждого заголовка в главных блоках. Пример В целом, я постарался продумать каждую мелочь, типа ввода только чисел в нужные инпуты, соответствующих своим именованиям ёмкостей и ещё очень много мелочей, благодаря которым, я надеюсь, мне удалось вас порадовать и может быть даже где-то и удивить Приятного пользования, господа Ссылка

Ну это тогда тебе просто нужно сделать обычное обтекание.

А. Значит, это height работает как min-height. Извиняюсь. Точно!

Спасибо, gordi. Данный метод с использованием отрицательного левого margin'а мне известен. Однако, он требует создание контейнера специально для ie6, а я хочу эмулировать min-width в ie6 только для bоdy - в данном случае, насколько я понимаю, проблема решается только через expression или javascript. Поэтому я и остановился на способе, изложенном выше. Пральна. Пусть динозавры сидят на тормозном браузере)

Вот этот вариант чем не подошёл? http://forum.htmlbook.ru/index.php?showtopic=29466&view=findpost&p=223924

Быколай, В таблице и ячейках не пашет позиционирование, по спеке. И фф, например, следует этим правилам, в отличии от Хрома. Может как-то с этим связано.

Объясняю по пунктам в Дриме. 1. Выделяешь нужный тег 2. Жмёшь вот на эту штуку http://screencast.com/t/N73YP6SKxE3n 3. Пьёшь пиво

dostel1, Вот, дружище, держи. Я так обычно делаю для ИЕ6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фиксированная картинка слева</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{background:url('/n.gif') fixed no-repeat;} /* Нужно что-бы картинка слева всегда была: 1. Высоты 100% - 2. Фиксированной и не растягивалась при заполнении текста 3. Вобщем точно так же, как и в Файрфоксе, так же должно быть и в ИЕ6 */ div.fixed { position: fixed; left: 0; top: 100px; _top: expression(document.getElementsByTagName('html')[0].scrollTop+100+'px'); _height: expression(document.getElementsByTagName('html')[0].clientHeight-100-100+'px'); /*_top: expression(document.getElementsByTagName('html')[0].scrollTop+50+'px'); _height: expression(document.getElementsByTagName('html')[0].clientHeight-0-50+'px');*/ bottom: 100px; width: 200px; background: red; _position: absolute; } div.right { margin-left: 250px;} </style> </head> <body> <div class="fixed">FIXED</div> <div class="right"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

Лови дружище <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> </style> </head> <body> <div class="caption" style="float: left; width: 20%; background: red;">Caption1</div> <div class="events_block" style="overflow: hidden; background: green;"> <div class="caption">Caption2</div> <div class="text"> - text2 <br> - text2 <br> - text2 <br> - text2 <br> </div> <div class="caption">Caption3</div> <div class="text"> - text3 <br> - text3 <br> - text3 <br> - text3 <br> </div> </div> </body> </html>

Ну, как кросс вариант, то я бы лучше воспользовался JS. Вот, лови вариантик один, как-то раз делал) http://psywalker.ru/Forum/JS/Primitive/SetTimeOut/ImgPlavnoe/3.html