JQuery height () function not working on element

I am currently going to put together a carousel with jQuery touch. However, I seem to run into a small problem when setting the height (or width) of an element.

Below is the corresponding function code:

carousel = function( container, options )
{
    this.settings = $.extend({

        // General settings:
        width: 600,
        height: 400,
        slides: 'div',
        snapTo: true,
        mouseSupport: true,
        trackMovement: true,
        slideWidth: 600,
        slideHeight: 400,

        // CSS classes:
        wrapperCls: 'carousel_wrapper',
        innerCls: 'carousel_scroll_inner'

    }, options);

    this.container = container;
    this.scroller = null;
    this.slides = this.container.children(this.settings.slides);
    this.numSlides = this.slides.length;
    this.scrollWidth = this.settings.width * this.numSlides;

    this.container.addClass(this.settings.wrapperCls);
    this.scroller = $('<div />').addClass(this.settings.innerCls);
    this.container.wrapInner(this.scroller);

    this.scroller.width(1500)

    this.scroller.css('width', this.scrollWidth);
    this.container.css({ width: this.settings.width, height: this.settings.height });
};

      

        
        
        
      

    

This, in turn, is called:

$(function() {
    var carousel1 = new carousel($('#myElement'));
});

      

        
        
        
      

    

#myElement

definitely exists and no error occurs. this.scroller

also contains the correct jQuery object that was wrapped with content this.container

. The problem is that I can not set the width or height of the CSS this.scroller

, using a function width()

, height()

either css()

.

What am I missing? I've demonstrated the jsFiddle issue . If you check the element inspector, you will see that the dimensions are not updated for the element div.carousel_scroll_inner

.