Выдача центрируемого объекта динамического размера с помощью JavaScript в Prototype

Question

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

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

Теория заключается в том, что функция измеряет ширину и высоту области просмотра браузера, а также ширину и высоту видео, вычитает видео из браузера, затем делит его на два и применяет его как left и topзначения в CSS.Для видео установлено значение position:absolute, для элемента div установлено значение position:fixed.

ОБНОВЛЕНИЕ:

Учитывая рекомендации @ Guffa, я определил видео как переменную и применилстили к нему напрямую.Код звуковой и не показывает ошибок, но я не вижу результата.Честно говоря .. Пытался сделать это несколько дней и не могу понять.

ОБНОВЛЕНИЕ:

Протестировал код, закомментировав строки 4 и 5 ниже и добавив vid.style.left = (500) + "px";и что WORKED .. также протестировано с vid.style.left = (windowWidth) + "px";, и что WORKED ... что означает, что код завершается с ошибкой parseInt(vid.style.width,10).Логика этой строки состоит в том, чтобы вычислить существующую ширину видео ... В чем проблема?

Тестовая страница: http://kzmnt.com/test/

Строки с 55 по 59 находятся под вопросом (переформатированы для удобства чтения):

var windowWidth = document.viewport.getWidth();
var windowHeight =  document.viewport.getHeight();
var vid = document.getElementById('live');
vid.style.left = ((windowWidth - parseInt(vid.style.width,10)) / 2) + "px";
vid.style.top = ((windowHeight - parseInt(vid.style.height,10)) / 2) + "px";

Идеи?

Спасибо за помощь!

Answer 1

Ошибка, которую вы получаете из несоответствующих скобок.

Хотя добавление нескольких скобок не сделает код работоспособным. Код делит элемент на два, а затем вычитает его из ширины окна, в результате чего элемент находится на полпути за пределами окна.

Вы должны сначала вычесть ширину элемента из ширины окна, а затем разделить на два:

this.style.left = ((windowWidth - parseInt(this.style.width,10)) / 2) + "px";
this.style.top = ((windowHeight - parseInt(this.style.height,10)) / 2) + "px";

Edit:

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

element.style.left = ((windowWidth - parseInt(element.width)) / 2) + "px";
element.style.top = ((windowHeight - parseInt(element.height)) / 2) + "px";

Answer 2

Причина ошибки JavaScript в том, что у вас не совпадают скобки.

//                                           add paren here ------------v
this.style.left = (windowWidth  - (parseInt(this.style.width,10)  / 2  )) + 'px';
//                                                and here ------------v
this.style.top  = (windowHeight - (parseInt(this.style.height,10) / 2 )) + 'px';

(Также обратите внимание Точка Гуффы о том, что расчет немного отклонен.)

---

Не по теме : похоже, что ваш элемент использует абсолютное позиционирование и имеет определенную ширину. Если это так, я не сразу понимаю, зачем вам вообще нужен JavaScript для позиционирования; вам может быть лучше с CSS: вы устанавливаете left на "50%", а затем устанавливаете ваш margin-left равным половине ширины элемента. E.g.:

#yourElementId {
    position:    absolute;
    width:       500px;  /* Or whatever */
    left:        50%;
    margin-left: -250px; /* Half of `width` above */
}

Живой пример

Я считаю, что это работает, когда ширина / высота тоже в процентах ( кажется ), но я не гуру CSS ...

Answer 3

var windowWidth = document.viewport.getWidth();
var windowHeight =  document.viewport.getHeight();
var vid = document.getElementById('live');
vid.style.left = ((windowWidth - (vid.width)) / 2) + "px";
vid.style.top = ((windowHeight - (vid.height)) / 2) + "px";

Answer 4

В обеих строках у вас есть 3 открывающие скобки, но только 2 закрывающие скобки.