div.width() returns wrong value jquery

Question

I'm trying to write a jQuery script to place a div block in the center of the screen. The problem is that a div block I pass to this function is kinda badly styled or something and div.width(), div.outerWidth(), div.outerWidth(true), div.innerWidth() all return the same wrong value of 1839px that is a $(window).outerWidth() value. I can't figure out where I made a mistake? Please, help!

Here is a code:

function absoluteCenter(div) {

var winWidth = $(window).outerWidth(true);
var winHeight = $(window).outerHeight(true);
var divWidth = $("#"+div).outerWidth(true);
var divHeight = $("#"+div).outerHeight(true);

alert(divWidth);

$("#"+div).css({'position':'absolute', 'left':(winWidth/2 - divWidth/2), 'top':(winHeight/2 - divHeight/2)});

}

/* MAIN JS FILE TO INCLUDE ALL WRITTEN FUNCTIONS */

$(document).ready(function(){

  diagonalize('about_container', 1, 'about_block');
  diagonalize('products_container', -1);

  absoluteCenter('about_block');

  scrollOnClick('to_about', 'about_container');
  crollOnClick('down_arrow', 'about_container');
  scrollOnClick('to_products', 'products_container'); 
});

HTML:

 <div id="second_screen">
            <div id="about_container">
                <div id="about_block">
                    TROUBLE
                </div>
            </div>
 </div>

Main SASS file:

/* MAIN STYLE FILE OF LANDING PAGE */
/* STYLES FOR LANDING SCREENS WRAPPERS ARE HERE */

@import libs/hover/hover
@import colors
@import mixings
@import fonts
@import texts
@import menu
@import extends
@import landing_screen
@import about_screen
@import products_screen

body
  margin: 0
  padding: 0
  background-image: url("../res/landing-background.png")
  +background_cover

// landing screens wrappers
#first_screen, #second_screen, #third_screen
  @extend .screen_wrapper

Also I'm using diagonalize script skew div blocks (see a screenshot for a reference):

function diagonalize(div, direction, compensation_div) {

var degree = Math.atan(0.13*$(window).width()/$(window).height())* (180/Math.PI);

if(direction === -1) degree = -degree;

$("#"+div).css({'-webkit-transform': 'skew('+degree+'deg)', '-moz-transform': 'skew('+degree+'deg)', '-o-transform':'skew('+degree+'deg)'});

$("#"+compensation_div).css({'-webkit-transform': 'skew(-'+degree+'deg)', '-moz-transform': 'skew(-'+degree+'deg)', '-o-transform':'skew(-'+degree+'deg)'});
}

@Roy well, css is also an option. And I would say it's better one. But I didn't managed to achieve a cross-browser (for IE pre 8) solution with css. — ddnomad, Mar 10 '16 at 23:01
Is `width` specified for this `div` in any of the imported stylesheets? Otherwise `div` as [block-level](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements) element will take width of the parent element — Juicy Scripter, Mar 10 '16 at 23:11
No, it has no width and wraps a text inside (display: inline block). I highlighted it with a background-color and it's not wider that a word inside. — ddnomad, Mar 10 '16 at 23:14

score 1 · Answer 1 · answered Mar 10 '16 at 23:14

1

This will work (also in IE8), if you know or set the width of the div.

div {
  background-color: pink;
  width: 200px;
  height: 100px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div class="centered-box"></div>

answered Mar 10 '16 at 23:14

Roy

7,811
4
24
47

Yes, that's good solution. But the problem that both width and height of div are dynamic and I can't set them as constants. – ddnomad Mar 10 '16 at 23:17
@ddnomad Too bad, you could try this (plain JS): http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height – Roy Mar 10 '16 at 23:31
offsetWidth returned the same value. I looked through all my code a couple of times and still can't figure out why it behaves so. Just weird. – ddnomad Mar 10 '16 at 23:35

div.width() returns wrong value jquery

1 Answers1