CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jewetnit
jewetnit

Reputation: 41

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

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.

Upvotes: 3

Views: 1438

Answers (6)

Mevin Babu
Mevin Babu

Reputation: 2475

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.)

Upvotes: 0

MCSI
MCSI

Reputation: 2904

try putting your script on a

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

Upvotes: 0

MCSI
MCSI

Reputation: 2904

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

and it works fine

Upvotes: 0

Tetaxa
Tetaxa

Reputation: 4403

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.

Upvotes: 0

MCSI
MCSI

Reputation: 2904

$('#'.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();

Upvotes: 3

CassOnMars
CassOnMars

Reputation: 6181

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?

Upvotes: 0

Related Questions