Bug Tracker

Modify

Ticket #8043 (closed bug: worksforme)

Opened 3 years ago

Last modified 3 years ago

Filter function does not fire on all items in AppleWebKit

Reported by: leomrozek@… Owned by: leomrozek@…
Priority: low Milestone: 1.next
Component: dimensions Version: 1.4.4
Keywords: Cc:
Blocking: Blocked by:

Description

I have .NET DataList that can show over 50 images at a time and have a one line statement that loads in the page $(document).ready() that is to resize all images on the page with a class of "photo" that are greater that 100px in height to be 100px in height. The statement is:

$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

The problem is that in any browser that uses the AppleWebKit (Chrome, Safari, iPad) not all the images that are to be resized get resized and it is random (though usually the first 4 or 5 do and the remainder do not). Remarkably, Mozilla (Firefox and Opera) and IE 6/7/8/9 work correctly.

I have put in tracing statements and some of the images that are not being resized initially report as 0px in height. If I put in a 1 second delay using setTimeout() for these browsers, the page loads correctly.

if ($.browser.webkit) {

setTimeout('$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");', 1000);

} else { This works fine on IE6/7/8/9, Firefox and Opera $(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

}

As a corporate app, I am stuck right now using 1.4.2 on our production site, but I have done testing on my local machine using 1.4.4 and get the same results.

Change History

comment:1 Changed 3 years ago by jitter

  • Owner set to leomrozek@…
  • Priority changed from undecided to low
  • Status changed from new to pending
  • Component changed from unfiled to dimensions

Try using

$(window).load( resizing function );
$(document).ready( alltheotherstuff );

for compatibility with WebKit browsers on image manipulation. It's known that WebKit fires document.ready but not all image sizes might be available yet.

Please report back if that works for you.

Last edited 3 years ago by jitter (previous) (diff)

comment:2 Changed 3 years ago by anonymous

Tried the change above and it seems to work. One thing I did notice when testing this is that in non-Webkit Browsers (IE, Firefox, Opera), ALL image sizes also may not be available when ready() fires (I have over 50 images on the page that it is checking). It is better than webkit browsers but still not perfect.

As a fix, I am firing the resizing function in the .ready() event to catch the images that do have size available and running again in .load() to catch those that haven't resized yet that need to be resized.

comment:3 Changed 3 years ago by jitter

  • Status changed from pending to closed
  • Resolution set to worksforme

As the suggested solution works for the reporter I'm closing this ticket.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.