[solved] Problems with mootools 1.11 in Joomla 1.5 website

First to say that I'm asking here because I'm using Joomla which uses still Mootools 1.11 version.

I'm having problems to make work this script taken from demo mootools website:



then the css...


and then the html...


Basically I have two problems:

1) It's supposed that this script must work with one div, and actually works and the div is hide when the page is loaded, and then when I click in the toggle link the div disappears,
but unfortunatelly this div is an empty div (all blank), and all the content inside the div is not shown. It's really weird and annoying, isn't it?.

2) I'd like to use this script to hide and show many layers with the same id"test" and class"test", but although I have tested and read no less than 30-40 post, my poor acknowledge about mootools, or my poor copy/paste technique doesn't makes me to suceed. I have tried things like: $$('.test') to get the element and then each(function(), etc.. but nothing works!!

¿Is there someone that want to help to this poor mootools newbie?
I'm near to tears for this fact? I'm very, very tired to test all that I have seen in my google searchs!

Thank You in advance!!

Are you basically looking for a tabs option? Have several <div> that are hidden and when you click on each link, it displays the specified <div> and hides the others?

check out this link and tell me if it's what your after http://jsfiddle.net/ja3ec/

I know it's in virtuemart, but can be used anywhere. Let me know.

Hi dudeinmo:

First thank you for this incredible web "http://jsfiddle.net". I'm very tired trying to test everytime the script into my code, and copy/paste all the diferent codes in each file. In fact, many times I don't know exactly if the reason of the fail is my code or the code that I'm trying to test. Since now, I have an incredible tool to test codes avoiding all my headaches. Really Thank You Very Much From Spain (Europe)!!

Having said this, your proposal is not exactly what I'm looking for. If you take a look to my code, I'd like to use the toggle method instead of slidein/slideout, or in your case set properties of an element to block or none state.

Anyway, my code is working OK in jsfiddle.net, so my first problem solved, and the strange behaviour of hide() method is clear that has to do with a problem with the version of mootols (1.11), or something similar. The problem is that Joomla actually use version 1.11 untill the new 1.6 version arrives, so I don't know exactly what to do.

However, the problem arrives when I try to use more than one div, because the first is the only div that really dissapears , and I can't do nothing related with the second, nor appear, not dissapear.

Any idea?

By the way, I forget to post some lines of my code, the lines related with the link where click in order to make dissapears the links. This is the correct HTML code:



Thanks!

Alberto.

Hi!

¿Is there someone who knows how to hide two divs with the same id & class name with MooTools and wants to share with my his acknowledge?

Any help will be apreciated!

Thanks!

it's an easy chore to hide all elements with the same class:


it, however, is not suggested to have two or more elements having the same ID.

Hi wowenkho!

I need that at first all divs are hidden, but after that, I need to let user open the div he wants, but not all the divs at the same time again.
Any Idea how to do it?

Anyway, about your comentary about using two divs with the same ID, as far as I remember, the ID is a unique identification fo each element in the DOM,
so that you're OK and I'm mistaken. There is no way to select an element through his ID if all of the elemnts have the same ID. I'm so sorry!

But, I have test many times using the class of the elements, which can actually be the same, and didn't work either.
In fact, If I try to select the div with works, but If I introduce the point before the name of the class doesn't work.
It's very strange, isn't it?

Thanks for your help!

since elements of the same class can be captured and placed in an array, you can refer to a single element in that array by using indexes. or you can also use the "this" prefix to pertain to a certain item in the group.

Hi wowenkho!

Thank you for your answer, you're vey kind.

Certainly, I'm very near to tears by this...
I thought that I had understood your last comment, but unfortunately I can't able to make word the code.

Please, can you take a look to this link and tell me what I'm doing wrong?
I hope you can help me to don't give up in this matter, because I feel I'm very near to success.

http://jsfiddle.net/dphaA/15/

By the way, http://jsfiddle.net/ is an alpha web, but an amazing and incredible usefull web, although I'm sure you just know it.

Thanks in advance!!

first off, to make slide() work, you need the more package. the MooTools 1.11 in JSFiddle and MooShell don't come with the More package. you can only include the More package in version 1.2 in MOoShell. but anyways, it's not much different in both versions, so i guess you can make it your reference:
http://mootools.net/shell/QvxDG/

I love you Womenkho, your code works perfect!
Really, Thank you, thank you very much!!

Only, I don't actually if I'll be able to use in my current Joomla installation, because the Joomla team are just upgrading the his CMS to a new 1.6 version, and one the things more expected are just that the new version will use Mootools 1.2 instead of 1.11. I'll try to use both, and if works I'll say you something and to the rest of the community.

About the code, I have been working in other posibilities, because actually my dreamed effect wasn't the toggle effect, the effect that I dreamed to get was that, when a user click in a button, one div with a little information about a product disspear and it would become in an another bigger div with the complete information about this product.

Well, Thanks to you, now I have my dreamed effect!!

Just in case someone search for this kind of effect follow this link:

http://jsfiddle.net/dphaA/28/

And if someone search how to open a div when a button and close with another button follow this other link:

http://jsfiddle.net/dphaA/29/

Well, I'll say something about if I have got sucess inserting this code in my current Joomla Installation, OK?

AND REALLY THANK YOU VERY MUCH FROM SPAIN!!

Muchas Gracias!!

Alberto Q.