ned4ded

Никак.

upd
Наверное, немножко стоит пояснить, чтобы не быть голословным. Позиционирование элемента со свойством position: absolute; относительно родителя со свойством position: relative; - это заложенное в логику рендеринга поведение. Вы пытаетесь сломать то, что работает так, как задумано. Попробуйте положить мяч на наклонную поверхность и попросите гравитацию перестать работать, чтобы мяч не покатился вниз.

Вот ссылка на спеку, если вам интересно, пример 13.

td = document.createElement('td').setAttribute('colspan', '6').setAttribute('style', 'text-align:center;');

это не jquery, после вызова первого метода setAttribute не возвращается $-элемент (т.е. отсутствует имплементированый в $ method chaining ), но возвращается undefined.

вам нужно написать:

const td = document.createElement('td');
td.setAttribute('colspan', '6');
td.setAttribute('style', 'text-align:center;');
// console.log(td);
// <td colspan="6" style="text-align:center;"></td>

// ps я бы написал через сеттер 
// td.style.textAlign = 'center';
// td.colSpan = 6;

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

(() => {
  const scrollingFn = () => {
   window.removeEventListener('wheel', scrollingFn);

   $.scrollTo($('.something'), 1000, {
     onAfter: () => window.addEvenListener('wheel', scrollingFn),
   });
  }

  window.addEventListner('wheel', scrollingFn);
})();

В целом, вы, похоже, просто запутались в в контексте и ссылках:

name.filter(product => name === undefined || product.name === this.name); 
// в этом месте вы пытаетесь отфильтровать переданную опцию name, которая является строкой "anything 4",
// так же контекст this.name - будет undefined, потому что в данном случае вы передаете стрелочную функцию, 
// this которой будет ссылаться на объект, в котором она была создана, т.е. - на Shop. У Shop нет свойства name
// правильный вариант: 
const filtered = this.products.filter(product => {
 return product.name === undefined || product.name === name
});

Все последующие функции вам нужно отредактировать по тому же принципу.

PS.
Не совсем понимаю, зачем вам парсить строчные операторы сравнения, когда можно просто отправлять функцию сравнения в метод фильтрации.

class Shop {
    constructor(products) {
        this.products = [];
    }

    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    filterProduct(fn) {
      return this.products.filter(fn);
    }
    
}
const shop = new Shop();
shop.addProduct(new Product("product 1", 1, 2000));
shop.addProduct(new Product("item 2", 2, 100));
shop.addProduct(new Product("some 3", 3, 500));
shop.addProduct(new Product("anything 4", 4, 1000));

const filtered = shop.filterProduct((product) => product.name === 'anything 4' && product.count > 3 && product.price >= 500);

// console.log(filtered): [ Product { name: 'anything 4', count: 4, price: 1000 } ]

На самом деле, есть еще много мелких моментов:
1) С данными лучше работать функционально и не допускать добавления, удаление и проч. операции в текущем объекте, т.е. объект должен быть иммутабельным. При добавлении товара нужно создавать новый объект Shop.

2) Вытекает из первого - зачем вам в конструкторе Shop сигнатура products, когда вы ее не используете? По сути, ее должно использовать именно для сохранения передаваемого массива продуктов.

3) В объектах, работающих с данными, особенно когда идет фильтрация, сортировка и проч операции, лучше сразу имплементировать fluent-interface.

const arr = [
  {lat: 52.289591, lng: 21.030541},
  {lat: 52.289591, lng: 21.030541},
  {lat: 51.09464, lng: 17.019549},
];

const uniq = arr.filter(
  (el, i, array) => !array
    .slice(0, i)
    .find(({lat, lng}) => lat === el.lat && lng === el.lng)
);

https://repl.it/@ned4ded/ElementaryVeneratedTelevision

Ответ: Невозможно реализовать такую выборку через обычный css селектор.

Каждый элемент в доме входит в "список сиблингов" (яхз как нормально перевести list of siblings), т.е. список таких нод, которые являются прямыми потомками для одной родительской ноды.

Все структурные псевдо-классы (:nth-child, :nth-of-type, etc) работают именно со списком таких нод, т.е. выставляя любом селектору псевдокласс ":nth-child()" вы выбираете только те элементы, для позиции которых в списке сиблингов верна заданная в nth-child формула.

На примере: .child:nth-child(1) { color: red; } не окрасит ни один элемент, по той причине, что ни один .child элемент не является первым в списке сбилнгов; однако, .child:nth-child(4) { color: red; } окрасит самый первый элемент с классом .child в приведенном ТС примере, т.к. он является 4 элементов в списке своих сиблингов.

Вывод: без js вы не сможете сделать такую выборку. Я вижу два решения: 1) вы окрашиваете на стороне клиента эти элементы через js, 2) вы рассчитываете на стороне бека, какой из элементов является четным и добавляете ему класс .child--view--even, который в стилях будет окрашивать ваш элемент в красный цвет.

Для фронта:

