javascript - Dynamically center div vertically and horizontally using jQuery -


i need center vertically , horizontally div called ".box" inside <body></body>. contains <h1>, , that's all. in future, may contents <img>.

i tried lot of tricks this, unfortunately doesn't work well...

so found on topic : centering div vertically & horizontally using jquery solution jquery. it's not working perfectly, because div stays on left of screen can see here : http://www.arcadmedia.com/

so i'm looking solution (in jquery, or in css nothing working me).

i think solutions 1 : http://jsfiddle.net/pqdqb/ not best, , jq can better.

i'm using code : 

$(function() { $('.box').css({     'position' : 'absolute',     'left' : '50%',     'top' : '50%',     'margin-left' : -$('.box').outerwidth()/2,     'margin-top' : -$('.box').outerheight()/2     }); });

i don't know problem.

edit : box has fit content dynamically!

this calculate dynamically , position .box @ center of screen. can call function on resize , rotate events.

$(updateboxdimension); $(window).on('resize', updateboxdimension);  function updateboxdimension() {     var $box = $('.box');      // center box     var boxleft = ($(window).width()) / 2 - ($box.width() / 2),         boxtop = ($(window).height()) / 2 - ($box.height() / 2);      $box.css({         left: boxleft,         top: boxtop     }); }

demo: https://jsfiddle.net/tusharj/a5lpeoux/1/


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more