jQuery .width() and css('width') returning invalid values

Question

I'm trying to get the width of a parent from an element. To do this I'm using:

parent = $("#"+id).parent().attr("id");
parentWidth = $('#'+parent).width();

I've also tried:

parentWidth = $('#'+parent).css('width');

At first I used

$('#'+id).parent().width();

this didnt work either.

The parent variable is correctly set, however, the width of a parents div is 90%, .width() returns 90, and .css('width') returns 90px. In my .css widht is set to 90%, i also tried adding it in the style tag in the element itself.

<div id="tabs" style="height:90%;width:90%;">

in the CSS file:

#tabs{
height:90%;
width:90%;
position:absolute;
z-index:10;
overflow:hidden;
}

I keep getting 90 as return value. What am I doing wrong? Thanks

This is the page I'm talking about: http://www.amsterdamslyceum.lelie.demodomein.com/index.php Don't mind the db errors, didnt set up the db on the host yet as I just started developing.

You can set "parent" with $('#' + id).parent(); and there's no need to find it by id like that. — Pointy
– Pointy, Commented Oct 26, 2011 at 13:40
If the parent element of your #tabs div has a 100px width, it would be legitimate for width() and css() to return 90px. Are you sure that isn't the case? — Frédéric Hamidi
– Frédéric Hamidi, Commented Oct 26, 2011 at 13:40
#tabs actually is the parent, it almost covers the entire webpage (90%) so the width values in CSS seem fine to me — jewetnit
– jewetnit, Commented Oct 26, 2011 at 13:42
why you dont just use document.getElementById(id).parentNode.offsetWidth; or document.getElementById(id).parentNode.style.width — Marwan
– Marwan, Commented Oct 26, 2011 at 13:43

MCSI · Accepted Answer · 2011-10-26 13:45:25Z

3

$('#'.id).parent().width(); must be $('#' + id).parent().width();

do you check the parent? first in the browse console (FF and Chrome) check if this code returns the parent that you want $('#' + id).parent();

answered Oct 26, 2011 at 13:45

MCSI

2,92430 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jewetnit Over a year ago

the parent's id is returned fine, if you visit the link you'll see I placed alerts printing the parent div name and its dimensions. thanks for your reply

Bas Slagter · Accepted Answer · 2011-10-26 13:42:15Z

0

At first I used

$('#'.id).parent().width();

The $("#".id) might be your problem. Try $("#" + id).parent().width()

Other thought: Might #tabs have additional style info in the CSS?

edited Oct 26, 2011 at 13:42

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

answered Oct 26, 2011 at 13:40

CassOnMars

6,1812 gold badges34 silver badges47 bronze badges

3 Comments

jewetnit Over a year ago

Oh, i'm sorry, I used a plus symbol, typo in the first post, i'll correct it now, thanks.

CassOnMars Over a year ago

What about the css itself? Anything for #tabs?

jewetnit Over a year ago

#tabs{ height:90%; width:90%; position:absolute; z-index:10; overflow:hidden; }

Tetaxa · Accepted Answer · 2011-10-26 14:03:46Z

0

The documentation http://api.jquery.com/ready/ says this:

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

Your scripts seem to be placed before the stylesheets. I'm guessing the styles have not been loaded when your code runs.

answered Oct 26, 2011 at 14:03

Tetaxa

4,4031 gold badge21 silver badges25 bronze badges

5 Comments

jewetnit Over a year ago

does placing the function call in $("#tabs").ready() work? Because I had already thought of that, it didnt work for me though, but maybe I messed up somewhere.

Tetaxa Over a year ago

I don't know. Try using load or just move the linked scripts below the stylesheets.

jewetnit Over a year ago

actually the function is called after the stylesheet is loaded, I'll try the load() function in a second, need to reboot my laptop.

Tetaxa Over a year ago

Well I'm sure this is related to the problem. Wait for the page to load then run objDimensions('tabs-1',2,2,50,0) in the console and it works. May also be that it hasn't finished tabifying #tabs.

jewetnit Over a year ago

thank you @Tetaxa , should've thought of debugging like that.

MCSI · Accepted Answer · 2011-10-26 14:03:47Z

0

for example i try this : $('#tabs-1').parent().width()

and it works fine

answered Oct 26, 2011 at 14:03

MCSI

2,92430 silver badges35 bronze badges

Comments

MCSI · Accepted Answer · 2011-10-26 14:42:19Z

0

try putting your script on a

$(document).ready(function () {YOUR CODE HERE});

answered Oct 26, 2011 at 14:42

MCSI

2,92430 silver badges35 bronze badges

Comments

Corey Adler · Accepted Answer · 2012-10-26 19:23:12Z

0

I came across the same problem and I found out that it's because of other jQuery plugins or functions that you might be using to modify the html structure (like using sliders or tabs etc.)

edited Oct 26, 2012 at 19:23

Corey Adler

16.2k18 gold badges70 silver badges80 bronze badges

answered Oct 26, 2012 at 15:17

Mevin Babu

2,48524 silver badges35 bronze badges

Collectives™ on Stack Overflow

jQuery .width() and css('width') returning invalid values

6 Answers 6

1 Comment

3 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related