Vlad

У меня выводится списком несколько элементов и при нажатии на кнопку "Проверить", к некоторым строкам добавляется класс .shake. Красные строки трясутся, короче говоря.

https://codepen.io/webref/pen/ZEYmPPm

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

@animationend="animated[index] = false"

К сожалению, класс shake так не убирается. Что посоветуете? Как мне убрать класс .shake после завершения анимации?

On 1/22/2019 at 6:01 PM, rgl said:

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

Видимо так и есть.

4 minutes ago, rgl said:

А код на JavaScript можно посмотреть?

Код выше приведён.

Решил следующим образом. Круглые скобки надо экранировать не так \(\), а вот так [(][)].

Сделал вот такое регулярное выражение.

https://www.regexpal.com/?fam=106684

Прекрасно работает, как надо. Но при переносе в JavaScript строка не находится. Сама функция проверки строк у меня такая.

function testCode(testString, patternString) {
  patternString = patternString.replace(/(\s+)/gm, ""); // Убираем все пробелы
  testString = testString.replace(/(\r\n|\n|\r|\s+)/gm, ""); // Убираем переносы и пробелы
  var re = new RegExp(patternString, 'i'); // Регулярное выражение из строки
  return re.test(testString);
}

Если заменить 90deg на .*, то всё работает, в итоге понятно что дело именно в 90deg. Как заменить регулярное выражение, чтобы rotate(90deg) находило?

Уже.

11 hours ago, Launder said:

Что-то не работает сегодня...

Технические проблемы с хостингом, решаем.

Предлагаю слово Sex в профиле заменить на Gender, вроде оно точнее отражает суть.

Оборачиваешь каждую букву в <span> и задаёшь ей стиль. Как-то так https://jsfiddle.net/2vx94dgr/

Спасибо всем за советы и особенно @nerv. Пока сделал на ванильном JS всё что хотел, в будущем планировал вообще на Vue.js перейти вместо jQuery. Пока нет, слишком много завязано на него, переписывать долго придётся.

Возможно вы правы, и никакой Vue тут и не нужен.

По совету форумчан для всяких динамичных крутилок и пыхтелок решил использовать Vue.js. Никогда с ним дела не имел, но из обзора понял, что штука клёвая и нужная. Пока для меня сложностью является то, что одну и ту же задачу можно решить множеством способов, но при этом понять, какой способ лучше и не таит ли каких-то подводных камней, не хватает опыта.

В качестве примера сделал вот такую штуку, хочу прикрутить к справочнику CSS к большинству стилевых свойств.

https://jsfiddle.net/webref/b3abxg5h/

Интересует следующее: 

• насколько правильно сделал, можно ли проще и лучше?
• нужно ли использовать компоненты?

Ну и вообще, приветствуются всякие советы и подсказки.

Никуда не переехало, просто закрылась группа и всё.

Больше не веду.

Потому что спецификация HTML так разрешает. Поскольку внутри <ol> могут быть только <li> непосредственно, то </li> добавляется автоматически с началом следующего <li> или перед </ol>.

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

Есть готовые галереи фотографий, типа http://coppermine-gallery.net, также типовые CMS вроде WordPress позволяют вставлять фотографии. Мне кажется, вам стоит начать с него, а не сразу учить PHP.

Внутрь <p> нельзя вкладывать элементы <div>. Браузер самостоятельно исправляет ошибки, закрывая <p> и ломая вашу структуру, из-за чего стили и перестают работать, поскольку вложенность элементов поменялась. Не делайте так, <p> только для текста, а не для <div>.

Вам надо использовать правило @font-face для загрузки своего шрифта.

https://webref.ru/css/font-face

Обычно отступы сверху появляются из-за h1, вам надо обнулить у него верхний margin.

h1 { margin-top: 0; }

Или вообще margin целиком поставить в 0 и заменить его на padding.

На будущее рекомендую код выкладывать в какую-нибудь песочницу, типа http://plnkr.co, тогда вам помогут быстрее.

Добавьте к форме атрибут target.

<form target="_blank">

Добавьте для меню user-select: none и не будет никаких выделений.

В подобных ситуациях обычно задают стиль вначале для div, а потом нужные правила переопределяют для вложенного p.

img надо закрывать. Должно быть 

height="300">

Цитата

Access to Font at 'http://rmsgames.ru/pc/6px2bus.ttf/' from origin 'http://rmsgames.ru' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.