jQuery Forum

I need to center text in a select list. There is no cross browser and device method using CSS only, so ive used jQuery to set a text indent.

The code takes the text from the select list, adds it to a span (which with css makes the text the same size), and measures the width of the span. With that value it takes some simple maths to work out what the text indent needs to be.

$(window).load(function() {
  function textIndentFunc () {
     textString = $('#from-1 :selected').text();
     $('#hidden').text(textString);
     textWidth = $('#hidden').width();
     inputWidth = $('#from-1 select').width();
     indentMy = (inputWidth / 2) - (textWidth / 2);
     $('#from-1').css('text-indent',indentMy); 
}
$('#from-1 select').change(function() {
    textIndentFunc();
});
textIndentFunc();
});

Most of the time this code works fine but sometimes doesn't appear to do anything, in which case refreshing the page normally fixes it. Why might this code being so temperamental? Ive loaded the code on dom ready. 

Thanks

Im using the jQuery Mobile search filter with dividers: http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html

I need the dividers to collapse and uncollapse the list items below them when clicked, like the examples here:http://jquerymobile.com/test/docs/content/content-collapsible.html

I know jQuery Mobile can handle collapsable divs easily but can it be combined with my list or do I need to write some custom jQuery to do this?

Here is my site: http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

It works fine on firefox, chrome, safari and ie9, but messes up in IE8 and 7.

When you click on an image it expands. When you click on another image, any expanded images contract. I think its this second part of the jQuery causing problems. With IE8 and 7 the animation end up in the correct place, but all the images jump around before then.

$(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

Im trying to use the onAfter effect like in this demo: 
http://jquery.malsup.com/cycle/after.html