hypnocolor

Приветствую.

• клик вешаете на блок со ссылкой, а не саму ссылку. Соответственно, событие сработает, даже если кликнуть правее от ссылки;
• непонятно, зачем вешаете событие на клик по второй ссылке внутри клика на первую, это ведь независимые элементы;
• нет точек с запятой в конце строк, это важно. Привыкайте писать их всегда;
• в подобных штуках хорошо бы проверять не только совпадения, но и вообще факт того, что в полях что-то вбито.

Наскоряк переписал/дополнил как-то так:

var regbutton = document.querySelectorAll('.button a'),
    form = document.querySelector('form'),
    inputs = document.querySelectorAll('input'),
    h3 = document.querySelector('h3'),
    reginfo = document.querySelectorAll('p');

regbutton[0].addEventListener('click', function(e) {
    e.preventDefault();
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
});

regbutton[1].addEventListener('click', function(e) {
    e.preventDefault();
    if (inputs[0].value) {
        if (inputs[1].value && inputs[2].value) {
            if (inputs[1].value == inputs[2].value) {
                    h3.textContent = 'Вы завершили регистрацию!';
                    reginfo[1].textContent = inputs[0].value;
                    reginfo[2].textContent = inputs[1].value;
            } else {
                    h3.textContent = 'Пароли не совпадают!';
            }
        } else {
            h3.textContent = 'Введите пароль в оба текстовых поля';
        }
    } else {
        h3.textContent = 'Введите имя';
    }
});

Продолжайте учить 🙂

21 час назад, Неугомонный сказал:

position: fixed;
top: 0;
right: 0;
height: 100%;

Смотрю никто никогда не указывает bottom:0; а используют height: 100%; , почему?

А вы прям все-все-все сайты в интернетах проверили, чтобы утверждать про «никто и никогда»? 🙂 Если вы понимаете, что пишете и как оно работает, то в данном случае нет особой разницы, как именно задать высоту блока. Я бы тоже использовал bottom: 0 просто потому, что так короче 🙂 Так что просто делайте, как удобно.

Это одно из ограничений display: table. Склеить строки или столбцы при его использовании нельзя.

Плохо знаете. Прочитайте вдумчиво: http://htmlbook.ru/css/position.

https://github.com/dinbror/blazy

http://codepen.io/mikhail09/pen/WrYvdb Почему желтые квадраты сверху вопреки z-index?

:after и :before — это части контента блока. Контент ведь у вас визуально поверх блока расположен? Вот и с псевдоэлементами (жёлтыми квадратами) в вашем случае то же самое.

position: absolute; и z-index:...; не работают в паре!

Чё это? z-index отлично со всеми позишнами работает, кроме static.

Задайте непрозрачный фон тултипу и уголку: https://jsfiddle.net/95ybpqg6/2/.

Занятные отзывы, заинтересовало прям. Написал вам тоже на почту

Блин, элементарные же вещи, миллионы ссылок в гугле. За 127 сообщений, мне кажется, можно было это понять уже.

вот нашел кусочек про параметры http://getinstance.info/articles/tools/how-to-pass-parameters-gulp/

 

Может чем то поможет.

Спасибо, офигенно, на основе этого собрал то, что нужно! 

Ребята, назрел такой вопрос.

Допустим, я делаю проект по bem-way, то есть отдельные блоки хранятся в отдельных каталогах. В каждом каталоге есть jade-файл с разметкой блока и scss-файл с его стилями. Каким образом можно с помощью Галпа собрать любой отдельный блок вместе с его стилями? Понятно, что можно на каждый блок насоздавать тасков, но ведь блоков может быть адова куча и постоянно добавляются новые, замучаешься таски добавлять.

Было бы круто, если бы таск был один, но принимал, например, в качестве параметра в командной строке имя файла блока (или всего каталога, неважно, ради такого я готов терпеть любые ограничения в именах файлов и каталогов ) и собирал итоговый html+css в отдельную папочку. Нагуглить такого сходу не смог :\

