PDA

View Full Version : overlay.body has no properties?



thejoker101
19 Oct 2006, 9:30 PM
Using Firebug, I get the error: 'overlay.body has no properties' with the code below. Not sure what's going on. I'm just trying to get this so that it searches the document for links with the 'pb' class and push them into a photobox. The code I initially started with, the YUI example had all the images predefined, but that's not very usable.

I think I'm fairly close to getting this to work...

I would really appreciate some help, thanks in advance!

JS:


function photoboxInit() {
var photoboxes = YAHOO.util.Dom.getElementsByClassName('pb', 'a');

if(photoboxes.length > 0) {
var photoboxContainer = new YAHOO.widget.PhotoBox("win", {
effect:[
{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}
],
fixedcenter: true,
constraintoviewport: true,
underlay:"none",
close:true,
visible:false,
draggable:false,
modal:true,
photos:[{src:"http://altbike.com/wp-content/uploads/2006/09/CIMG0919_500.JPG",caption:"Initial Picture Remove if possible"}],
width:"500px"}
);

photoboxContainer.photos = new Array();
for(var i = 0; i < photoboxes.length; i++) {
tempArray = new Array();
tempArray['src'] = photoboxes[i].href;
tempArray['caption'] = photoboxes[i].title;
photoboxContainer.photos.push(tempArray);
YAHOO.util.Event.addListener(photoboxes[i].id, 'click', photoboxContainer.show());
}
photoboxContainer.render();
}
}
YAHOO.util.Event.addListener(window,'load',photoboxInit);


HTML:


<DOCTYPE>
<html>

<head>
<meta>
<title></title>

<link>
<link>
<link>

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

</head>
<body>

<a id="link1" href="http://altbike.com/wp-content/uploads/2006/09/CIMG0918_500.JPG" class="pb" title="test-title1">
http://altbike.com/wp-content/uploads/2006/09/CIMG0918_500.JPG
</a>





<a id="link2" href="http://altbike.com/wp-content/uploads/2006/09/CIMG0918_500.JPG" class="pb" title="test-title2">
http://altbike.com/wp-content/uploads/2006/09/CIMG0918_500.JPG
</a>

</body>
</html>

jbowman
20 Oct 2006, 3:28 AM
Did you extend overlay to create the photobox? If so, you may want to post the code where you extended it, because I'm betting the error is in there. Things extended from Module (ie: Overlay, Panel) usually have their body set using module.setBody().

thejoker101
20 Oct 2006, 4:32 AM
I didn't write this code, Yahoo did: http://developer.yahoo.com/yui/examples/container/panel-photo.html.

That's what I'm trying to extend.

jack.slocum
20 Oct 2006, 4:51 AM
It stripped a lot of your code.

Why not use event delegation? You will get much better performance and it will work as expected.

Even without seeing all the code, I'd imagine this line is your problem:



YAHOO.util.Event.addListener(photoboxes[i].id, 'click', photoboxContainer.show());


Should be:



YAHOO.util.Event.addListener(photoboxes[i].id, 'click', photoboxContainer.show, photoboxContainer, true);

thejoker101
20 Oct 2006, 6:54 AM
First off, Jack, that seems to have worked, soft of. I'll get to that in a second.

I started mucking with the script I put together and changed a few things around. Mainly I was confusing Objects with Arrays and then I was setting them in photoboxContainer incorrectly.

I think I have it correct now, only I now get the original overlay.body has no properties error really quick, then it follows the link.

I'm sure i'm just overlooking something and I'm sure it's painfully obvious to those out there who are js gurus!

Thanks again!

Updated Code:



function photoboxInit() {
var photoboxes = YAHOO.util.Dom.getElementsByClassName('pb', 'a');

if(photoboxes.length > 0) {
var photoboxContainer = new YAHOO.widget.PhotoBox("win", {
effect:[
{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}
],
fixedcenter: true,
constraintoviewport: true,
underlay:"none",
close:true,
visible:false,
draggable:false,
modal:true,
/* photos:[{src:"http://altbike.com/wp-content/uploads/2006/09/CIMG0919_500.JPG",caption:"Chris King"}],
*/
width:"500px"
});

var photoArr = new Array();
for(var i = 0; i < photoboxes.length; i++) {
var obj = new photoObj( photoboxes[i].href, photoboxes[i].title );
photoArr.push(obj);
YAHOO.util.Event.addListener(photoboxes[i].id, 'click', photoboxContainer.show, photoboxContainer, true);
}
photoboxContainer.cfg.addProperty('photos', photoArr);
photoboxContainer.render();
}
return false;
}

function photoObj(src, caption) {
this.src = src;
this.caption = caption;
}

YAHOO.util.Event.addListener(window,'load',photoboxInit);

thejoker101
25 Oct 2006, 9:28 PM
Ok, I got most of that stuff worked out, yay for a new problem!

The photobox object contains a property called 'photos' which is an array of objects containing a src and a caption property (whew!). My issue is how to dynamically load this array.

I would think that my code at the bottom would do it, but it doesn't seem to.

The previous code had this for how it was set up in the photobox object:
photos:[{src:"http://static.flickr.com/51/129586913_e78683c466.jpg",caption:"Linus"}]

Am I doing something wrong here? :(


YAHOO.altBike.photobox = new YAHOO.widget.PhotoBox("win", {
effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}],
fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:false, modal:true,
width:"500px"}
);

var photoArr = new Array();
for(var i = 0; i < photoboxes.length; i++) {
var obj = new photoObj( photoboxes[i].href, photoboxes[i].title );
photoArr.push(obj);

YAHOO.util.Event.addListener(photoboxes[i], 'click', YAHOO.altBike.photobox.show, YAHOO.altBike.photobox, true);
}
YAHOO.altBike.photobox.cfg.addProperty('photos', photoArr);
YAHOO.altBike.photobox.render();
}
}

function photoObj(src, caption) {
this.src = src;
this.caption = caption;
}

jack.slocum
26 Oct 2006, 7:50 AM
Looks ok to me, it has to be something else.