#javascript #jquery
#javascript #jquery
Вопрос:
У меня возникли проблемы с позиционированием моего меню CSS — .dropdown в отношении центрированного изображения — #logo , оно должно иметь абсолютное положение, я написал функцию, которая должна это делать:
$(function() {
var $logo = $('#logo');
var marginRight = ($(window).width() - ($logo.offset().left $logo.outerWidth()));
$('.dropdown').css('marginRight', marginRight);
});
Это прекрасно работает в IE, но не всегда в Chrome и Firefox. Почему?
Это веб-сайт:
Комментарии:
1. Позиционирование — это стиль, и его предпочтительно не следует выполнять с помощью JavaScript.
2. @SvenvandeScheur Я имею в виду, вы правы, но для этого есть причины. Я думаю, мы все можем согласиться, особенно когда дело доходит до центрирования, что вам нужно работать немного нестандартно. По какой-то причине это проблема, для которой веб-стандарты просто не могут обеспечить достойное и простое решение.
3. 9/10 вы можете сделать это без js. Например, с помощью flexbox / margin и / или transform: translate(). К сожалению. Мне не ясно, какова цель. Без урезанной скрипки я ничего не могу рекомендовать.
Ответ №1:
Попробуйте просто установить
$('.dropdown').css('right', margright);
Комментарии:
1. Это не помогло. Когда вы просматриваете это в первый раз (или после очистки кэша) в Firefox, меню отображается слишком много справа, при обновлении оно выглядит хорошо..
Ответ №2:
Попробуйте обернуть свой код:
$('#logo').on('load', function() {
// you code here
});
Потому что вы написали код внутри обратного вызова document ready, но изображение еще не загружается и вы не знаете его размеры.
Ответ №3:
Вы не сказали, где именно вы хотите разместить свое выпадающее меню, но предполагая, что вы хотите, чтобы оно было посередине под логотипом, вы можете это сделать
$(function() {
var logo = $('#logo');
logo.on('load', function() {
var left = logo.offset().left logo.outerWidth()/2;
$('.dropdown').css('left', left);
});
});
Комментарии:
1. Это не помогает, я хочу поместить выпадающее меню под правой частью логотипа, когда я помещаю этот код, поведение Firefox странное
Ответ №4:
@SvenvandeScheur, спасибо за внимание. Я нашел решение (код javascript отлично работает на странице), но для всех было бы интересно, как это сделать с помощью flexbox. Я хочу, чтобы выпадающее меню помещалось под нижний правый угол центрированного изображения
https://jsfiddle.net/1ddk7e5k/
Этот код работает на странице:
$( "#logo" ).load(function() {
var margright=(($('.centered').width()-$('#logo').width())/2);
$('.dropdown').css('marginRight',margright);
});