Question

I’m using jScrollPane and I had some issues in Chrome and Safari with the height of the scrollable area.

To make jScrollPane work I have to set HEIGHT and WIDTH for any image inside the scrollable area.

No problem with .css but what if one image is Ex: in portrait mode?
To avoid setting width and height manually I realized… jQuery! 🙂

For now I have something like this:

imageWidth = $('.scroll_pane img').width();
imageHeight = $('.scroll_pane img').height();   
$('.scroll_pane img').css({'width': imageWidth, 'height': imageHeight});

That is half correct (I suppose) as now from:

<img src="some/url/image.jpg"/>

on DOM ready I get this:

<img src="some/url/image.jpg" style="width: 120px; height: 220px"/>

For the first image. The problem is that now all the other images have the same styles.

How to make EACH image write to it self his own styles?

EDIT:

Solution, thx to Cybernate (and Capsule for future suggestions.):

$(window).load(function () { 
    $('.scroll_pane').jScrollPane();

    $('.scroll_pane img').each(function(){    
        var $this = $(this);   
        var imageWidth = $this.width();   
        var imageHeight = $this.height();        
        $this.css({'width': imageWidth, 'height': imageHeight}); 
    }); 
});

Now calculates correctly the images styles and finally jScrollPane works in Safari and Opera!

Answer 1

Use the each function and then operate on individual element.
e.g:

$('.scroll_pane img').each(function(){
    var $this = $(this);
    var imageWidth = $this.width(); 
    var imageHeight = $this.height();    
    $this.css({'width': imageWidth, 'height': imageHeight}); 
});