почему моя функция JS не срабатывает при событии onresize? - PullRequest
Новая
       37

почему моя функция JS не срабатывает при событии onresize?

0 голосов
/ 29 сентября 2019 

function getCentralPosition() {

  // This script verticaly centers the heading you see on the main home page video //


  // First save the parent div that houses the heading element into a variable named parentDiv.
  var parentDiv = document.getElementById('home-section-1');

  // Now obtain the total height (including padding, borders etc) of this parentDiv
  var parentDivHeight = parentDiv.offsetHeight;

  // Save the child div element that houses the heading into a variable named childDiv
  var childDiv = document.getElementById('home-first-overlay');

  // Now obtain the total height (including padding, borders etc) of this childDiv
  var childDivHeight = childDiv.offsetHeight;

  // Calculate the height difference between the parentDiv and childDiv by subtracting their heights and storing them 
  // in a variable named heightDiff

  var heightDiff = parentDivHeight - childDivHeight;

  // Obtain the precise position required from the top of the parentDiv by dividing heightDiff by 2

  var pos_from_top = heightDiff / 2;

  // assign pos_from_top as the value for 'top' on childDiv using "px"

  childDiv.style.top = pos_from_top + "px";

}

window.addEventListener("onresize", getCentralPosition);

без оконного регистратора изменения размера, я использовал код как есть - но идея в том, что он также остается в центре, когда кто-то пытается изменить размер окна браузера и т. Д. Мысльне обязательно, я просто хотел добиться этого.Любые идеи относительно того, что я должен пытаться?

Ответы [ 2 ]

1 голос
/ 29 сентября 2019

Полагаю, вы ищете событие "resize"

Вот обновленный фрагмент кода (он содержит ошибки без правильного HTML, но показывает срабатывание события). 

function getCentralPosition() {

  // This script verticaly centers the heading you see on the main home page video //


  // First save the parent div that houses the heading element into a variable named parentDiv.
  var parentDiv = document.getElementById('home-section-1');

  // Now obtain the total height (including padding, borders etc) of this parentDiv
  var parentDivHeight = parentDiv.offsetHeight;

  // Save the child div element that houses the heading into a variable named childDiv
  var childDiv = document.getElementById('home-first-overlay');

  // Now obtain the total height (including padding, borders etc) of this childDiv
  var childDivHeight = childDiv.offsetHeight;

  // Calculate the height difference between the parentDiv and childDiv by subtracting their heights and storing them 
  // in a variable named heightDiff

  var heightDiff = parentDivHeight - childDivHeight;

  // Obtain the precise position required from the top of the parentDiv by dividing heightDiff by 2

  var pos_from_top = heightDiff / 2;

  // assign pos_from_top as the value for 'top' on childDiv using "px"

  childDiv.style.top = pos_from_top + "px";

}

window.addEventListener("resize", getCentralPosition);
0 голосов
/ 29 сентября 2019

Я использую аналогичную функцию для настройки размера экрана на основе динамического SVG-графика.Я просто помещаю код onresize = "function ()" в тег, и он работает "из коробки".

...