JQuery .resize() value update without requiring page reload

JavaScript
1

Hi there,

I am new to Javascript, so please excuse my ignorance in advance :slight_smile:

I am wanting to obtain the computed width value of an element (not window). This is of course easy enough using .width(), but the value needs to reflect the change in this element’s width as a result of window resize (the element in question is being used as a page wrapper that utilizes the expand-to-fit of a block-level element).

I’ve read in various places that .resize() only works on window, but have managed to stumble across an article (benalman(dot)com/code/projects/jquery-resize/examples/resize/) in which .resize() works on an element other than window.

I’ve managed to craft together a very simple few lines based on the logic in the article. However, although the computed width of the element is returned, it requires a page reload in order for the value to be updated. What I require is the value to be update incrementally (like in article) without requiring a page reload.

Would someone be kind enough to take a quick look at my script and tell me where I’m going wrong?


function foo() {
    $("#page-inner").resize(function(){
        $("#header").append($(this).width());
    });

    $("#page-inner").resize();
}

Thanks very much for any help you can give

2

Doh!

Just looked at the example a bit more, and it uses his own plugin!