How to grab the width attribute of an element using jQuery?

Question

I created a graph using html, now I want to give it a nice effect when it initially loads. I want the bars of the graph to fly in from the left. The code below does that, only problem is each bar ends up with 70% width (obviously since I set that in the jQuery code). Instead I need that number to be unique to the width set within the bars (span tags). I assume the answer would be something like:

$(this).attr('width')...

but I can't get it to work, please help.

The Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">

div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; }

div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $('div.graph').fadeIn('slow');

    $('div.graph > span').animate({
        width: "70%"
    }, 1500 );

});
</script>

<div class="graph">
    <span style='width:10%'></span>
    <span style='width:40%'></span>
    <span style='width:25%'></span>
    <span style='width:15%'></span>
    <span style='width:10%'></span>
</div><!-- graph -->

Can you not use $(this).width() ? Nevermind that, in my suggestion "this" is the window, and therefore the window's width. — Jon
– Jon, Commented Apr 2, 2011 at 0:08

Adam Kiss · Accepted Answer · 2011-04-02 00:36:07Z

3

edit
After reading your code, if you don't care for non-JS support [there are many casex when you don't], you can use .data() method [very elegant, too :)]

HTML:

<span data-width="10%">Hello</span>

JS:

$('div.graph > span').each(function(){
    $(this).animate({
        width: $(this).data('width')
    }, 1500 );
});

updated example

http://jsfiddle.net/vGUM7/2/

code

.animate({
  'width': $(element).width()
 },500);

example

http://jsfiddle.net/vGUM7/1/

[updated with %]

edited Apr 2, 2011 at 0:36

answered Apr 2, 2011 at 0:20

Adam Kiss

11.9k10 gold badges51 silver badges82 bronze badges

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

Comments

Khez · Accepted Answer · 2011-04-02 00:18:54Z

1

Try this on for size:

$('div.graph > span').each(function(){
    var w=$(this).width();
    $(this).width(0);
    $(this).animate({
        width: w
    }, 1500 );
});

answered Apr 2, 2011 at 0:18

Khez

10.3k2 gold badges35 silver badges53 bronze badges

3 Comments

Justin808 Over a year ago

you should really save $(this) to a variable or it has to do the lookup every time, its just a goos habit to get into. See my answer.

Khez Over a year ago

well actually the best way to do it would be $(this).width(0).animate();

Adam Kiss Over a year ago

since everyone seems to be selling himself here, for more elegant solution you can check out my answer ;)

Justin808 · Accepted Answer · 2011-04-02 00:17:43Z

0

you could do something like:

$(document).ready(function() {
    $('div.graph > span').each(function() {
        var $this = $(this);
        var w = $this.width();  // Grab what it should be
        $this.width(0);  // Reset so it does the animation
        $this.animate({
            width: w
        }, 1500 );
    });
    $('div.graph').fadeIn('slow');
});

It reads what you want the bar to be, then sets it back to 0. setting up the animation to go. After its all set, the fade in starts

answered Apr 2, 2011 at 0:17

Justin808

21.7k48 gold badges166 silver badges274 bronze badges

Comments

Jon · Accepted Answer · 2011-04-02 00:18:33Z

0

Try this...

     $('div.graph').fadeIn('slow');

     var bars = $('div.graph > span');
     for(var i=0; i<bars.length; i++){
       var w = $(bars[i]).width();
       $(bars[i]).width(0);
       $(bars[i]).animate({
          width: w
       }, 1500);
     }

answered Apr 2, 2011 at 0:18

Jon

9794 silver badges9 bronze badges

1 Comment

Justin808 Over a year ago

jQuery has the .each() method for things like this.

iwasrobbed · Accepted Answer · 2011-04-02 00:33:21Z

-1

$(this).width() should work, or else $(this).css('width');

however .css('width') will return the value that the css has, so could be '10%' for example or 'auto'

edited Apr 2, 2011 at 0:33

iwasrobbed

46.8k21 gold badges152 silver badges195 bronze badges

answered Apr 2, 2011 at 0:10

Lauw

1,71511 silver badges12 bronze badges

2 Comments

Sherman Over a year ago

yeah but another problem is I can't use any of that within the animate function's acceptable parameters.

PHP Over a year ago

create as a variable, and use the variable instead.

Collectives™ on Stack Overflow

How to grab the width attribute of an element using jQuery?

5 Answers 5

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related