Jonathan-
Can't thank you enough for your time! This has helped open my eyes to
the power of MooTools (and how much I have yet to learn!). I'm going
to attempt rewriting my code and then see if the IE problem still
remains. Thanks again!
Mike
On Oct 7, 5:59 pm, johnwait <[EMAIL PROTECTED]> wrote:
> 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 anotherIEissue but I'm having problems getting
> > my code to work inIE. 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));
>
> > });
