jqTouch event handling and strange behaviour of functions

Question

Can someone tell me why the pictures are jumping at the end which i want to center?

http://vertic4l.com/prinzipalmarkt/mobile.php

Here is a mobile website i'm working on, if the first li element is entered, a function will be triggered. But it doesn't works like it should...

I already did this on the normal website without a lot trouble (vertic4l.com/prinzipalmarkt/index.php). But now i dont have any idea where i should look at for solving that issue.

If first li element is entered:

viewport will be checked, then dimensions set, images will be centered, and finally the overlayin div fades away and will be removed from DOM.

But these last points dont wanna do like they should. Further more i got to trigger a 2nd click or have to do it manually otherwise all images will not be centered. :/

Here is the Code:

jQuery(function(){
            jQuery('body').bind('turn', function(event, info){
                var windowWidth = $(window).width();
                if(windowWidth >= 450){
                    jQuery(".dcontent").each(function(){
                        jQuery(this).css({
                            'width' : '450px'
                        });
                    });
                }
                else{
                    jQuery(".dcontent").each(function(){
                        jQuery(this).css({
                            'width' : '310px'
                        });
                    });
                }
            });

            jQuery('#kaufleute').bind('changeState',function(){
                var windowWidth = $(window).width();
                if(windowWidth >= 450){
                    jQuery("#kasten").css({'width' : '460px'});
                    jQuery(".img_center").each(function(){
                        var $li = jQuery(this), $img = $li.find('img');
                        $li.css({
                            'margin-right' : '4px',
                            'margin-bottom' : '4px',
                            'width' : '145px',
                            'height' : '145px',
                        });
                        $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
                    });
                }
                else{
                    jQuery(".img_center").each(function(){
                        jQuery("#kasten").css({'width' : '320px'});
                        var $li = jQuery(this), $img = $li.find('img');
                        $li.css({
                            'margin-right' : '6px',
                            'margin-bottom' : '6px',
                            'width' : '150px',
                            'height' : '150px'
                        });
                        $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
                    });
                }
                jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
                    jQuery(this).remove();
                });
            });
            jQuery('.page').click(function(){
                jQuery('#kaufleute').trigger('changeState');
                jQuery('#kaufleute').trigger('turn');
            });
        });

Can anybody help me out?

Answer 1

No one out there?