Нужно обновить страницу, чтобы сделать работу jquery

Я нашел скрипт jquery онлайн для вертикального выравнивания содержимого. Однако, когда я изменяю размеры окон браузера, мне нужно обновить страницу, чтобы снова запустить скрипт jquery. Ниже вы можете найти мой код. Я очень ценю любую помощь. Я новичок в javascript-сцене. Заранее спасибо!Нужно обновить страницу, чтобы сделать работу jquery

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>vAlign Test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<style media="all"> 
body, html { 
    height: 100%; 
    margin: 0; 
} 

    nav{ 
     height: 20%; 
     background-color: red; 
    } 

    .container{ 
     height: 60%; 
     background-color: orange; 
    } 

    .valignmiddle{ 
    } 

    .fleft{ 
     width: 50%; 
     box-sizing: border-box; 
     padding-left: 2%; 
     text-align: justify; 
     float: left; 
    } 

    .flright{ 
     width: 50%; 
     float: right; 
     box-sizing: border-box; 
     padding-left: 2%; 
    } 

    footer{ 
     height: 20%; 
     background-color: purple; 
    } 

</style> 

</head> 
<body> 
<nav></nav> 
<div class="container" style="width: 100%; height: 60%;"> 
<div class="valignmiddle"> 
    <section class="fleft"> 
    <h3>Contact me</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p> 



    </section> 

    <div class=" flright"> 
    <h3>aapen</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit unde nisi a explicabo perspiciatis corrupti exercitationem temporibus autem odit asperiores molestias, facere rerum error nostrum in. Architecto natus inventore, voluptates.</p> 
</div> 

</div> 


</div> 

<footer></footer> 

<script> 
    $(document).ready(function() { 
     $(function() { 
    $('.valignmiddle').each(function() { 
     $(this).parent().css('position', 'relative'); 
     $(this).css('position', 'absolute'); 
     $(this).css('top', '50%'); 
     $(this).css('left', '0px'); 
     $(this).css('width', '100%'); 
    }); 
    $(window).resize(function() { 
     var thisheight = Math.round(parseInt($('.valignmiddle').outerHeight())/2); 
     $('.valignmiddle').css('margin-top', '-' + thisheight + 'px'); 
     if(parseInt($('.valignmiddle').outerHeight()) > parseInt($('.valignmiddle').parent().outerHeight())) { 

      $('.valignmiddle').parent().outerHeight($('.valignmiddle').outerHeight()); 

     } 
    }).trigger('resize'); 
}); 
}); 

</script> 
</body> 
</html>

источник

2014-12-14 Matthieu105

ваш код работает нормально, без необходимости обновления, проверки по console.log() в функции изменения размера –

Вы можете попробовать событие onresize на теге body, чтобы вызвать функцию javascript.

пример: - <body onresize="myFunction()">

В MYFUNCTION вы можете написать код для выравнивания. Используя это, вам не нужно обновлять страницу в окне изменения размера.

источник

2014-12-14 18:36:40

Использование JQuery для этого не имеет смысла ...

Вместо того чтобы дать вам то, что вы хотите, я дам вам то, что вам нужно ... лучший способ вертикальной Align чем-то вроде этого (PS: Я не мог найти браузер, который не поддерживает это, протестировал его и в IE8);

Вы можете увидеть его в действии HERE

CSS единственное решение

#yourdiv{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto; 
}

выше будет держать ваш ДИВ центрируется по вертикали даже при изменении размеров экрана.

Кроме того, если вы хотите абсолютный центр, просто добавьте левый и правый параметры, например, так:

#yourdiv{ 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
}

источник

2014-12-14 20:04:54 Alin

Нужно обновить страницу, чтобы сделать работу jquery

ответ

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