javascript - Why doesnt my function run on .resize()? -
javascript - Why doesnt my function run on .resize()? -
i have created function center <div>
using jquery, works on page load doesn't on page resize.
what doing wrong?
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()); // run 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 after getting function fire on page load, has inconsistent behaviour between page load , window resize http://jsfiddle.net/7zqkd4w8/
it should $(window).resize(recenter);
since sending function not results of calling function.
javascript jquery html css
Comments
Post a Comment