image - How can i resolve same bug with jQuery scripts to center a DIV with percentage? -
this code
<style> .classname{ width:55%; height:auto; margin:0 auto; } body{ text-align:center; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(window).resize(function(){ $('.classname').css({ position:'absolute', left: ($(window).width() - $('.classname').outerwidth())/2, top: ($(window).height() - $('.classname').outerheight())/2 }); }); // run function: $(window).resize(); }); </script>
when open page see div not centred, when reduce , reopen in full mod window of browser, div centred, plz me i'm going crazy try change
this
<script> $(document).ready(function(){ $(window).resize(function(){ $('.classname').css({ position:'absolute', left: ($(window).width() - $('.classname').outerwidth())/2, top: ($(window).height() - $('.classname').outerheight())/2 }); }); // run function: $(window).resize(); }); </script>
with (txh elhussein hashem)
<script> $(document).ready(function(){ resizefunction(); window.onresize = function() { resizefunction(); }; resizefunction(); }); function resizefunction(){ $('.classname').css({ position:'absolute', left: ($(document).width() - $('.classname').outerwidth())/2, top: ($(document).height() - $('.classname').outerheight())/2 }); } </script>
but result not change :(
i have noticed when refresh page, centered when reduce , reopen browser window
this div
<div class="classname"> <div><img style="width:100%" src="http://i39.tinypic.com/5f506d.jpg"/></div> </div>
p l z h e l p m e
it easier if see page, try using window.load. i'm guessing, class has image, ready getting called before .classname has width (it knows has image, doesn't know size of image).
<script> //window.load waits graphics finish loading before running $(window).load(function(){ $(window).resize(function(){ $('.classname').css({ position:'absolute', left: ($(window).width() - $('.classname').outerwidth())/2, top: ($(window).height() - $('.classname').outerheight())/2 }); }); // run function: $(window).resize(); }); </script>
Comments
Post a Comment