(() => {
	const elements = document.getElementsByClassName('child');
  
  const rec = (arr) => {
    if(!arr.length) return;
    
    const [even, odd, ...rest] = arr;
    
    even.setAttribute('style', 'color: red');
    
    return rec(rest);
  }
  
  rec(elements);
  
  return;
})();

ps если вы будете использовать мой пример в чистом виде, то лучше его отбабелить

Добрый вечер. Файл app.js, содержащий исполняющий код для этого слайдера, подключен в двух местах. Полагаю, что удаление одной из ссылок на него ликвидирует проблему, т.к. eventlistner вешается на кнокпи дважды.

setTimeout() - функция однократного действия. Используйте setInterval() или рекурсию.

Можете почитать тут.

Все просто, ты пытаешься работать с html data=* атрибутом через .data() метод jquery, что не совсем одно и тоже.

Сделай это через метод .attr(). Например, если исправить код вот здесь:

var action = $(this).attr('data-action');

то твой пример заработает (т.е. id у тебя нигде не используется).

Почему не работает .data()? А вот почему:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Т.е. используется этот метод только для сбора данных со страницы единожды, далее с этими данными работать можно только через .data() метод внутри jquery (изменять, удалять, дополнять).

Добрый день! Могу лишь помочь вам с высоты своих скромных знанйи (я в http не очень шарю). Но мне кажется, вы немного запутались в языке самого протокола и процессе отправки данных с формы.

Текст отправляется именно такой, потому что ? - это %3F в unicode. Любое name с формы будет перекодировано в base64. Сам же ? в конец строки браузера подставляется при формировании запроса к серверу (т.е. браузером, а не вами), сл-но, его нужно исключить.

Тоже самое происходит со знаком амперсанд. Браузером автоматически собираются параметры с формы и отправляются на сервер используюя такую структуру: key=value&key2=value2...

Следующий код сформирует запрос ?kek=&results=<your_text> к целевому пути

<form action="/targetPage.html" method="GET">
    <input name="kek" hidden>
    <input type="text" name="results" value=""> // здесь нужно будет ввести текст
  </form>

Как видите, в таком случае после слова kek подставляется знак равенство, т.к. это соответствует протоколу http. Веротяно, можно настроить http сервер, который сможет принимать и обрабатывать запросы без = (без пустого параметра), но я в точности вас сейчас просветить по этому моменту не смогу.

Привет из htmlacademy, тоже верстал этот макет )
Индекс:

1) Иконки на дашборде расположены неровно.

2) Едет меню каталога товаров при переполнении.

3) Спецификация товара, сделанная через флекс, не имеет свойства wrap, из-за чего при переполнении едет верстка.

4) Псевдоэлемент after для кнопки Подробнее находится не по центру в firefox.

5) В email форме нет стилизации бэкграунда для инпутов.

6) Футер, по-моему, должен быть растянутым в края (как и фон для блока services, которого у тебя нет).

Страница каталога:

7) бэкграунд для фильтров не соответствует макету и должен быть в края.

8) Bluetooth радиокнопки сделаны неровно.

9) Цены под карточками сделаны неровно.

10) При наведении на карточку товара должна становится прозрачной кратинка, а не серый фон + позиционирование неровное, какая-то линия на каждой карточкой по наведению.

11) Пагинация без заливки.

12) Селфи-палка «Следуй за мной» 4900 руь.

13) И почти для всех блоков: ты используешь display:flex, но располагаешь элементы все равно используя margin. Да, в некоторых местах это необходимо, но, например, в меню каталог товаров, в info секции можно нормально расположить блоки, используя свойства флекс-боксов. А в каталоге (в лучшем месте для использования флекса), у тебя inline-block )

14) В некоторых местах у тебя используются section теги, тогда как являются они, по сути, обычными дивами.

Сколько времени тебе осталось до сдачи работы?) Я свою, помню, допиливал в последние минуты перед дедлайном ^^

На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

У них использован js, вероятно, для сокращения веса страницы, увеличения скорости рендеринга.

Как ни странно, на Sunlight это реализованно сильно по-другому. Там через js добавляется только класс к блоку, все остальные его элементы уже заранее собраны.

Совпадение стилей - случайность, возможно, дизайн кто-то у кого-то стырил (причем весь дизайн, у них совпадает не только эффект при наведении на карточку товара, но много чего еще).

На чистом css реализовать можно, но без анимации. Что-то вроде:

.card
    .card__info
    .card__info-more

.card__info:hover ~ .card__info-more { display: block };

Все это вы вполне могли узнать сами, используя инструменты разработчика ;)

z-index работает только с абсолютной и относительной позиционкой.

https://jsfiddle.net/ned4ded/cbn4dts3/

Доброго дня!

У этого расширения есть поле "масштаб".



Вам нужен, судя по всему, масштаб = ~0,85.

В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).

Работать-то может и будет, но заголовок - это мета, примерно как !doctype для html документа, http сервер должен обработать метаданные, чтобы не было проблем с кодировкой и т.п. Вероятно, в большинстве случаев тип контента будет определен автоматически, но это явно плохая практика.

Отвечая на ваш вопрос - нет, не обязательно[, но желательно].