PDA

View Full Version : Help with Tabs



drayru
11 Oct 2006, 6:01 PM
Hello,

I'm trying to put som tabs with images and text in a page.
I've downloaded yui-ext and included the library in my page.

However, in Firefox I can see an error like this

> container has no properties

in yui-ext.js line 155

anyone sugestions about this error?

I've included the following yui libraries
yahoo.js
dom.js
event.js
dragdrop.js
animation.js
connection.js
container.js

could it be a version incompatibility error?
I'm using yui 0.11.4

thanks, a lot

jbowman
11 Oct 2006, 6:33 PM
can you post the code you're using to create the tabs?

drayru
11 Oct 2006, 6:43 PM
Of corse,
Here it is..


<script>
var tabs = new YAHOO.ext.TabPanel('cristopelo');
tabs.addTab('cristo1', "Primer Plano");
tabs.addTab('cristo2', "Acercamiento");
tabs.activate('cristo1');
</script>

and the page has:

<div>
<div>


The%20Machine%20that%20Killed%20the%20Human_files/dsc00222mt0.jpg (http://img156.imageshack.us/img156/5354/dsc00222mt0.jpg)
El cristo, de fondo la virgen María.</p>
</div>
<div>


http://img172.imageshack.us/img172/5042/dsc08244xf5.jpg (http://img172.imageshack.us/img172/5042/dsc08244xf5.jpg)
Nítese la greña maltrecha del cristo y su tamaño claramente desproporcionado.</p>
</div>
</div>


thanks

devol
11 Oct 2006, 6:48 PM
You need to include container.js from the main YUI files.

jack.slocum
11 Oct 2006, 6:51 PM
You are creating and activating the tabs inline as the page loads before the elements actually exist. You will need to wait for the elements to exist by attaching to the load event or using YAHOO.util.Event.onAvailable. Since you appear to be loading images, onAvailable is probably your best choice:


function initTabs(){
var tabs = new YAHOO.ext.TabPanel('cristopelo');
tabs.addTab('cristo1', "Primer Plano");
tabs.addTab('cristo2', "Acercamiento");
tabs.activate('cristo1');
}
YAHOO.util.onAvailable('cristopelo', initTabs);

jbowman
11 Oct 2006, 6:52 PM
you need to set the ids for your divs, like this



<script>
var tabs = new YAHOO.ext.TabPanel('cristopelo');
tabs.addTab('cristo1', "Primer Plano");
tabs.addTab('cristo2', "Acercamiento");
tabs.activate('cristo1');
</script>

<div id="cristopelo">
<div id="cristo1">


The%20Machine%20that%20Killed%20the%20Human_files/dsc00222mt0.jpg (http://img156.imageshack.us/img156/5354/dsc00222mt0.jpg)
El cristo, de fondo la virgen María.</p>
</div>
<div id="cristo2">


http://img172.imageshack.us/img172/5042/dsc08244xf5.jpg (http://img172.imageshack.us/img172/5042/dsc08244xf5.jpg)
Nítese la greña maltrecha del cristo y su tamaño claramente desproporcionado.</p>
</div>
</div>

jack.slocum
11 Oct 2006, 6:55 PM
The error he is getting is referring to the tabs "container" property. container is the element the tabs are rendered into. Since he was doing it inline, before the container element 'cristopelo' existed, it was telling him the wonderfully informative javascript message of "container has no properties". JS error messages are about as worthless as they come!

jack.slocum
11 Oct 2006, 6:56 PM
jbowman, i think because he didn't put it in a code block the forum stripped the attributes. That's a "feature" of phpBB. :D

jbowman
12 Oct 2006, 3:13 AM
ah ok... another "feature" is the quote block at the bottom is still displaying the images while showing the rest of the code :lol:

drayru
12 Oct 2006, 8:21 AM
Hey Jack, thanks!

You were right, the business didnt work due to the inexistant
(ant that moment) div.

However, the correct function was YAHOO.util.Event.onAvailable :o

Thanks a lot.

PD. I'll remember put my code inside a code tag .

jack.slocum
12 Oct 2006, 9:29 AM
Whoops, I must be moving too quickly. Sorry about that. Doesn't help you if I give you a bogus function to call. :)