Как синтаксически правильно написать без шаблонных литералов?

Question

[Qurel]

Шаблонные литералы не работают в Internet Explorer, как правильно переписать этот код:

hoverOverlay.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

Такой вариант не работает:

hoverOverlay.style.transform = "translate(coords.left + 'px', coords.top + 'px')";

Comments

[Vadim Bogomazov]

link

Answer 1

[Кирилл]

как-то так?

hoverOverlay.style.transform = "translate(" + coords.left + "px, " + coords.top + "px)";

Comments

[Qurel]

В Internet Explorer 11 версии ваш код тоже не работает.

[Kovalsky]

А не работает это как?

[Кирилл]

Qurel, конкатенация строк работает в ие 11, это точно) Значит у вас проблема где-то в другом месте.
И что значит - не работает? Не добавляется свойство transform? Добавляется, но некорректные значения? Ошибки в консоле?

[Qurel]

Оно некорректно работает, если навести мышкой на города - ховер появляется в левом верхнем углу, а не при наведении на конкретный город:

[hzzzzl]

Qurel, потому что у него position: absolute относительно body, и трансформится от 0, 0

положи на меню "menu_top menu_top-desctop" position:relative, и транслейтом сдвигай только "translateX(coords.left + 'px'), тогда по высоте будет вровень с менюшкой, вроде как

[Qurel]

hzzzzl, Спасибо, завтра попробую

[Qurel]

hzzzzl, тогда получается такая проблема:

Код:

hoverOverlay.style.transform = "translateX(" + coords.left + "px)";

[Qurel]

Qurel, Решение найдено для ie11, проблема в некорректном отображении в ie11 было из-за свойств
window.scrollY, window.scrollX:

const coords = {
                    width: linkCoords.width,
                    height: linkCoords.height,
                    top: linkCoords.top + window.scrollY,
                    left: linkCoords.left + window.scrollX
                };

При замене window.scrollY, window.scrollX на window.pageYOffset, window.pageXOffset все заработало, но в ie 10 не работает.