Hi,
Just one final suggestion: try fixing your code right away by removing
the two commas as described in my first post to see if this is indeed
the issue (it is one for sure) or if there are other ones *before*
going on with rewriting you code (we didn't see the rest of your code,
after all). Because once your code has been rewritten it might be
harder for you to pinpoint another issue if you don't fully master
what you just written-you know, going one step at a time.
Jonathan
On Oct 8, 10:26 am, Mike_Openmotive <[EMAIL PROTECTED]> wrote:
> 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));
>
> > > });
