xhr loads cmotion gallery, chrome fail

[aldobranti]

1) Script Title: cmotion

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem: Chrome appears to fix trueContainer offsetWidth before loading images.

4) Sample Site (use Chrome ) : http://aldobranti.eu/#!photography/beaches/P9260355

JScheuer, I have used your cmotion library a number of times and it has given me many opportunities to learn more about JS. Thank you.

I have been working on a do-it-yourself content management system where I get the server side to tell me about image files in a directory and then I populate one of your cmotion controls with a rolling display of thumbnails. The xhr sends returns to the client with a pile of javascript declarations with which I build the contents of trueContainer; here is my xhr call



function galleryRequest(dir,fil,failure) {
"use strict";
var request2= makeHttpObject();
var Y = document.getElementById("trueContainer");
while (Y.childNodes.length){ Y.removeChild(Y.firstChild) };
request2.open("GET","./imageGallery2.php?path="+dir+"/"+fil,true);
request2.send(null);
var myHandler = new Event();
myHandler.addHandler(fillup);
request2.onreadystatechange
= function(){
if(request2.readyState == 4){
if(request2.status == 200) {
gallery = new Array();
//Y.innerHTML = request2.responseText;
doScripts( request2.responseText); // evals the returned JS into an array gallery of objects if ( gallery.length ) {
var frag = document.createDocumentFragment();
for (var g=0;g<gallery.length;g++){
var a = document.createElement('a');
a.href = gallery[ g].href;
var i = document.createElement('img');
i.src = gallery[ g].src;
i.alt = gallery[ g].alt;
i.title = gallery[ g].alt; // i.style.width='48px'; /* totally gross hack */
a.appendChild( i);
frag.appendChild( a);
}
Y.appendChild( frag);
}
myHandler.execute();
} else if (failure) failure(request2.status, request2.statusText)
}
};
}

This works well in FF Safari IE8 and Opera but not in Chrome.
From what I can see trueContainer.offsetWidth (Chrome ) is reporting values like 10 and 20 which seem closer to the accumulated padding of the images while the other browsers report the accumulated image widths.
From the code you'll see that I have picked up on suggestions made to people reporting similar problems in ajax :

• I tried your OO cmotion but it didn't fix Chrome's view of offsetWidth
• I don't use innerHTML
• I use a document fragment to save hitting the DOM
• I use an event to call 'fillup' so that the DOM can redraw before I query offsetWidth
• not shown but have tried a span rather than the nobr
• I don't use jquery because I really want to learn raw JS ( time enough to use jquery when somebody else is paying ;)

I am guessing that Chrome freezes its view on the offsetWidth value at the time of the appendChild -- if I uncomment the totally gross hack of styling the image width then it allows the trueContainer to scroll but that also messes with the height with which the thumbnails present in the browser.

Can you suggest anything else ? I cannot claim to be tearing my hair out ( I have none) but I have given this quite a lot of attention

bw

A

[jscheuer1]

Not working here in IE 9 or Firefox 12:


SCRIPT5007: Unable to get value of the property 'offsetWidth': object is null or undefined
motiongallery.js, line 166 character 1

That's IE, Firefox points to the same line and says:


crossmain is undefined

Neither browser displays any images, not even the large image.

I think they're being non-compliant with document.createDocumentFragment(). Or you haven't created/hard coded all of the elements required for the markup side of this script. But I'm not sure, so I've left all that as is in the below.

What you have works in Opera. In Chrome, if I open up the console and run fillup(), it works there too. So obviously the images simply haven't loaded/communicated their dimensions to the browser yet.

Virtually no way to test this locally for me. And there's an extra trailing } in the function in your post, I'm not sure if that's from other code that's not shown or left over from the perhaps inadvertently commented out:


if ( gallery.length ) {

I went with the latter and reinstated it because that's how it is on the live page. My suggestion:


function galleryRequest(dir,fil,failure) {
"use strict";
var request2 = makeHttpObject();
var Y = document.getElementById("trueContainer"), loadapproved;
while (Y.childNodes.length){ Y.removeChild(Y.firstChild) };
request2.open("GET","./imageGallery2.php?path="+dir+"/"+fil,true);
request2.send(null);
var myHandler = new Event();
myHandler.addHandler(fillup);
request2.onreadystatechange = function(){
if(request2.readyState == 4){
if(request2.status == 200) {
gallery = new Array();
doScripts( request2.responseText); // evals the returned JS into an array gallery of objects
if ( gallery.length ) {
var frag = document.createDocumentFragment(), imgs = gallery.length;
for (var g=0;g<gallery.length;g++){
var a = document.createElement('a');
a.href = gallery[ g].href;
var i = document.createElement('img');
i.onload = i.onerror = function(){
if(!--imgs){
loadapproved = true;
}
};
i.src = gallery[ g].src;
i.alt = gallery[ g].alt;
i.title = gallery[ g].alt; // i.style.width='48px'; /* totally gross hack */
a.appendChild( i);
frag.appendChild( a);
}
Y.appendChild( frag);
}
(function(){
if(loadapproved){
myHandler.execute();
} else {
var f = arguments.callee;
setTimeout(f, 100);
}
})();
} else if (failure) failure(request2.status, request2.statusText)
}
};
}

Note: This is only to resolve the issue with Chrome. As long as I haven't made or copied any serious typos and/or syntax errors, it should take care of it. However, since you didn't ask and don't seem to think there's an issue with IE or Firefox, I haven't addressed that in the above code.

Any questions?

[aldobranti]

many thanks john
(having some probs with your quick reply code in Chrome
let's hope 'advanced' allows me to say thank you properly )

we are now clean across the board (ie9 through a virtual box)

I figured out imgs and dumbed down the timer callback pattern to allow for strictmode bellyaching about callee

I've donated a proper wet beer, none of that virtual rubbish

best

A

[jscheuer1]

And thank you.

I'd like to revise what I said before about IE and Firefox. They're both fine.

What happened was I first viewed the page in Opera which has as part of its right click context menu the option of, "Open With". I used that to open the page in IE and Firefox. For some reason it did so without the hash, so of course there was no content.

This makes me think though, say someone goes to:

http://aldobranti.eu/

Shouldn't they be greeted with something other than an essentially blank page?

I would think so. Perhaps you could have a default page for when no hash is present in the URL.