Hi again, and sorry if this isn't regarding your issue (since your
could should work after the removal of extra commas), but seeing that
big chunk of code I just couldn't resist. Since you're a new user, it
might give you food for thought & new things to look into and learn.
You see, MooTools gives you tools to accomplish what you want, and
more often than not ways to do it in less code, and-when you start
learning classes-ways to make your code re-usable (I won't go as far
as creating a class out of your code, though). For example, instead
writing out function calls multiple times on defined elements/objects,
you could have a loop that iterates through that list of elements/
objects and call the function on them (and with tracing and other
advances in JavaScript engines speed will benefit from loops)
for example, instead of:
$('yourId1').adopt('myId1');
$('yourId2').adopt('myId2');
$('yourId3').adopt('myId3');
$('yourId4').adopt('myId4');
$('yourId5').adopt('myId5');
you can do:
var myIds = ['myId1', 'myId2', 'myId3', 'myId4', 'myId5'];
var yourIds = ['yourId1', 'yourId2', 'yourId3', 'yourId4', 'yourId5'];
myIds.each(function(item, index) {
// item will be 'myId1', 'myId2' ...
// yourIds[index] will be 'yourId1', 'yourId2' ...
$(yourIds[index]).adopt($(item));
});
Now, applying this example to your code it would become:
var handlers = ['tab1B','tab2B','tab3B','tab4B','tab5B'];
var mutables = ['mod1','mod2','mod3','mod4','mod5'];
window.addEvent('domready', function() {
mutables.each(function(item, index) {
$(handlers[index]).addEvent('click', showFunction.bind(new
Fx.Morph($(item), {link: 'cancel'})));
});
});
It may not seem as simple (in fact, it's not), but it follows the
logic of your code: you want to apply the same action on many pairs of
objects. In fact, if for any reason you decide to change the action or
worse, the relation between objects (for example, $
('myrId1').inject('yourId1', 'before'); instead of $
('yourId1').adopt('myId1'); ) then you'll only have to replace one
line instead of 5 (or 25 or more).
After that, you'll probably find out that every element has a default
Fx.Morph instance (unless you already know), that you call using
element.morph(properties) and whose options are set using
element.set('morph', options). It may not be of much difference (since
you can either use the default instance or create a separate one), but
it allows you to bind to showFunction() the element instead of it's
related Fx.Morph instance, so the element being morphed is available
and you can further act on it. With proper $() checks, it would look
like this:
var showFunction = function() {
// resets styles
$$('.mootab-content').setStyles({
'display': 'none',
'opacity': 0
});
// styles to morph to
this.morph({ // <-- 'this' is now one of $('mod1'), $('mod2'), etc.
'display': 'block',
'opacity': 1
});
}
var handlers = ['tab1B','tab2B','tab3B','tab4B','tab5B'];
var mutables = ['mod1','mod2','mod3','mod4','mod5'];
window.addEvent('domready', function() {
mutables.each(function(item, index) {
if (!(handler = $(handlers[index]))) return;
if (!(item = $(item))) return;
item.set('morph', {link: 'cancel'});
handler.addEvent('click', showFunction.bind(item));
});
});
And since item.set('morph', options) returns back item, you can merge
the last two lines to give you:
var handlers = ['tab1B','tab2B','tab3B','tab4B','tab5B'];
var mutables = ['mod1','mod2','mod3','mod4','mod5'];
window.addEvent('domready', function() {
mutables.each(function(item, index) {
if (!(handler = $(handlers[index]))) return;
if (!(item = $(item))) return;
handler.addEvent('click', showFunction.bind(item.set('morph',
{link: 'cancel'})));
});
});
After that, you can further improve the code by making a class out of
it. There's no end with Mootools. I ope it will make you want to learn
even more about Mootools. Cheers!
Jonathan
On Oct 6, 2:10 pm, Mike_Openmotive <[EMAIL PROTECTED]> wrote:
> Sorry to bother with another IE issue but I'm having problems getting
> my code to work in IE. I'm a new user and I'm hoping it's something
> simple!
>
> var showFunction = function() {
> //resets styles
> $$('.mootab-content').setStyles({
> 'display': 'none',
> 'opacity': 0,
> });
>
> //styles to morph to
> this.start({
> 'display': 'block',
> 'opacity': 1,
> });
>
> }
>
> window.addEvent('load', function() {
> var elOneB = $('mod1');
> var elTwoB = $('mod2');
> var elThreeB = $('mod3');
> var elFourB = $('mod4');
> var elFiveB = $('mod5');
>
> //create morph object
> elOneB = new Fx.Morph(elOneB, {
> link: 'cancel'
> });
> elTwoB = new Fx.Morph(elTwoB, {
> link: 'cancel'
> });
> elThreeB = new Fx.Morph(elThreeB, {
> link: 'cancel'
> });
> elFourB = new Fx.Morph(elFourB, {
> link: 'cancel'
> });
> elFiveB = new Fx.Morph(elFiveB, {
> link: 'cancel'
> });
>
> $('tab1B').addEvent('click', showFunction.bind(elOneB));
> $('tab2B').addEvent('click', showFunction.bind(elTwoB));
> $('tab3B').addEvent('click', showFunction.bind(elThreeB));
> $('tab4B').addEvent('click', showFunction.bind(elFourB));
> $('tab5B').addEvent('click', showFunction.bind(elFiveB));
>
> });
