Can you explain this code for me (in red) [Archive]

View Full Version : Can you explain this code for me (in red)

skeatt

12-09-2002, 05:58 AM

This code was originaly posted by Ardios: however I've taken a lot of bits out to make it easier to understand. (like styles)

Original thread (http://www.codingforums.com/showthread.php?s=&threadid=5504&highlight=dynamic%2Fvariable)

I don't understand how the images are loaded and how the function in the for loop is activated... pic[i].myObject.onload = new Function(

I guess I'm having a hard time understanding the need for "myObject: null" it's function and how the ":" bit helps the array.
(arrays were always my weak spot):(

Is there another way off writing the opener?

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var HTML;
var newWindow = null;
var pic = new Array();
var path = 'images/'; //images directory

/* URLS below, as shown */
pic[0] = {
src: 'cover.jpg',
myObject: null,
width: null,
height: null,
title: 'Sammy',
loaded: false
}
pic[1] = {
src: 'A.E.Newman.jpg',
myObject: null,
width: null,
height: null,
title: 'Gulbuddin Hekmatyar',
loaded: false
}
pic[2] = {
src: '777d.jpg',
myObject: null,
width: null,
height: null,
title: 'Dicky',
loaded: false
}

// preloader
for (var i=0; i<pic.length; ++i) {
pic[i].myObject = new Image();
pic[i].myObject.onload = new Function(
'pic['+i+'].width=this.width;' +
'pic['+i+'].height=this.height;' +
'pic['+i+'].loaded=true;'
);
pic[i].myObject.src = path + pic[i].src;
}

function graphwin(picObj) {
if (newWindow && !newWindow.closed) newWindow.close(); // close the window each time.
if (!arguments.length) return; // if there is no parameter passed, do nothing
if (picObj.loaded) {
HTML = '';
HTML += '<html><head><title>'+picObj.title+'</title><script type="text/javascript">';
HTML += 'onload=function(){self.focus()};';
HTML += '<\/script></head>';
HTML += '<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="steelblue">';
HTML += '<img border="0" width="'+picObj.width+'" height="'+picObj.height+'" ';
// HTML += 'src="'+ path + picObj.src+'">';
HTML += 'src=" ' + picObj.myObject.src+' ">';
HTML += '<table width="100%" cellspacing="0" cellpadding="0" border="1"><tr>';
HTML += '<td align="center" bgcolor="steelblue">';
HTML += '<a href="javascript:self.close()">close</a>';
HTML += '</td></tr></table></body></html>';
var Gleft = screen.availWidth/2 - picObj.width/2;
var Gtop = screen.availHeight/2 - picObj.height/2;
var winFeatures = 'width='+picObj.width+',height='+(picObj.height+16); // Add Title bar to allow room for close link.
winFeatures +=',left='+Gleft+',top='+Gtop+',status=0';

newWindow = window.open('javascript: opener .HTML','newWindow',winFeatures); // HTML was defined as a variable

// alert(picObj.myObject.src);
}
}

</script>
</head>
<body>
<a href="javascript:void graphwin(pic[0])">Sam </a><br><br>
<a href="javascript:void graphwin(pic[1])">Gul </a><br><br>
<a href="javascript:void graphwin(pic[2])">Dick </a><br><br><br>
<a href="javascript:void graphwin()">close window</a>
</body>
</html>

piglet

12-09-2002, 12:39 PM

Ok.

The list of assignments are setting the attributes of the Array element. Javascript allows you to define and set new attributes for objects "on the fly" - either generically for a type of object or just adding one to an existing object.

Hense: myObject: null, sets the pic[n].myObject property to null ready for further use in the preloader. It's not really necessary - but does allow you to see all the attributes in one place so I won't fault it for that.

The preloader part:

for (var i=0; i<pic.length; ++i) {
//do something for each element in the "pic" array

pic[i].myObject = new Image();
//Make the array element myObject property be an image object

pic[i].myObject.onload = new Function(
Do this when the image I'll tell you about in a minute has successfully loaded (the src= on the line after you stopped highlighting in red)

'pic['+i+'].width=this.width;' +
//set the element's width attribute to the width of the loaded image

'pic['+i+'].height=this.height;' +
//ditto to the hight

'pic['+i+'].loaded=true;'
//set a flag to say it's loaded
);

Really this is unnecssary as you're just duplicating information from one object to another - you could as easily look at the myObject image properties.

javascript: opener
This says that this is a script or variable to interpret - not a URL string. You can do the same on an anchor: <a href="javascript:alert(foo)">say foo</a> in the script it takes the URL of the window to open from the variable "HTML".

Is there anything else you wanted explaining?

skeatt

12-09-2002, 02:38 PM

:thumbsup: Thanks piglet : I'm sure there is other things that will
stump me, I'm going to take this offline with me and work through it.
I get more help from the forum than my teacher. :eek:

I was hoping to include something like this in my CV exercise, (Not the same piece of code, because I wanted to do it my own way) but I needed to understand what things did first to give me a head start.

Unfortunately time has run out for my CV dealine, so I've opted to just link my pages to existing HTML pages instead of building one up and writing it out.

I did discover I could write this...
newWindow = window.open('javascript: opener.HTML','newWindow',

Like this...
newWindow = window.open('','newWindow',winFeatures); newWindow.document.write(HTML)

But you have to close the document after writing don't you?

piglet

12-09-2002, 02:58 PM

you have to close the document after writing don't you
No - you don't have to - in fact some sites take advantage of this by never writing out the </body> or </html> and doing more writes when required to add to the end of the document...

Not that I'd recommend it!

glenngv

12-10-2002, 03:28 AM

Originally posted by piglet

No - you don't have to - in fact some sites take advantage of this by never writing out the </body> or </html> and doing more writes when required to add to the end of the document...

Not that I'd recommend it!

http://codingforums.com/showthread.php?s=&threadid=10954&highlight=document.close

skeatt

12-10-2002, 03:44 AM

Thanks Glenn:thumbsup: You brought up some important notes on closing the document which I can relate too having just experienced some of NS4's picky character.

EXAMPLE
This one had me stumped why this wouldn't work in NN4.7
function closeMe() {self.close();}
(I used the  at the other.

IE5 didn't complain

Thanks:D