Почему моя функция не работает на .resize()?

Я создал функцию, чтобы центрировать мой <div> с помощью jQuery, он работает на загрузке страницы, но не изменяется на странице.Почему моя функция не работает на .resize()?

Что я делаю неправильно?

JS:

<script> 
    $(document).ready(function() { 
     function reCenter() { 
      $('.content').css({ 
       position:'absolute', 
       left: ($(window).width() 
        - $('.content').outerWidth())/2, 
       top: ($(window).height() 
        - $('.content').outerHeight())/2 
      });    
     } 
     $(window).resize(reCenter()); 
     // To initially run the function: 
     reCenter(); 
    }); 
</script>

HTML:

<div class="content"> 
    <h1>Header</h1> 
    <span class="hyphen">-</span> 
    <h2>Subtext</h2> 
</div>

CSS:

* { 
      padding: 0; 
      margin: 0; 
     } 
     html { 
      background: darkgrey; 
     } 
     body { 
      color: #fff; 
      text-align: center; 
      /*padding-top: 300px;*/ 
     } 
     h1 { 
      font-family: 'Arimo', sans-serif; 
      text-transform: uppercase; 
      font-weight: bold; 
      font-size: 40px; 
     } 
     span.hyphen { 
      color: #0CFFFC; 
      font-size: 3em; 
     } 
h2 { 
      font-family: 'Montserrat', sans-serif; 
      font-weight: 100; 


     }

UPDATE
После того, как функция, чтобы сгореть на странице загрузке, она имеет некоторые поведения, несовместимые между загрузкой страницы и окном изменения размера http://jsfiddle.net/7zqkd4w8/

источник

2014-11-09 Imran

Если содержание не является динамическим, вы можете попробовать использовать методы [здесь] (http://www.wpdfd.com/editorial/thebox/deadcentre4.html), в центре которой блок как вертикально, так и horizontally – yoavmatchulsky

Это должно быть $(window).resize(reCenter);, так как вы отправляете его функцию не результаты называя функция.

источник

2014-11-09 03:43:57 MiltoxBeyond

Когда я это делаю, при изменении размера функция вызывается, но теперь функция не вызывается, когда загружается страница. Я попытался изменить последнюю строку на 'reCenter; ', но это тоже не сработает. – Imran

Сохраните последнюю строку как есть. – j08691

Вы должны сделать так:

$(window).on('resize',function(){ 
    reCenter() 
}).resize();//triggers on first page load

источник

2014-11-09 03:54:12

Вы пытаетесь найти ширину '' .content дел. Вы не получите правильную ширину div, если не будете ее плавающей или абсолютной. Вы предоставляете абсолютный класс .content в reCenter(); поэтому если вы дважды активируете функцию изменения размера (в первый раз), это сработает.

$(window).on('resize',function(){ 
    reCenter() 
}).resize().resize();

Но предлагаемый метод для этого - просто добавить float влево для контента, и ваш существующий код должен работать.

.content{ 
    float:left; 
}

источник

2014-11-09 08:48:09

Почему моя функция не работает на .resize()?

ответ

Смежные вопросы