Да, кстати, я тоже заметил, зачастили они с этим кабаном.

Кстати, не смейтесь, но gulp, git  и тому-подобное вообще не знаю.. я как бы со старого века)))

Чем раньше освоите — тем лучше, там ничего сложного, дело привычки. Рано или поздно вы с этими технологиями столкнётесь и нужно быть готовым. Я тоже долгое время был «старовером», но потом пришли они — большие проекты. Конечно, если вся ваша работа состоит в вёрстке лэндингов или простых сайтиков на 3 странички, можно обходиться дедовскими методами. Но на больших проектах гит и автоматизаторы — незаменимейшая вещь. Последним моим проектом, в котором я не использовал gulp и препроцессоры, был французский магазин с кучей страниц и очень нестандартной вёрсткой, плюс всё это дело должно было быть адаптивным. Не повторяйте моих ошибок, я проклял всё на свете тогда. Особенно, когда заказчику захотелось вдруг перекрасить весь сайт с одного цвета на другой. Если бы я использовал Sass, я бы просто поменял значение одной переменной с цветом. Без него мне пришлось лопатить весь css (который не был разбит на модули, да…). В общем, учитесь на чужих ошибках и не делайте своих.

Кажется, всё вышенаписанное я тут уже писал раза 2 минимум

По теме — Sublime Text 3. Пробовал скобки и атом, так и не смог слезть с саблайма. Гитхаб вообще молодцы, Атом выглядит клёвым и интересным. Но пока что тормозной, гад. Я специально ждал, пока несколько версий допилят, не устанавливал. Но чё-то он продолжает тормозить :\ Пакеты саблайма:

"installed_packages":[	"Color Schemes by carlcalderon",	"EditorConfig",	"Emmet",	"FileDiffs",	"GitGutter",	"Jade",	"LESS",	"Package Control",	"RegExLink",	"Sass",	"SCSS",	"SideBarEnhancements",	"Stylus",	"Theme - Soda"]

http://htmlforum.ru/index.php?showtopic=54420&hl=— было уже ведь. 

Чего именно нехватает? Весь код же я не буду скидывать. 

 

 

У меня сайт растягивается на всю ширину экрана. Но из за того, что некоторые блоки больше, то на iPad'е появляется горизонтальный скроллинг, как на скриншотах. Вроде бы понятно, объясняю.

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

Вы себя ведёте не неправильно, а странно. Прошлая тема на месте: http://htmlforum.ru/index.php?showtopic=54857&hl=. Но и сейчас вы допускаете те же ошибки, что и в первой теме. Не думаю, что кто-то захочет помогать, принимая во внимание всё это.

Gulp + Browsersync.

Есть слайдер — ставьте слайдер. Скриптов полно. Никто за верстальщика его ставить не будет.

Если верстаете, то вся визуальная часть на вас. Видео, аудио, слайдеры, галереи и всё такое.

А где проблемная страница? Код, подробности?

Сейчас всё выглядит так: «У меня есть машина. У неё есть кузов и 4 колеса. Она катается по дороге. Почему она не едет по траве?».

Задайте напрямую каждой ячейке ширину, а всей таблице — ширину, равную ширине ячеек, помноженной на их количество.

http://jsfiddle.net/hypnocolor/scanwfbr/1/

Ставлю на точку с запятой. Много раз сталкивался с различными галп-проектами и сделал вывод, что Сассу пофиг на расширение файла при импорте — подключит в любом случае.

Нет адаптивности.

Карта картинкой, а должна быть картой (как бы очевидно это ни звучало).

Если добавить больше текста в любой из блоков раздела «WHAT WE DO» — всё плывёт.

Последнее, что прочитал — Алекс Гой, «Всем спасибо».

Не смотрите на меня так

Спасибо большое!

На htmlbook я об этом могу почитать?

Конечно:

http://htmlbook.ru/css/after

http://htmlbook.ru/css/transform

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

Псевдоэлементами: http://jsfiddle.net/hypnocolor/p8b8u8n9/